没有标题的导航元素——文档大纲

Question

这个问题与文档大纲结构有关，因为它与 <nav> 元素中的 headers 相关。这不是关于验证的问题。

当我验证我的网络应用程序的其中一个页面时，检查显示 "document outline" 的字段时，大纲包括以下内容：

[nav element with no heading]

我不想在我的导航元素中添加标题，因为在我的导航上下文中，对于应用程序的消费者来说，它似乎是无关紧要的（它是一个导航元素，用于 sub-section 页面）；但我确实想要一个结构良好的文档大纲。

所以我的问题是multi-part：

大纲为什么包括这个？
向导航元素添加标题的正确方法是什么？
是否有必要向导航元素添加标题？因为这在大多数网站上似乎并不常见。

Answer 1

The nav element is a sectioning element，很像 body，文章，章节和旁白。每个部分都应该有一个标题，虽然不是必需的。
正确的方法是使用 h1、h2、... 元素，就像使用任何其他分段元素一样。
不，没有必要这样做。如果您真的很在意大纲，可以随时添加大纲并使用 CSS 将其隐藏，但是完全省略标题也没有错。

文档生成的大纲对验证没有影响。文档可以验证为 HTML5，同时生成与作者预期完全不同的大纲。但在验证上下文中，任何分段元素都不需要标题。

Answer 2

这是因为 nav 元素是在 Sections section of the HTML5 specification 中定义的，并且部分应该有标题。

文档大纲：

The outline for a sectioning content element or a sectioning root element consists of a list of one or more potentially nested sections. A section is a container that corresponds to some nodes in the original DOM tree. Each section can have one heading associated with it, and can contain any number of further nested sections.

— 4.3.10.1 Creating an outline - HTML5 Specification

请注意可以这个词 - 它们不是必需的。如果需要它们，验证器将抛出警告和错误，而不是 somewhat-friendly 提醒您缺少标题的注释。

所以回答你的问题：

Why is the outline including this?

这只是一个友好的提醒，标题不存在。例如，以防万一您希望出现标题但忘记添加标题。

What is the proper way to add a heading to a nav element?

这完全取决于您想要实现的目标。 HTML5 规范本身给出了以下示例：

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

Is it necessary to add a heading to a nav element? because it doesn't seem like a common practice on most websites.

完全没有。这完全是可选的。有些人可能会争辩说，为 SEO 目的添加标题到所有部分是有好处的，但这完全取决于您。如果您确实想添加它们但不想显示它们，您可以随时使用 CSS 隐藏标题。

Answer 3

导航元素没有标题不是 HTML 一致性错误。一致性检查器中提供的大纲视图纯粹是提供信息。

Answer 4

@james-donnelly的回答很到位。只是想补充一点，我通常会这样做：

<nav>
    <h1 class="v-h">Site Navigation</h1>
    <ul>
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>
</nav>

然后在我的CSS中，v-hclass定义为：

.v-h {
    position: absolute !important;
    height: 1px; width: 1px; 
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
}

这使得 header 在呈现的 HTML 内容中不可见，但允许屏幕阅读器 'see' 内容。

参考文献：http://snook.ca/archives/html_and_css/hiding-content-for-accessibility

没有标题的导航元素——文档大纲

nav element with no heading -- document outline

html

w3c-validation