HTML5 structure—nav, aside, figure & footer

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:

You’re probably already using a <ul class="nav"> or something similar for site navigation. The <nav> element allows us to explicitly mark up groups of navigation links. 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.

Sectioning & 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). 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…