标题 "Navigation" 应该在后面的 <nav> 元素之上，还是在其中？

Question

哪个更好：

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

或者：

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

有什么显着差异吗？

Answer 1

第一个更好，因为标题应该描述接下来的内容，而不是导航的一部分。就像 h1 不应该在 p 里面一样。不过，无论哪种方式，它都可能工作得很好。

Answer 2

将标题放在 <nav> 容器中可以让您更轻松地设置样式，并作为一个整体来操作导航元素。例如，如果您移动了 <nav>，您可能希望标题也随之移动。它只是节省了工作并使将它放在里面变得更简单。

您可以使用以下方式设置样式：

nav h1 {
    style: something funky;
}

而不是为所有 h1 元素设置样式或为其提供 ID。

Answer 3

nav 是一个分段元素，因此，如果您有一个描述导航的标题，它应该位于：

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

否则，标题将错误地与完全不同的部分相关联，而不是与 nav 元素相关联。

W3C HTML5 spec提供了一个near-identical例子：

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>

Answer 4

如果您想了解辅助功能take a look here.

最好在 nav 中使用 header，因为它描述了该部分。

标题 "Navigation" 应该在后面的 <nav> 元素之上，还是在其中？

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

html

accessibility

semantic-markup