Should a heading "Navigation" be above a following <nav> element, or inside it?

1.2k views Asked by At

What is better:

<h1>Navigation</h1>
<nav>
  <ul>
    <li>...</li>
  </ul>
</nav>

Or:

<nav>
  <h1>Navigation</h1>
  <ul>
    <li>...</li>
  </ul>
</nav>

Is there any significant difference?

4

There are 4 answers

2
BoltClock On BEST ANSWER

nav is a sectioning element and as such, if you have a heading that describes the navigation it should be inside:

<nav>
  <h1>Navigation</h1>
  <ul>
    <li>...</li>
  </ul>
</nav>

Otherwise, the heading will be incorrectly associated with a different section altogether, rather than the nav element.

The W3C HTML5 spec provides a near-identical example:

Code Example:

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

<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>
 ...
</body>
1
Tony Gustafsson On

The first one is better because the heading should describe what to come, and is not a part of the nav. Just like h1 should not be inside p. It will probably work just fine either way though.

0
James On

Having the heading inside the <nav> container allows you to more easily style it, and manipulate the nav element as a whole. If you moved the <nav> for instance, you'd likely want the heading to go with it. It just saves work and makes thing simpler to have it inside.

You will be able to style it using:

nav h1 {
    style: something funky;
}

Instead of styling all h1 elements or giving it an ID.

0
adam b On

If you're wondering about accessibility take a look here.

It is best to use a header inside the nav as it is describing the section.