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

Question

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

1.2k views Asked by Joshua Muheim At 23 November 2024 at 04:03

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?

Original Q&A

There are 4 answers

Tony Gustafsson On 17 June 2015 at 09:31

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.

James On 17 June 2015 at 09:33

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.

adam b On 17 June 2015 at 09:39

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.

**BoltClock** · Accepted Answer · 2015-06-17 09:35:18

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>

TechQA.

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

There are 4 answers

Related Questions in HTML

Related Questions in ACCESSIBILITY

Related Questions in SEMANTIC-MARKUP

Popular Questions

Popular Tags

Trending Questions