CODEWITHSUNDEEP
htmlaccessibilitysemantic-markup
Joshua Muheim
Joshua Muheim

Reputation: 13195

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

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?

Upvotes: 0

Views: 1322

Answers (4)

adam b
adam b

Reputation: 356

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.

Upvotes: 1

BoltClock
BoltClock

Reputation: 723668

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>

Upvotes: 3

James
James

Reputation: 102

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.

Upvotes: 0

Tony Gustafsson
Tony Gustafsson

Reputation: 888

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.

Upvotes: -2

Related Questions