Thursday, September 17th, 2009
Walking through an HTML5 blog site
Category: HTML
The HTML5 spec introduces several new sectioning elements to HTML:
<article>,<section>,<header>&<footer>,<nav>,<aside>, and<hgroup>.There’s widespread confusion about when to use these elements. I’d like to write a little bit about these elements and how to use them appropriately, using blog template markup as a motivating example.
Go through the post and you will quickly grok all of:
HTML:
-
-
<!DOCTYPE html>
-
<html lang="en-US-x-Hixie">
-
<title>My Blog: Adventures in cat pictures</title>
-
</head>
-
<header> <!-- site header -->
-
<hgroup> <!-- squashes subtitle in doc outline -->
-
<h1>My Blog</h1>
-
<h2>Adventures in cat pictures</h2>
-
</hgroup>
-
<nav> <!-- main blog navigation links -->
-
… other navigation links …
-
</ul>
-
</nav>
-
</header>
-
-
… main content goes here …
-
-
<aside> <!-- sidebar -->
-
<section>
-
<h1>Search My Blog</h1>
-
<form action="…">
-
<input name="q" type="search"
-
placeholder="To search, type and hit enter" />
-
</form>
-
</section>
-
<section>
-
<h1>Blogroll</h1>
-
</ul>
-
</section>
-
</aside>
-
<footer> <!-- site footer -->
-
<p>Copyright © 2009 You. All rights reserved.</p>
-
<a href="mailto:you@example.org">you@example.org</a>
-
</address>
-
</footer>
-
</body>
-
</html>
-
Related Content:
3.8 rating from 10 votes
Based on this article (http://html5doctor.com/understanding-aside/) I would disagree with his use of <aside> as a sidebar in this context. Sure to be one of many contentious semantic arguments along this road. Should be fun!
Just wanted to point this out because there may be people that are confused. Until recently the footer element was intended to only be contained within section elements, but was just changed to function like header (which many people were doing anyways).
Never thought about putting aside for sidebars. I was only thinking of using them for quoting purposes.
If there is a header and footer tag then there should be a tag that describes the bit that goes between the header and footer. ?
@wfisk – You would use a div tag if it’s purely a container for scripting or styling.
@wfisk I guess ‘body’ is what goes between ‘header’ and ‘footer’ …oops no, can’t do that, we already used that one!
@Ahrjay, yes I can use a div but what class should it have? and then shouldn’t that be a tag in HTML5
@blueskiwi, yes logically between a header and a footer there should be a body-er.
Thanks for this article!
Great Post.