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.
Related
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>
In the following example html5 page structure, which of the following is more semantic in respect to the sidebar of widgets (elements which appear in the sidebar are elements which appear on multiple pages and do not necessarily, directly, nor particularly relate to this page of content):
<body>
<header id="site-header">
...
</header>
<section id="page-body">
<main>
<header></header>
<article></article>
<footer></footer>
</main>
<aside class="sidebar" id="sidebar-a">
<section id="search-widget">
...search field, etc...
</section>
<section id="recent-articles-widget">
...articles list...
</section>
</aside>
<aside class="sidebar" id="sidebar-b">
<section id="cloud-tag-widget">
...search field, etc...
</section>
<section id="recent-articles-widget">
...articles list...
</section>
</aside>
</section>
<footer id="site-footer"> ... </footer>
</body>
or...
<body>
<header id="site-header">
...
</header>
<section id="page-body">
<main>
<header></header>
<article></article>
<footer></footer>
</main>
<section class="sidebar" id="sidebar-a">
<aside id="search-widget">
...search field, etc...
</aside>
<aside id="recent-articles-widget">
...articles list...
</aside>
</section>
<section class="sidebar" id="sidebar-b">
<aside id="cloud-tag-widget">
...tag list...
</aside>
<aside id="popular-articles-widget">
...articles list...
</aside>
</section>
</section>
<footer id="site-footer"> ... </footer>
</body>
AKA - Is it more semantic or in any way more appropriate to put multiple asides within a section, or include multiple sections within an aside to create a sidebar of widgets? Should they instead be simple divs within a div? Or divs within a section? Divs within an aside? Why?
Which is easier for screen readers or search engines? Why?
The aside is "tangentially related to the content around" it.
Currently, it doesn’t seem to be defined what "around" means exactly. Assuming that it’s (at least) the content of the parent sectioning content element, then this would mean for your examples:
<body> <section> <aside></aside> </section> </body>
The aside is related to the content of the section.
<body> <aside> <section></section> </aside> </body>
The aside is related to the content of the body (i.e., of the whole document).
So in your case, you’ll probably want to have aside as descendant of body (and of no other sectioning content element).
The next thing to decide would be: one aside with several sub-sections vs. several aside. I’d go with a separate aside for each "sidebar block", unless you can logically group (*) these blocks.
* I.e., if there is a natural heading that could be used (it doesn’t matter if you actually use it) to group several sidebar blocks, use one aside with section childs for these.
The <aside> tag defines some content aside from the content it is placed in.
The aside content should be related to the surrounding content.
I'm having a problem. In the following markup, there's an aside-element which contains additional information for the user which I would like to display as shown in the attached picture (right floated).
<section>
<h2>site title</h2>
<p>that's the site's main content</p>
<aside>
<h3>other stuff</h3>
<div>cloud tag</div>
</aside>
</section>
However, I don't want to place the aside-element before the h2-element and just right-float it. I know this would work, but somehow it would seem wrong to me. One could say, that the search-engines know that it's lesser-important content, since it's contained in an aside-element.
But I would also like the aside-element behave, that when the page's width is smallered (e.g. smaller devices), the aside element stays BELOW the main content.
So my question is: Is there any possibility to float the aside-element as shown in the picture, without manipulating the markup-order (adding helping div's is okay, i guess).
Thanks already, looking forward.
You need to wrap your main content in a div, and then add float: left to both the main div and your aside element. Then, just use the margin property to space them appropriately.
HTML
<section>
<div class="main">
<h2>site title</h2>
<p>that's the site's main content</p>
</div>
<aside>
<h3>other stuff</h3>
<div>cloud tag</div>
</aside>
</section>
CSS
.main {
float: left;
}
aside {
float: left;
}
See DEMO.
I got something like that:
<div>
<header>
//My content
</header>
<nav>
//My nav
</nav>
<footer>
//My footer content
</footer>
</div>
Is it semantically correct to move my footer tag outside the div id="page" so to have:
<div>
<header>
//My content
</header>
<nav>
//My nav
</nav>
</div>
<footer>
//My footer content
</footer>
I think yes, but not 100% sure. I accept advices.
Thanks
It really depends on how you interpret the definition of the footer tag:
A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
Personally, I'd use the first example. The contents of the <div> act as one section of your document.
Is it fine to use multiple <header> and in HTML 5, if yes then isn't semantically incorrect and won't it confuse mobile readers?
I saw many site uses like
<body class="home">
<header class="hd1">
<hgroup>
<h1>HTML5 Documnet</h1>
<h2>tagline</h2>
</hgroup>
</header><!-- .hd1 -->
<div class="main">
<section class="hs1">
<header>
<h1>This is a Page Sub Title</h1>
</header>
<p>Some content...</p>
<h2>Demonstrating EM and STRONG</h2>
<p><strong>This text will have more importance (SEO-wise and contextually)</strong></p>
<footer>
<p>Author: <cite>Louis Lazaris</cite></p>
</footer>
</section>
</div><!-- .main -->
<footer class="f1">
<p>copyright © year</p>
</footer><!-- .f1 -->
</body>
Yes, multiple <header> and <footer> elements are fine. They aren't used the same as <div id="header"> as most people use them for. Technically speaking, header and footer represent a header and footer of a section. A section being a piece of the page such as an article that contains header tags like <h1> and then content, then footer stuff like copyrights, citations, references, etc.
From the horses mouth:
A header element is intended to usually contain the section's heading
(an h1–h6 element or an hgroup element), but this is not required. The
header element can also be used to wrap a section's table of contents,
a search form, or any relevant logos.
And
The footer element represents a footer for its nearest ancestor
sectioning content or sectioning root element. A footer typically
contains information about its section such as who wrote it, links to
related documents, copyright data, and the like.
Directly from the spec at: http://dev.w3.org/html5/spec/Overview.html
Note that as I said these are not used to create sections like people did with <div id="header/footer"> it mentions this confusion in the spec:
The footer element is not sectioning content; it doesn't introduce a
new section.
So, again, "technically" speaking, that last footer you have there introduces a new section and isn't semantic. From the spec's point of view anyways.