HTML5 new tags: section, article, aside, hgroup, header, footer, nav, figure, figcaption

HTML5 Logo

Here is a list of new HTML5 tags that were not present in previous versions of html like xhtml 1.1 or html4.

Other articles in this series about new HTML5 tags are "HTML5 new tags and old tags with new behavior: ruby, rt, rp, bdi, wbr, canvas, command, menu, details, summary, datalist, keygen, output, address, div" and "HTML5 new tags: video, track, embed, object, mark, progress, meter, time".

Can I use the new HTML5 now?

Yes you can, but you need to use the HTML5shiv javascript for IE lower then version 9, or use modernizr where the HTML5 shiv is built in. The shiv script is a little javascript that enables HTML5 in browsers older then ie9. The advantage of using the new HTML5 right now is the semantic plus they will give you, it's always good to add semantic value to content because it can enhance your SEO quality.

<section>

The section tag is a grouping tag like hgroup. You could use it to group chapters of a book or groups of content where each group has a different thematic.

To not just regroup content with section but also enhance the semantic value of that group you could use microdata.

Use the section tag instead of the hgroup, article, nav, aside, footer and header tag, if those don't apply. If you only intend to use section to apply styles to a part of your document, then instead use a div.

For example you could split your "about us" in the sections, each floating left or one under the other:


<section id="about_us_text">some text explaining who we are, perhaps some photos</section>

<section id="contact_form">a contact form</section>

<section id="map_and_address">an interactive map and our address</section>

<article>

Put this one around any post you have on your website. Even if it's just preview of an article you can still use this tag, for example in a list of news articles on the homepage of a blog, where you tease the users using a title and header but not the full article, you still can use the article tag, each item can be surrounded by an article tag.

If under an article you have comments, you can use an article tag for the main post and have inside of it an article tag for each comment.


<article class="article">

    <p>article, some text</p>

    <article class="comment"><p>comment 1</p></article>

    <article class="comment"><p>comment 2</p></article>

    <article class="comment"><p>comment 3</p></article>

<article>

<aside>

The aside section tag is used to delimiter content that is somehow related to the main content part of the document, for example a tag-cloud widget or a blog-roll widget, but it can also be used in articles to show content related to that article but not part of the main flow.


<section id="main_content">the main content, maybe an article</section>

<aside id="widgets_list">for example, some widgets showing the latest comments, a tagcloud, ...</aside>

<hgroup>

The hgroup section tag is used to regroup multiple h1 - h6 tags. The outliner will disregard all headings, except the one with the highest ranking. Unfortunately until today, there is no support for the new outlining algorithms in search engines, browser or screen readers.


<hgroup>
    <h1>title</h1>
    <h2>sub-title</h2>
    <h6>the author name and publish date</h6>
</hgroup>

<header>

The header section tag can be used to group header information, of a whole document or an article, inside a document. You can have multiple header tags in one page, one might be the header of the page, another one the header of the first article another one the header of the second article and so on.


<section id="page">

    <header>the page header content</header>

    <article>

        <header>the article header</header>

    </article>

</section>

<footer>

Same as header but for footer stuff ;). One exception is that footer tags can be for example on top of a page if the content is a back button, or inside an article if content is information like the author data or amount of comments.


<section id="page">

    <article>

        <footer>the article footer</footer>

    </article>

    <footer>the page footer content</footer>

</section>

<nav>

The nav section tag is used to delimiter a navigation area of your document.


    <body>

    <header>

       <nav>
           <ul>
               <li>navigation button 1</li>
               <li>navigation button 2</li>
               <li>navigation button 3</li>
           </ul>
       </nav>

    </header>

</body>

<figure> and <figcaption>

Is used to annotate a single or images, photos, a video or even a code block. The figcaption tag holds the legend of the figure.


<figure>
    <img src="example.jpg" alt="Example" />
    <figcaption>Example</figcaption>
</figure>