<!DOCTYPE html>
HTML5 is here and now and introduces some interesting changes to the semantic structure of the web page. With the earlier versions of HTML the semantics were simply headings where the h1 tag was always top level. We had h1 title, h2 sub-title, h3 menu items and such. Here are the new HTML5 tags to help us in this task:
header – The header tag is… well the header 
It’s the place where you keep the the title of the current section/article. The header contains information and/or navigation and it’s not expected to be positioned on the top of the page.
footer – The footer should contain information like who is the author of the article, tags, category… Again same as the header, it’s not expected to be positioned at the bottom, it’s just expected to carry certain information.
article – The article is the place where the content is. Something that is not just a holder of information, but it contains the info promised by the header.
address – Container for the contact address of the author, typically in the footer tag. It should not be postal address unless it is a part of the contact information. The difference with HTML4 is that there is no article there and the address tag defines the address for the whole page content where the address in HTML5 can be used multiple times on the same page for different articles.
section – It can often be mistaken with the article, but if the article contains the actual content, the section is used for grouping thematically related content. The section often is used as container for the footer, article and other related tags.
aside – It defines something aside the page content, something that you can hide from the page without affecting the main content. Again, as with the header and footer it’s NOT the position that defines it, it’s the content it holds.
nav – Navigation holder.
Now lets make an example to clear the things. I will try to illustrate IMDB semantics of The Hunger Games. It’s new and actual You can check how the semantics look like with this HTML5 Outliner. In the old HTML way it would look something like this:
<h1>The Hunger Games</h1> <h2>Related Videos</h2> <h2>Cast</h2> <h2>Storyline</h2> <h2>User Reviews</h2> <h3>User Review 1</h3> <h3>User Review 2</h3>
And this would make the following outline:
- The Hunger Games
- Related Videos
- Cast
- Storyline
- User Reviews
- User Review 1
- User Review 2
Now lets see the HTML5 way:
<header>
<h1>The Hunger Games</h1>
</header>
<section>
<header>
<h1>Related Videos</h1>
</header>
</section>
<section>
<header>
<h1>Cast</h1>
</header>
</section>
<section>
<header>
<h1>Storyline</h1>
</header>
</section>
<section>
<header>
<h1>User Reviews</h1>
</header>
<article>
<header>
<h1>User Review 1</h1>
</header>
</article>
<article>
<header>
<h1>User Review 2</h1>
</header>
</article>
</section>
Which will produce this outline:
- The Hunger Games
- Related Videos
- Cast
- Storyline
- User Reviews
- User Review 1
- User Review 2
If there is situation where you want to add more headings to one section there is hgroup, where you can use h1-h6:
<hgroup> <h1>Main title</h1> <h2>Secondary title</h2> </hgroup>
This will give you the following outline:
- Main title
It looks the same, but if there was more text added after the headings we wouldn’t be able to tell if it belongs to the section or not. With HTML5 we clearly separate the different sections. Let’s go little bit deeper into the content semantics:
<header>
<h1>The Hunger Games</h1>
<small>action, drama, Sci-Fi</small>
</header>
<section>
<header>
<h1>Related Videos</h1>
</header>
<embed>Trailer 1</embed>
<embed>Trailer 2</embed>
<small>see all videos</small>
</section>
<section>
<header>
<h1>Cast</h1>
</header>
<p>Cast overview, first billed only:</p>
the cast...
<small>Full cast and crew</small>
</section>
<article>
<header>
<h1>Storyline</h1>
</header>
<p>In a not-too-distant future, North America has collapsed, weakened...</p>
<footer>
Written by Suzanne Collins
keywords, tags, genres....
</footer>
</article>
<section>
<header>
<h1>User Reviews</h1>
</header>
<article>
<header>
<h1>Nice adaption from the book, but...</h1>
</header>
<footer><time>22 march 2012</time> Author excavator <address>email@example.com</address></footer>
<p>One of the things I liked the most about reading 'The Hunger Games'...</p>
<small>Review this title | See all reviews</small>
</article>
<article>
<header>
<h1>A true game-changer for movies aimed at teens</h1>
</header>
<footer><time>19 march 2012</time> Author Liniara <address>email@example.com</address></footer>
<p>Let me start by saying that I'm a huge fan of the...</p>
<small>Review this title | See all reviews</small>
</article>
</section>
<aside>
<header>
<h1>Related lists</h1>
</header>
<section>
<header>
<h1>21 Most anticipated movies of 2012</h1></header>
</section>
<section>
<header>
<h1>My top 250</h1>
</header>
</section>
<section>
<header>
<h1>Films to look forward to in 2012</h1>
</header>
</section>
</aside>
As you can see with HTML5 you can go much deeper and mark specifically the start and end of each section. I found best use of the aside tag in the Related lists. It’s literally something outside the current page’s contents that you can exclude without reflecting to the main content. As you can see I’ve used the address tag 2 times to mark the address of the given article’s author. This wasn’t possible in the older HTML.
This will produce the following outline:
- The Hunger Games
- Related Videos
- Cast
- Storyline
- User Reviews
- Nice adaption from the book, but…
- A true game-changer for movies aimed at teens
- Related lists
- 21 Most anticipated movies of 2012
- My top 250
- Films to look forward to in 2012
Although it looks easy, implementing the HTML5 semantics into your page can prove to be one very tricky task