⇤ BACK

HTML5 section, aside, header, nav, footer elements: Not as obvious as they sound

This is a summary of Chapter 5 of Jeremy Keith’s excellent book “HTML5 for Web Designers” by publisher A Book Apart. Bear in mind that this article is 1/4 my opinion and observations. The other 3/4 is paraphrasing directly out of the book.

Before we get to the section, aside, header, nav and footer elements it’s important we understand one of the foundational changes in HTML5. Each piece of sectioning content has its own self-contained outline. That means you don’t have to keep track of your heading level anymore—you can start from h1 each time. Because each piece generates its own outline, you can now get far more heading levels than simply h1 to h6. More importantly, you can start to think about your content in a truly modular way.

Some of the new structural elements can be misleading. Especially the section, aside, header, nav and footer elements. Correct usage of the seemingly obvious elements can be confusing. Here’s a checklist of common pitfalls to avoid:

section

Used for grouping together thematically-related content. Sounds like a div element, but it’s not. The div has no semantic meaning. Before replacing all your div’s with section elements, always ask yourself, “Is all of the content related?“

aside

Used for tangentially related content. Just because some content appears to the left or right of the main content isn’t enough reason to use the aside element. Ask yourself if the content within the aside can be removed without reducing the meaning of the main content. Pullquotes are an example of tangentially related content.

There is a crucial difference between the header element and the general accepted usage of header (or masthead). The header element doesn’t necessarily have to be at the top of the page. It’s used for introductory content for its containing element. You can have multiple header elements in a single document.

Intended for major navigation information. A group of links grouped together isn’t enough reason to use the nav element. Site-wide navigation, on the other hand belongs in a nav element.

Sounds like it’s a description of the position, but it’s not. Footer elements contain information about its containing element: who wrote it, copyright, links to related content, etc. Whereas we usually have one footer for an entire document, HTML5 allows us to also have footer within sections.

So you see? It’s not exactly as straightforward as it might seem.

The Key Insight

Each piece of sectioning content has its own self-contained outline. This means:

  • You can start from h1 in each sectioning element
  • You get more heading levels than just h1 to h6
  • Content becomes truly modular
  • The document outline becomes more meaningful and accessible

Best Practices

When implementing these elements, always consider their semantic meaning rather than their visual appearance:

  • section: Groups thematically related content
  • aside: Contains tangentially related content that could be removed
  • header: Provides introductory content for its parent element
  • nav: Contains major navigation links only
  • footer: Contains metadata about its containing element

Remember, these elements are about meaning and structure, not visual positioning on the page.