Once upon a time, you divided up a web page entirely in divs (it is short for division, after all). It worked well enough, but front-end developers ended up using a lot of the same ID and Class names to describe them. For instance, most sites would have a <div id=”footer”> and a <div class=”article”>.
When HTML5 was being developed, the brain trust behind it wanted to create separate elements to allow a more semantic page markup. They took a wild guess at the most used ID and Class names, and we ended up with a bunch of new layout elements for our sites. Oddly enough, which they later researched what sort of naming conventions people were using, they found that they were pretty much dead on.
What Makes HTML5 Semantic Elements Different
While many of these elements seem self-explanatory, the new HTML5 semantic elements might not work exactly like you assume they do.
Perhaps the biggest mental hurdle to get over is that elements like <header> and <footer> don’t have to be unique. So instead of thinking in terms of IDs, which you can only use once per page, think like a class that can be used multiple times.
Another oddity for those of us who are used to single headers and footers on a page is that elements do not need to be tied to specific locations. Yes, your header might be at the top of your page and contain your masthead and primary navigation, but you might also have other headers throughout the document to help break out chunks of content.
The< header> element is, as one imagines, built to delineate the header area. As I mentioned above, this doesn’t necessarily limit it to the top of the site. You might have multiple content sections throughout your site that could each have a header. For instance, if your homepage is divided into three distinct sections – let’s say “About Us”, “Our Products”, and “Customer Testimonials” – each of those sections might begin with a <header> element with introductory content, such as a headline, brief description, and thematic imagery. Pages, sections, articles, and asides can also contain <footer> elements.
The <nav> element is essentially just a group of navigational links. These might be the primary navigation at the top of your site, the secondary navigation in your footer, or even a table of contents to link to different sections of content on the same page.
The <article> element is used for self-contained pieces of content that could be safely broken out of the page. By way of example, blog posts, magazine articles, and product reviews would all be contained within the <article> element.
A <section> is used to group a piece of related content within a larger whole. Going back to the example we used for <header>, “About Us”, “Our Products”, and “Customer Testimonials” would all be placed inside their own <section> element. As another example, each grouping of Question/Answer on an FAQ page could be a distinct <section>.
You use an <aside> for anything that is related to the content on the site, but is still considered distinct from it. Perhaps the most obvious use for asides would be sidebars with things like search, related links, tag clouds, and social media links. However, you could also use this elements for pull quotes, break-out information, or anything that doesn’t quite fold into an <article> or <section>.
Much like the <header>, it’s easy to assume that the <footer> element should only be used at the bottom of your page as a site footer. And again like the <header>, the <footer> is actually much more versatile. For example, you could use a <footer> to hold such things as image or quotation attribution, related links, and copyright notices. Pages, sections, articles, and asides can also contain <footer> elements.
When Should I Use a <section> and When Should I Use an <article>?
If I had to guess, the HTML5 semantic elements to cause the most drama are <article> and <section> elements, primarily because they are both so similar you could make a case to use either for a given piece of content.
To clear this up, let’s take a look at the definition of the <article> element from the WHATWG: “[…] a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable [..]” (via WHATWG). The important parts of this quotation are “self-contained” and “independently” distributable, which is to say that you could strip an <article> out of the page it’s on, and it would still read like a complete document.
A <section> is part of a whole, while an <article> is complete unto itself. The distinction is subtle, perhaps, but important.
These semantic elements are only scratching the surface of what was added with HTML5. If you’d like to learn more (and why wouldn’t you), here are a couple great resources: