lest I forget (Oli Studholme)

HTML5 structure—nav, aside, figure, & footer

Note: I’ve moved all my HTML5 articles to http://oli.jp/, so I can walk the walk. I’ll leave this here for posterity, but won’t update it.
→ Go to: “HTML5 structure—nav, aside, figure, & footer” on oli.jp

After talking about <section> & <article>, and <header> & <hgroup>, I’m going to look at <nav>, <aside>, <figure> and <footer>, before looking at sectioning content, heading content and outlines:

  • <nav>—a section of navigation links, either to other pages (site navigation) or to sections on the same page (eg a table of contents for long articles). This is for primary navigation blocks, not just for any group of links. For example content highlights in the page’s footer don’t qualify. Breadcrumbs probably don’t either. (W3C:HTML, WhatWG)
  • <aside>—a section of a page that consists of content that is tangentially related—but separate—to the surrounding content. In print this would be a sidebar, pullquote or footnote. On a weblog article this could be article metadata in the margin or the comments section. (W3C:HTML, WhatWG)
  • <figure>—for content that is essential to understanding, but can be removed from the document’s ‘flow’ (moved to a different place) without affecting the document’s meaning. This can be used for images or video, but it can also be used for any other content, including a graph, code sample, or other media. Caption the figure with the optional (and delicious) child <figcaption>. (W3C:HTML, WhatWG)

You’re probably already using a <ul class="nav"> or something similar for site navigation. The <nav> element allows us to explicitly mark up both site and in-page navigation. This has accessibility benefits, eg for users of assistive technology like screen readers. Note you’ll still need the <ul> or <ol> element if you are using a list for your navigation (and you should be—it’s the most appropriate element), but you can also include a heading element (<h1>-<h6>) or other relevant content.

<aside> content should be additional to (but not essential to the understanding of) the main content, ie any related content. While the examples of print design can provide inspiration don’t stop at pull quotes. For example a footnote provides extra but unessential information, and a pull quote (while essential content) is a copy of a quote from the main content. However keep in mind the <aside> must be related—having your sidebar in an <aside> in the page’s main <section> is fine, but site-wide information shouldn’t appear in an article’s <aside>, for example.

<figure> content is essential, but it’s placement is not. Any part of a section that you’d currently use CSS positioning for would be a good candidate. Both of these elements provide additional semantic meaning, which allows computers to discern the relationships between the parts of a page (and between pages) more easily. In addition to accessibility, this will also help in indexing and repurposing content.

Choose between <aside> or <figure> by asking yourself if the content is essential to the section’s understanding. If the content is just related and not essential, use <aside>. If the content is essential but it’s position in the flow of content isn’t important, use <figure>. Of course, if it’s position relates to previous and subsequent content, use something else more appropriate! :)

<footer> seems to suggest a page footer, however it’s important to remember that like <header> this element applies to the current section (in the case of a page header or footer the <body> acts as the section). It’s defining feature is containing navigation aids or additional information about the section, rather than it’s placement. If you add contact information for the section’s author remember to enclose it in an <address> element, as this now applies to a section, not the entire page as in HTML4/XHTML1.

Using <footer> as a page footer

As mentioned above <footer> can’t contain the following elements:

  • <header>
  • <footer>
  • <section>
  • <article>
  • <aside>
  • <nav>
  • <hgroup>
  • <h1>-<h6>

This means unless your page footer is very simple (eg inline content like copyright info and a contact email address), you’ll have to use a <section> instead. This is more restrictive than <header>, which only forbids descendant <header> and <footer>s.

As mentioned above <footer> now can’t contain the following elements (the same as <header>):

  • <header>
  • <footer>

This is more permissive than the earlier “copyright & contact info only” version of <footer>, but may still be too restrictive for a complex page footer. If you require nested sectioning elements with their own headers and footers use <section> instead.

Sectioning content, heading content& heading elements, and outlines#

A new and important aspect of HTML5 is the creation of outlines (think indented list) from an HTML5 page. The four elements <section>, <article>, <nav> and <aside> are sectioning elements. They define the major ‘chunks of related content’ on a page, and their order and nesting dictate the relationship between these sections. They generally have a heading (& possibly a footer), and allow the author to explicitly define. By using these elements semantically, the scope of headings and footers and <address> elements, or what content a contained <heading>, <footer> and <address> applies to, automatically allows a meaningful outline of the page to be made.

Heading elements include the standard <h1> to <h6> plus <hgroup>. The first heading of each section is used as the title of the section, and any subsequent headings (excluding those in the first <hgroup>) create an implicit enclosing section in the outline. Together with sectioning elements these heading-generated sections define the outline of the document. Note that <header> is not a sectioning or heading content element, and does not affect the creation of sections or their titles. Authors are encouraged to explicitly wrap sections in elements of sectioning content, instead of relying on the implicit sections generated by having multiple headings in one element of sectioning content.

In the next exciting installment, we’ll finally look at the document structures that fall out of the HTML5 spec. Sample templates and code examples ahoy! Also, thanks to the fine folk at Information Architects, whose Web Trend Map is coming like Godzilla to Tokyo…

Questions? Feedback? Mistakes? Let me know via Twitter (@boblet)…


  1. 2009-07-13 Added more detail to <footer> regarding page footers
  2. 2009-07-14 Moved per-section <address> use info out of <footer> description, added a section about using <footer> as a page footer, and improved the Sectioning & heading elements, and outlines text
  3. 2009-07-23 Changed from HTML5 to HTML 5 etc.
  4. 2009-09-12 Changed back from HTML 5 to HTML5 etc :| Made major changes to <footer> after it’s role significantly changed recently (1, 2, 3; important changes <mark>ed with a green underline). Also added anchors to titles (on hover) and made a couple of small clarifications.
  5. 2010-02-06 Updated <figure> to mention <figcaption>, a child element for marking up the figure’s caption (replacing <legend>).


  1. psdtohtmlshop reblogged this from boblet
  2. xn----ylbandbmrbccr2ax8cfbiip9g reblogged this from boblet
  3. alimadve reblogged this from boblet
  4. cylontoaster reblogged this from boblet
  5. boblet posted this