HTML Best Practices: HTML5 Structural Elements

HTML5 structural elements allow us to create a more semantic and descriptive codebase and are used in all of our projects. Instead of using <div>s for everything, we can use HTML5 elements like <header>, <footer>, and <article>. They work the same way, in that they’re all block level elements, but improve readability and thus maintainability.

There are a few common pitfalls to avoid with HTML structural elements. Not everything is a <section>. The element represents a generic document or application section and should contain a heading.

Another misconception is that the <figure> element can only be used for images. In fact, it can be used to mark up diagrams, SVG charts, photos, and code samples.

Finally, not all groups of links on a page need to be in a nav element. The <nav> element is primarily intended for sections that consist of major navigation blocks.

Examples

Bad:

<section id="wrapper">
    <header>
        <h1>Header content</h1>
    </header>
    <section id="main">
        <!-- Main content -->
    </section>
    <section id="secondary">
        <!-- Secondary content -->
    </section>
</section>

Good:

<div class="wrapper">
    <header>
        <h1>My super duper page</h1>
        <!-- Header content -->
    </header>
    <main role="main">
        <!-- Page content -->
    </main>
    <aside role="complementary">
        <!-- Secondary content -->
    </aside>
</div>