A question about HTML5 markup. Which is correct?
<header class="wrapper">
<div class="wrapper-inner">
</div>
</header>
-OR-
<div class="wrapper">
<header class="wrapper-inner">
</header>
</div>
.wrapper { width: 100%; }
.wrapper-inner { width: 980px; margin: 0 auto; }
Leaving attributes (like lang) aside, you can ignore div and span elements, as they are meaningless. So (apart from the different classes) your examples are semantically equivalent.
Assuming that the .wrapper element won’t contain anything else than the .wrapper-inner element, it’s up to you which one to use for which.
A possible benefit of using <header><div></div></header> over <div><header></header></div> could be that it might be easier for markup authors to spot the header in the document, as authors wouldn’t have to "enter" the div element to check what it contains and what it’s used for.
Either is correct.
If you want to use as a sectioning element for the page, then, you likely want:
<header class="page-header">
<div class="page-header-subsection">
</div>
</header>
If you want to use as a sectioning element for a sub-section of the page, then, you likely want:
<section class="author-biography">
<header class="author-name-and-thumbnail">
</header>
</section>
Related
One of the benefits of HTML 5 are semantic tags like <header>, <nav> and <main>.
Unfortunately, I haven't found a way to style them so the <nav> goes down the left of the page, not without a parent <div>, anyhow. It seems to me that such a <div> messes up the semantics, and I'm not sure it's technically valid HTML.
<header>My Page</header>
<div class="nav-main"> <!-- I don't like this -->
<nav>
Foo
Bar
</nav>
<main>
<h1>My Main Content</h1>
<p>Blah.</p>
</main>
</div>
<footer>ⓒ Not really copyright</footer>
The CSS:
div.nav-main {
display: flex;
}
nav {
width: 10em;
}
nav a {
display: block;
}
Is there a clean way to do it, without the <div>?
I don't think an old-school float: left is a solution, because I don't want the <main> to wrap around the <nav> if it's taller, and I don't want to add arbitrary heights or other hacks. I just want the <main> and <nav> to both be their natural heights and have consistent widths, and for the <footer> to be underneath both.
Otherwise, if somebody can cite assurance that wrapping <nav> and <main> in a <div> is okay, I'll just thank you and move along… although it still doesn't look very elegant to me.
So a <div> is a non-semantic element, so you technically have valid html here. But I understand not wanting divs everywhere. You could potentially put flex on the body, set the width of the header and footer to 100% so they would be on their own line. So it'd be
body
{
display:flex;
flex-flow: row wrap;
}
header, footer
{
width:100%
}
Hopes this helps!
You're trying too hard to achieve minimalist markup. What you have there is extremely simple compared to almost any website. If it works to have a couple div elements for layout, there's no issue.
The key is that relevant content is contained in your semantic elements, not that you only use semantic elements. If you're doing any sort of modern, flexible, responsive layout it can't be avoided.
I still haven't found 'official' (W3C) word about whether a <div> can be a legal parent for a <nav> or <main>, but I do trust Mozilla's web docs. They state that:
<nav> can have '[a]ny element that accepts flow content' as a parent, and
<main>'s parent can be any element '[w]here flow content is expected, but only if it is a hierarchically correct main element'.
So in this example, the <div> is fine.
Why do people do this in CSS:
#section #content h1
{
margin:0;
}
When they can just do:
#content h1
{
margin:0;
}
for code like this:
<div id="section">
<div id="content">
</div>
</div>
and get the same results (at least in IE7 - my target browser, unfortunately). Is it just for specificity in the code? Code clarity to declare what you are referring to?
CSS files are generally designed to be reusable so that the same CSS can be used all over the website and can be applied to all pages in the application.
Targeting a very Specific node can be useful to prevent any surprising behavior.
Suppose you had this code as you said,
#content h1
{
margin:0;
}
<div id="section">
<div id="content">
</div>
</div>
Someone came after you and created another HTML page using the same CSS and the structure was this
<div id="content">
</div>
and you desire a different styling for the H1 on this page.
You can argue that even with this CSS
#section #content h1
{
margin:0;
}
if the new page consisted of the same structure,
<div id="section">
<div id="content">
</div>
</div>
well in that case it is easier to debug, in this example the structure is quite simple, but real life CSS tend to be complex.
If you (or anybody else) is doing it, you shouldn't be. You're just trying to hold together a poorly developed CSS structure.
Try your hardest to stick to this rule: IDs are for JavaScript, classes are for CSS.
You should never need multiple IDs in a selector since IDs must be globally unique in the document. This means your #section #content h1 is overkill since it includes 2 IDs.
Other types of selectors (classes, tag names, etc) are not unique, so you might need to string a few together to get the element you want. For example, #section .content p would be perfectly reasonable in many contexts.
You might not want all #content h1 to look the same.
In that case #content h1 might have an ancestor ID/Class that you would want to latch onto so you can change the style of the h1 for those instances.
For example:
#content h1 { /* style 1 */ }
#about #content h1,
#contact-us #content h1,
.products #content h1 { /* style 2 */ }
The term you are looking for is "Specificity" best example ive seen to describe this is using a points based system.
You use multiple selectors so that you don't select sections that you don't want.
For example, taking your use case, we would have to expand it from a section and content div, to something slightly larger.
<div class="wrapper">
<div class="header">
<div class="content">
</div>
</div>
<div class="section>
<div class="content">
</div>
</div>
</div>
Now, without adding the extra specificity, you will grab all H1 tags in every content section of the page, but you probably don't want to do that.
It's not a problem to be non-specific in small files, but when you begin to reach into the hundreds of possible css interactions being very specific about what you are doing in the css can save you major headaches.
In order to make websites more accessible I have been encouraged to use HTML5 tags <header>, <footer>, etc... to only surround the actual content, but I have a feeling that I might be doing something wrong.
An example body:
<header>
<div class="center">
<h1>Title</h1>
<nav>
...
</nav>
</div>
</header>
<div>
<section>
...
</section>
</div>
<footer>
<div class="center">
...
</div>
</footer>
.center {
max-width: 70em;
margin: 0 auto;
}
header {
width: 100%
background-color: red;
}
footer {
width: 100%
background-color: green;
}
body > div {
width: 100%
background-color: blue;
}
Is it actually better like this?
<div id="head">
<header>
<h1>Title</h1>
<nav>
...
</nav>
</header>
</div>
<div>
<section>
...
</section>
</div>
<div id="foot">
<footer>
...
</footer>
</div>
As for what is better — DIV inside structural elements like HEADER/FOOTER or structural elements inside DIV, it does not matter since DIV is common container without any semantic sense at all.
What is really unsemantic/bad-practice in your first example is center class name. Class names should reflect purpose of block (content, products, etc.), not its presentation (center, red, etc.).
Basically, that div elements are not required semantically speaking (maybe you need them for styling?).
div is an element without semantic (as its counterpart for inline elements span) and you have to use them where there isn't anything better. Even if you give them some semantic with its id attribute, that semantic is only known by you and not for, for example, any web search motor (google) or any screen reader (for blind people, for example), because there aren't any definitive conventions about id or class values.
If you use header, footer etc, you are giving them semantics. Maybe you want to increase their semantic using some value for the role attribute.
By the way, that section surely it isn't needed. Look at what people from HTML5 Doctor say:
In HTML 5 you can specifically mark up all the “secondary” content on
a page such as navigation, branding, copyright notices, so it feels
odd that you can’t specifically mark up the most important part of
your page—the content.
But what would be the purpose of marking it up specifically, anyway?
If you need to style it, use a div. An assistive technlogy like a
screenreader can find the main content because it is the first thing
inside a page that isn’t a header, nav or footer.
With a <div role="main"> you have everything you need.
It'd be better like this:
<header>
<h1>Title</h1>
<nav>
...
</nav>
</header>
<section>
...
</section>
<footer>
...
</footer>
Or alternatively:
<div class="header">
<h1>Title</h1>
<div class="nav">
...
</div>
</div>
<div class="section">
...
</div>
<div class="footer">
...
</div>
Why are you being told to add those extra wrapper div elements?
Try
<section>
<header> head content </header>
main content
<footer> footer content </footer>
</section>
This get's rid of all those silly divs and now you have your header and footer linked to your section like they should be.
I have a div container with a series of p tags. Each p tag will float to the left. I want two p tags per line, so think field/value.
Title: Some Title
Author: Some Author
<div id="container">
<p class="field">Title</p><p>Some Title</p>
<p class="field">Author</p><p>Some Author</p>
</div>
If I set the "field" class to clear: both, I get the desired functionality in most browsers except IE 7 (not worried < 7). However, in IE 7 if the containing div is wide enough, the clear: both seems to be ignored and I'll get something like this:
Title: Some title Author:
Some Author
A couple of thoughts:
I can monitor the width of the containing div so that only two p tags can sit on one line but that seems very brittle.
I can muddy up the markup by placing clearing divs after every two p tags. It would work but makes me feel dirty inside.
How can I overcome this issue?
Use this pattern (span is optional - for additional styling if needed). Lists make more semantic sense than re-purposing the wrong tags. This is a list. :)
<ul>
<li><label>Title</label><span>Some Title</span></li>
...
</ul>
CSS:
ul, li {
padding:0;
margin:0;
list-style-type:none
}
li {
clear:both
}
label {
float:left;
width:150px;
}
http://jsfiddle.net/QUL9v/1/
Using the p tags....
<div id="container">
<p class="field">Title</p><p class="field">Some Title</p><div class="clear"></div>
<p class="field">Author</p><p class="field">Some Author</p><div class="clear"></div>
</div>
with css:
.field {
float: left;
}
.clear {
clear: both;
}
This is just sticking to the use of the p tag. Personally, this is how I would accomplish it (http://jsfiddle.net/QUL9v/3/):
<div id="container">
<div class="field">Title</div>
<div class="field">Some Title</div>
<div class="clear"></div>
</div>
<div id="container">
<div class="field">Author</div>
<div class="field">Some Author</div>
<div class="clear"></div>
</div>
The only reason I'm recommending this is because since this is more of a layout issue, it feels more natural to me to use the div as opposed to p element. Also, it will ensure the position of the text, regardless of what you put inside the divs (anchors, forms, tables, etc).
Another thing you should pay attention to is I'm using the clear as the last sibling instead of the first (as in your examples). If you're clearing the front; then its possible that since your trailing elements are floated and inline, you're going to potentially run into errors down the road, especially with IE7. A lot of the times, the floating rule will get passed on to elements you never intended or thought it would be passed to. Clearing at the end ensures that this doesn't happen.
I like the h1 element because it specifies the contents are header style contents, but you're not supposed to put things like images or divs inside an h1, so is there an alternative to an h1 that I can put other markup in?
My current html looks like this:
<div class="section">
<h1>
<div style="float:left">header text</div>
<div style="float:right">text</div>
<div style="clear:both;float:none;"></div>
</h1>
<div>body contents</div>
</div>
I like the h1 because I can add a css style to any h1 with a div.section class, but I'm not suppoed to put divs in it...
You could always do
<h1>header text <span>text</span></h1>
Then you handle the css for clearing the floats and floating the second text in the css file.
You should use a semantic image replacement method: Which makes for the most elaborate design (images, colors ect.. the graphic is your oyster) as well as being completely semantic and accessible.
Otherwise as mentioned above, you can add any element that is an inline element: A, SPAN, ect... inside of your H1... but I would shy away from this if you are interested in semantics and being SEO friendly.:
<style>
h1{
background: url('../path/to/image/image_to_replace_header.jpg') no-repeat top left; // Sets the BG that will replace your header
text-indent: -9999px; // Moves the test off screen
overflow: hidden; // Hides the staggered text for good
width: 300px; // Sets width of block(header)
height: 100px; // Sets height of block(header)
}
</style>
<h1>My Awesome Site</h1>
Now your text is still technically there, but you have a pretty photo in its place. Sighted, non sighted, and robot friendly.
The method i personally prefer is to keep the <h1> tags intact and use <span> tags instead of divs inside them. You can style the spans to be display:block and then treat them like divs if need be. This way, the semantic meaning of your <h1> tags is kept, and needless <divs> are omitted. Read up on divitis.
This won't solve your problem if you need to include images inside your <h1> tags. You probably shouldn't be adding graphical styling with img tags anyways, but rather applying the image as a background to the the <h1> element, moving style-related graphics out of your markup into your CSS files.
Is there a reason you don't specify just:
<div style="float:right">text</div>
<h1>header text</h1>
<!-- <div style="clear:both"></div> only if really necessary -->
This will keep your markup semantic, still float text to the right and keep it out of the h1 tag which it is semantically not part of.
To answer your question directly: yes you can use another method. It keeps your CSS editing ability, as well as having a proper H1 element:
<div class="section">
<div id="Header">
<h1 style="float:left">header text<h1>
<div style="float:right">text</div>
</div>
</h1>
<div>body contents</div>
</div>
All the important text is in the H1 and you can still style it as you like.
You can use html5 structural elements :
<section>
<header>
<div>header text</div>
<div>text</div>
</header>
<article>body contents</article>
</section>
Just reverse the nesting order of some of your code:
<div class="section">
<div style="float:left"><h1>header text</h1></div>
<div style="float:right"><h1>text</h1></div>
<div style="clear:both;float:none;">body contents</div>
</div>
I'm not sure that the right-floated text was supposed to be h1, but you get the idea. Often these things are best solved by keeping block-elements on the outside and nesting the line-elements within them.
Headers have semantic meaning. Think of a magazine and why they use headers. If you want to place an image in a header for decoration purposes, use a background-image. I cannot think of a reason why you would need to put an image into a H1 for contextual purposes.