【问题标题】:nav element with no heading -- document outline没有标题的导航元素——文档大纲
【发布时间】:2015-10-29 19:42:31
【问题描述】:

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

当我验证我的网络应用程序的一个页面并检查“文档大纲”字段时,大纲包括以下内容:

[没有标题的导航元素]

我不想在我的导航元素中添加标题,因为在我的导航上下文中,对于应用程序的消费者来说,它看起来无关紧要(它是用于对页面的子部分进行分页的导航元素);但我确实希望有一个结构良好的文档大纲。

所以我的问题是多方面的:

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

【问题讨论】:

标签: html w3c-validation


【解决方案1】:

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

关于文档大纲:

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

——4.3.10.1 Creating an outline - HTML5 Specification

注意单词可以 - 它们不是必需的。如果需要它们,验证器会抛出警告和错误,而不是一些友好的注释来提醒您缺少标题。


所以回答你的问题:

为什么大纲要包括这个?

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

向导航元素添加标题的正确方法是什么?

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

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

是否需要为nav 元素添加标题?因为这在大多数网站上似乎并不常见。

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

【讨论】:

  • 谢谢@James Donnelly
  • 根据向nav元素添加标题的建议示例,页面带有两个h1标题,它对SEO有负面影响。你能在你的回答中解释一下吗? (即使改成h2标题的逻辑结构问题也存在)
【解决方案2】:
  • The nav element is a sectioning element,很像正文、文章、部分和旁边。尽管不是必需的,但每个部分都应该有一个标题。
  • 正确的方法是使用 h1、h2、... 元素,就像使用任何其他分段元素一样。
  • 不,没有必要这样做。如果您真的很在意大纲,您可以随时添加并使用 CSS 将其隐藏,但完全省略标题并没有错。

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

【讨论】:

    【解决方案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 内容中不可见,但允许屏幕阅读器“看到”内容。

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

    【讨论】:

    • 你如何处理页面中的两个 h1 ? (一个Site Navigation 和一个main heading of page
    • @Pmpr 不确定您的意思。您可以根据需要多次重复使用该类,尽管我不认为您想在视觉上隐藏您提到的两个标题。我假设您不想隐藏页面的主标题,因此您不会将 .v-h 标题应用于您的主页面标题。
    • 隐藏和使用该类对我来说并不重要。使用您的解决方案意味着您的页面中有 2 h1 是错误的
    • @Pmpr 在您的页面中有 2 个 h1 元素并没有错。在同一根或内容部分中有 2 个 H1 元素是“错误的”(例如,无效的 HTML)。有关 HTML 文档中多个 H1 元素的更多信息,请参阅 this article(这不是唯一一篇解释这一点的文章,但它是一篇相当不错的文章)。
    【解决方案4】:

    nav 元素没有标题不是 HTML 一致性错误。一致性检查器中提供的大纲视图仅供参考。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-12-06
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多