HTML5 nav element vs. role=”navigation”

As Alohci noted, according to HTML5, example 3 is not allowed.

But example 1 and 2 are not semantically equivalent.

nav is a sectioning element, div not. So example 1 creates an untitled section (similar to an empty heading), changing the whole document outline.

Also nav always belongs to its parent sectioning content (resp. sectioning root), so you can have a navigation for the whole site, a navigation for the main content, a navigation only for chapter 3 of the main content, and/or a navigation for secondary content in the sidebar etc.

This difference is represented in the definitions of the navigation role

A collection of navigational elements (usually links) for navigating the document or related documents.

and the nav element (bolded by me):

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.


Also note: a HTML5 user-agent that doesn’t support/know WAI-ARIA wouldn’t understand that example 2 contains navigation (and vice-versa).

Leave a Comment