Do all of the following carry the same semantic meaning? If not please explain your answer.
1.
<nav>
<ul>
<li><a href="#">link</li>
<li><a href="#">link</li>
<li><a href="#">link</li>
<li><a href="#">link</li>
</ul>
</nav>
2.
<div role="navigation">
<ul>
<li><a href="#">link</li>
<li><a href="#">link</li>
<li><a href="#">link</li>
<li><a href="#">link</li>
</ul>
</div>
3.
<ul role="navigation">
<! -- breaks HTML5 specification 3.2.7.4 Implicit ARIA Semantics
navigation is not an allowed value of role on ul -->
<li><a href="#">link</li>
<li><a href="#">link</li>
<li><a href="#">link</li>
<li><a href="#">link</li>
</ul>
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).