Notes on marking up two navigation lists on the same HTML page
I tweak this website’s navigation on a regular basis. It’s a fairly low stakes pursuit as the site is simple enough to have no navigation at all – I could perhaps just link to the latest posts and categories on the home page. If I do want to create a navigation menu there are only a handful of pages to deal with, and just three types of post.
At the moment I’m using two navigation menus. At the top of every page, you’ll see links to home and my three post categories – posts, links and notes. At the bottom, there’s a more complete menu, which adds links to the About, Contact and Search pages.
What’s the best way to mark this up?
Obviously, we have the
And we can use as many
navs as we like:
In the following example, there are two
navelements, one for primary navigation around the site, and one for secondary navigation around the page itself.
So one approach could be to use a
nav element for both navigation areas. But this doesn’t seem quite right as the element is intended for major navigation blocks.
Not all groups of links on a page need to be in a
navelement — the element is primarily intended for sections that consist of major navigation blocks.
On my page, we have two versions of a single list, which suggests that only one of them should be major – whatever that means. In this case I’m interpreting “major” as the complete list, which sits in the website footer. Note, where the markup occurs in the document is unimportant; we’re only considering its meaning.
So I use one
nav, which sits in the document’s
footer. The navigation menu at the top of the page is wrapped in a
div. If the navigation menus were serving different purposes – for example, if one of them was providing a list of categories – I may have used two
navs, differentiated by
This approach is further justified when we consider what the
nav element is for. Its main purpose is to provide assistive technology with a landmark so navigation can be identified, and linked to, in a page summary. The gov.uk accessibility blog has a good article on using HTML elements to create a structural page summary for screenreaders. In this light, it wouldn’t make much sense to give screenreaders two navigation landmarks for slightly different versions of the same set of links.
This is a useful way of thinking about how to use HTML elements meaningfully. The spec rarely provides a black and white answer to the question How do I use the x element? as it will often depend on what you’re writing and the user’s context. Many users will take advantage of the page’s visual design and conventions – for example, we can be certain a list of links across the top of the page will serve as website navigation. Those of us unable to use visual cues will rely on how the page author has used landmarks; if they’ve simply used the “correct” elements without considering how a screenreader renders them, it can result in potentially repetitive and frustrating experiences.