HTML5 Semantics For Multiple Nav Elements?

I'm learning HTML5 and have been given a project of converting CSS Zen Gardens into a HTML5 semantic version. I've been able to convert most of it with ease, however the links / na

Solution 1:

If you make linkList2 a section then your semantics are 'here is navigation for this section'. Note that nav is already sectioning content, so wrapping it in a section would be somewhat redundant.

Also note that the spec says:

Not all groups of links on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks.

There's no need to put every set of links in a nav just for the sake of it. I think your approach of making linkList2 a nav would be best, though I wouldn't worry too much about making the child elements section:

<nav id="linkList2">
     <div id="lselect">
          <h1 class="select"><span>Select a Design:</span></h1>
          <ul>
          <!-- Links -->
          </ul>
     </div>
     <div id="larchives">
          <h1 class="archives"><span>Archives:</span></h1>
          <ul>
          <!-- Links -->
          </ul>
     </div>
     <div id="lresources">
          <h1 class="resources"><span>Resources:</span></h1>
          <ul>
          <!-- Links -->
          </ul>
     </div>
</nav>

As I mentioned above, nav is sectioning content, so all the headings should really be h1 as they are all the highest level headings in their respective sections (I've changed them above). However I think it is still permissible, from a practical accessibility standpoint, to leave them as h3 if they are preceded by h2 and h1 headings in the markup.

The other approach which would be fine is:

<div id="linkList2">
     <nav id="lselect">
          <h1 class="select"><span>Select a Design:</span></h1>
          <ul>
          <!-- Links -->
          </ul>
     </nav>
     <nav id="larchives">
          <h1 class="archives"><span>Archives:</span></h1>
          <ul>
          <!-- Links -->
          </ul>
     </nav>
     <nav id="lresources">
          <h1 class="resources"><span>Resources:</span></h1>
          <ul>
          <!-- Links -->
          </ul>
     </nav>
</div>

As I mentioned before, don't wrap in a section (or article), nav is enough.

A final point, since your question is about semantics. I know you're working on CSS Zen Garden's markup so the point is probably to have elements in your new page to correspond to all the old ones so that all the stylesheets still work, but you should know that this is not an example of good 'semantic markup'. Here are some things you should be aware of:

• This markup was created in 2003, so it is never going to a great example of what we currently consider good semantic markup .
• By design, the markup on CSS Zen Garden has to stay the same - it is a demo of CSS, not a demo of HTML.
• Because in 2003 IE6 was the dominant browser and no-one else had really got very far with CSS3 anyway, this markup contains a lot of unnecessary extra elements as affordances for styling. Notably all the span elements within the headings and (more arguably) the child div elements lselect, larchives and lresources.
• As well as a lack of OOOCSS, this markup demonstrates classitis - there is no need to have multiple id and class attributes everywhere. For instance there is no need to have both an id of lselect and a class of select, instead you could just use a selector #lselect h1.
• Finally, linkList2 is a terrible id semantically. It's not on a linked list and whether or not it's the second one depends on all the rest of the markup. The ids and class names used are also part of semantic markup.

Solution 2:

You should use the <nav> HTML5 element as this is not only the most semantic element for what you want, but it also allows people using screen readers to navigate the page using landmarks (the <nav> will correspond to the navigation landmark).

Now, if there are multiple regions of your website with links (e.g.: Primary navigation and secondary navigation), you should make sure that the different <nav> elements are correctly labelled. This makes screen readers announce the landmarks correctly (e.g.: "Primary, navigation", "Secondary, navigation"), instead of generically announcing everything as "navigation"), which could be confusing.

To label <nav> elements, you can do one of the following:

Option 1: No visible text on screen

Use aria-label to provide text alternates to the elements.

<nav aria-label=’primary’>
  <ul>
    ...List on links here...
  </ul>
</nav>
<nav aria-label=’secondary’>
  <ul>
    ...List on links here...
  </ul>
</nav>

Option 2: Visible text on screen

If there is text on screen that can make the region identifiable (e.g.: "Related Content"), you can make use of aria-labelledby.

<nav aria-label="Site Menu">
  <ul>
    ...List on links here...
  </ul>
</nav>
<article>
  <h1>Title</h1>
  ...
  <nav aria-labelledby="id-1">
    <h2 id="id-1">
      Related Content
    </h2>
    <ul>
      ...List on links here...
    </ul>
  </nav>
</article>

Here are a few resources that explain this further:

• Multiple Navigation Landmarks
• aria-label