Give your code meaning with HTML5

In this post I’ll be picking up where I left off with Converting to HTML5, and showing you how to mark up your web design with the new structural elements. By using the new elements you can give your HTML semantic meaning, as well as make it easier to read and maintain.

Meet the new elements

• HEADER – Used to define the header of your web page or a section.
• NAV – Used to define the navigation links on your page, and can be used in multiple places.
• SECTION – This element has many uses and is used to define sections of related content
• ASIDE – Used to define content that is aside from the content or the section that it is in, while
  still being related to it.
• ARTICLE – Used to define self contained content, which doesn’t have to be a blog post or news article, even though the name suggests it.
• FOOTER – Used to define the footer of your website page or a section.

The difference between Section and Article

With HTML5, we now have 2 new ways to group content with the SECTION and ARTICLE element. In most cases, these new elements can usually remove the need to use DIVs altogether. There is conflicting information on how these new elements should be used, but the best guide I have found so far is this article. I’ve summarised below the easiest way to decide what element to use where.

• ARTICLE – Is the content inside the article element self contained, and would it make sense on it’s own?
• SECTION – Is the content inside the section element related? The section element could be used to group a list of blog articles, or two sections could be used to divide the list into two categories.
• DIV – The content inside a div does not need to be related, as the div provides no semantic meaning. The div should only be used when a container is needed to assist styling.

Putting the new elements to work

Below is the HTML for a page with a typical structure.

<div id="header"></div>
<div id="nav"><ul></ul></div>
<div id="content">
	<h1>Welcome to the content</h1>
	<h2>A sub section</h2>
	<p>Content</p>
	<h2>Another sub section</h2>
	<p>Content</p>
        <div class="aside"><p>A fact about the content!</p></div>
</div>
<div id="footer"></div>

Now looking at the contents of the content DIV, it seems to match the definition of the ARTICLE element. The content inside is self contained, makes sense on it’s own, and doesn’t contain any unrelated information. It’s not a blog post or a news article, but it still fits the definition of an ARTICLE element. So now, let’s see what the structure would look like if we replace the DIVs with the new elements.

<header></header>
<nav><ul></ul></nav>
<article>
        <h1>Welcome to the content</h1>
        <section>
                <h2>A sub section</h2>
                <p>Content</p>
        </section>
        <section>
                <h2>Another sub section</h2>
                <p>Content</p>
        </section>
        <aside><p>A fact about the content!</p></aside>
</article>
<footer></footer>

In the ARTICLE, we can now see what content belongs to which heading by using the SECTION element. We could also have done this with DIVs, but now our HTML has semantic meaning. Because of the new SECTIONS, we can also see that the ASIDE is related to the whole ARTICLE.

As you can see, the page is much easier to read. This new HTML would also be a lot easier to maintain when spread over several files, as is often the case with templates. Matching a closing DIV tag inside 3 other DIVs is a lot harder than finding the closing ARTICLE tag.

So as you can see, once you get the hang of when to use them, the new elements can add a whole lot of meaning to your HTML.