HTML5 semantic document structure

If your business is like mine, you've been hearing a lot of HTML5 this and HTML5 that lately. Lots of talk about the "Flash killing" video element, animations with canvas, geolocation, and much more. In fact, the buzz around HTML5 has been extended to include things that aren't even HTML5 at all. All over the web, people are talking about the new expressive capabilities of CSS3 while calling them HTML5. Often forgotten in the overwhelming marketing buzz of HTML5 are the new elements introduced and other semantic changes. In this article, I'd like to help you understand and learn to properly use these not-necessarily-exciting, yet definitely very important new, semantic elements. While the subject may seem dry and boring, there's actually a new richness you can add to your markup with the proper use of these new elements.

Why do we have new elements anyway? Did we need them? Where did they come from?

Think about your code. Do you ever use

, , or

? That's exactly where these new elements came from. Millions (maybe billions) of web pages were spidered and the common class names were compiled. You can imagine, after seeing "div class=header" for the umpteenth time, as an analyst, you pretty much knew you were on to something.

In fact, the above listed classes and IDs are three of the most obvious elements—header, nav, footer. And they make sense to most of us. Where it gets trickier, is adding article, section, and what in the world is an aside? More importantly, where do they go on the page? I won't discuss them all in this article, but some of the new elements introduced with HTML5 are (bearing in mind that a couple are still popping in and out of the spec):

One of the first challenges when you receive the content for a website, is deciding which of the new elements are appropriate to use and where they should go (see Figure 1).