header, section, article, footer and html5

HTML5 introduces new tags that make a lot of sense. No longer will each divison of a page need to be speculated as to its purpose; the new tag names have it built right in. I’m going to take a look at what these two tags mean, and how to implement them. Note: This article will be written based on current drafts, and implementation and definition are subject to change.

Header: The <header> tag defines the header of a section or document.

Section: The <section> tag defines sections in a document. Such as chapters, headers, footers, or any other sections of the document.

Article: The <article> tag defines external content. Such as a news article from an external news provider, or text from a web log (blog), or text from a forum. Or any other content from an external source

Footer: The <footer> tag defines the footer of a section or document. Typically contains the name of the author, the date the document was written and/or contact information.

It all seems pretty self explanitory. As of now, an overly simplified version of a blog layout may look like this:

<div id = "header">Blog title, blog links, and so on </div>
  <div id = "content">
    <div class = "post" id = "1">Post content</div>
    <div class = "post" id = "2">Post content</div>
    <div class = "post" id = "3">Post content</div>
  </div>
<div id = "footer">footer content, links, copyright</div>

This, of course, is not the complete page, but you get the idea. Once html5 is adopted, it will appear more like this:

<header>Blog title, blog links, and so on </header>
  <section id = "content">
    <article id = "1">Post content</article>
    <article id = "2">Post content</article>
    <article id = "3">Post content</article>
  </section>
<footer>footer content, links, copyright</footer>

That doesn’t seem so hard. In fact, I bet I could “upgrade” an entire WordPress theme in about an hour to html5 syntax. What does this mean for developers? Well, the truth is, absolutely nothing right now. HTML 5 is not supported in current browsers, and probably won’t be for some time. Opera 9.5, Firefox 3, and Safari 3.x include a handful of html5 features (namely the canvas element), but none of these tags above.

What it means for the future, is simply web pages that make more sense; easier readability. Also, with the same content, there are 30 less characters that needed to be typed. 30 bytes times 1000 means 30 megabytes of bandwidth saved per thousand page loads. This will also mean cleaner and easier to read stylesheets. Overall, pages like a standard blog page will just be much more efficient. This is great news for developers and end users alike.

Sources: http://www.w3schools.com, http://blog.whatwg.org/, http://www.w3.org/html/wg/html5/