Thursday, September 17th, 2009

Walking through an HTML5 blog site

Category: HTML

Edward O’Connor has created a nice tutorial of HTML5 through the lens of his blog site use case.

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:

  1. < !DOCTYPE html>
  2. <html lang="en-US-x-Hixie">
  3.   <head>
  4.     <title>My Blog: Adventures in cat pictures</title>
  5.   </head>
  6.   <body>
  7.     <header> <!-- site header -->
  8.       <hgroup> <!-- squashes subtitle in doc outline -->
  9.         <h1>My Blog</h1>
  10.         <h2>Adventures in cat pictures</h2>
  11.       </hgroup>
  12.       <nav> <!-- main blog navigation links -->
  13.         <ul>
  14.           <li><a href="…">Front page</a></li>
  15.           <li><a href="…">About My Blog</a></li>
  16.           … other navigation links …
  17.         </ul>
  18.       </nav>
  19.     </header>
  21.     … main content goes here …
  23.     <aside> <!-- sidebar -->
  24.       <section>
  25.         <h1>Search My Blog</h1>
  26.         <form action="…">
  27.           <input name="q" type="search"
  28.          placeholder="To search, type and hit enter" />
  29.         </form>
  30.       </section>
  31.       <section>
  32.         <h1>Blogroll</h1>
  33.         <ul>
  34.           <li><a href="…">My other blog</a></li>
  35.           <li><a href="…">Your blog</a></li>
  36.           <li><a href="…">Your friend’s blog</a></li>
  37.         </ul>
  38.       </section>
  39.     </aside>
  40.     <footer> <!-- site footer -->
  41.       <p>Copyright © 2009 You. All rights reserved.</p>
  42.       <address>
  43.         <a href=""></a>
  44.       </address>
  45.     </footer>
  46.   </body>
  47. </html>

Posted by Dion Almaer at 6:33 am

3.5 rating from 15 votes


Comments feed TrackBack URI

Based on this article ( 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!

Comment by smith — September 17, 2009

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.

Comment by blepore — September 17, 2009

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. ?

Comment by wfisk — September 17, 2009

@wfisk – You would use a div tag if it’s purely a container for scripting or styling.

Comment by Ahrjay — September 22, 2009

@wfisk I guess ‘body’ is what goes between ‘header’ and ‘footer’ …oops no, can’t do that, we already used that one!

Comment by blueskiwi — September 22, 2009

@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.

Comment by wfisk — September 27, 2009

Thanks for this article!
Great Post.

Comment by designdhaval — March 25, 2011

Leave a comment

You must be logged in to post a comment.