Question

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

当我为我的网络应用程序验证其中一个页面，并检查“文档大纲”字段时，大纲包括：

[没有标题的nav元素]

我不想在我的导航元素中添加标题，因为在导航的上下文中，它对于应用的消费者来说似乎是无关紧要的（它是用于页面子部分的分页的导航元素）;但我确实希望有一个结构良好的文件大纲。

所以我的问题是多部分：

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

Answer 1

这是因为nav元素是在Sections section of the HTML5 specification中定义的，而且部分预计会有标题。

至于文件大纲：

切片内容元素或切片根元素的大纲由一个或多个可能嵌套的切片的列表组成。 section是一个容器，对应于原始DOM树中的某些节点。 每个部分都可以有一个与之关联的标题，并且可以包含任意数量的其他嵌套部分。

- 4.3.10.1 Creating an outline - HTML5 Specification

注意这个词可以 - 它们不是必需的。如果需要它们，验证器会抛出警告和错误，而不是有些友好的注释，以提醒您标题丢失。

所以回答你的问题：

为什么大纲包括这个？

这只是一个友好的提醒，标题不存在。例如，万一你期望一个标题存在，但你忘记添加标题。

将标题添加到nav元素的正确方法是什么？

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

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

是否有必要向nav元素添加标题？因为在大多数网站上看起来并不常见。

完全没有。它完全是可选的。有些人可能会争辩说，为所有部分添加标题对搜索引擎优化有用，但这完全取决于你。如果您确实要添加它们但不想显示它们，则可以随时使用CSS隐藏标题。

Answer 2

The nav element is a sectioning element，很像身体，文章，部分和旁边。尽管不是必需的，但每个部分都有预期标题。
正确的方法是使用h1，h2，...元素，就像任何其他切片元素一样。
不，没有必要这样做。如果您真的关心大纲，您可以随时添加一个并使用CSS隐藏它，但完全忽略标题没有任何问题。

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

Answer 3

@ james-donnelly的回答很明显。只是想补充一点，我通常做这样的事情：

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

然后在我的CSS中，v-h类被定义为：

.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);
}

这使得标题在呈现的HTML内容中不可见，但允许屏幕阅读器查看＆＃39;内容。

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

Answer 4

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

没有标题的nav元素 - 文档大纲

4 个答案: