nav element example, from WHATWG spec

user_11581350 0
Viewed 57

According to WHATWG spec:

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

As a second example for nav element, there is a page with more places with links, "but only one of those places is considered a navigation section". This is referring to some of p elements, inside header and footer, and is quite confusing. Clearly for me those places - according to definition - should be considered nav elements as well.

Cant understand it.

<body itemscope itemtype="http://schema.org/Blog">
 <header>
  <h1>Wake up sheeple!</h1>
  <p><a href="news.html">News</a> -
     <a href="blog.html">Blog</a> -
     <a href="forums.html">Forums</a></p>
  <p>Last Modified: <span itemprop="dateModified">2009-04-01</span></p>
  <nav>
   <h1>Navigation</h1>
   <ul>
    <li><a href="articles.html">Index of all articles</a></li>
    <li><a href="today.html">Things sheeple need to wake up for today</a></li>
    <li><a href="successes.html">Sheeple we have managed to wake</a></li>
   </ul>
  </nav>
 </header>
 <main>
  <article itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting">
   <header>
    <h2 itemprop="headline">My Day at the Beach</h2>
   </header>
   <div itemprop="articleBody">
    <p>Today I went to the beach and had a lot of fun.</p>
    ...more content...
   </div>
   <footer>
    <p>Posted <time itemprop="datePublished" datetime="2009-10-10">Thursday</time>.</p>
   </footer>
  </article>
  ...more blog posts...
 </main>
 <footer>
  <p>Copyright ©
   <span itemprop="copyrightYear">2010</span>
   <span itemprop="copyrightHolder">The Example Company</span>
  </p>
  <p><a href="about.html">About</a> -
     <a href="policy.html">Privacy Policy</a> -
     <a href="contact.html">Contact Us</a></p>
 </footer>
</body>

html
2 Answers

From my personal reading, what the specs say here when they say

In the following example, the page has several places where links are present, but only one of those places is considered a navigation section.

refers to the note above, which states

User agents (such as screen readers) that are targeted at users who can benefit from navigation information being omitted in the initial rendering, or who can benefit from navigation information being immediately available, can use this element as a way to determine what content on the page to initially skip or provide on request (or both).

In other words, they're not advocating for not using a <nav> instead of the <p> in that example, they're stating that only the <nav> will be understood as being a navigation section, the <p>, even though it also contains links will not be recognized as a navigation section, e.g by screen readers.

Clearly for me those places - according to definition - should be considered nav elements as well.

What part of a page should go in a <nav> is up to the page's author. The specs aren't requiring that every group of links shall be part of a <nav> (they even say it's sometimes useless for instance in a <footer>). So, sure, if you as the page author want to make this <p> section be treated as a navigation section, then make it a <nav>, that'd make perfect sense.

user_37027970

The difference is slight and can be confusing. The first nav element is used for providing navigation throughout the web site. The links in the footer are links to a single point of information. The barely noticeable difference is the first is a navigation through the sea of pages while the second is just a pointer to information.

It's like the difference between showing you the road on a map to get to a city versus the signposts at the beginning.

user_1626980
Related