代码之家 › 专栏 › 技术社区 › jcolton

当文档大纲中的位置未知时,使用哪个标题级别?

html-heading semantic-markup accessibility html

6

jcolton · 技术社区 · 7 年前

我正在构建一个HTML片段,该片段将动态包含在页面中。该代码段如下所示:

<article>
    <h2>Title</h2>
    <p>Content</p>
</article>

问题是,我无法知道这段代码将包含在文档大纲的何处。它可能直接出现在 <h1> ,或者它可以嵌套在 <h4> . 换句话说,我的大纲可能是这样的:

<h1>
    <h2>
        <h3>
    <h2>
    <h2>

非常符合逻辑。或者它可能看起来像这样:

<h1>
    <h2>
        <h2>
    <h2>
    <h2>

不太合乎逻辑。或者它甚至可能看起来像这样:

<h1>
    <h2>
        <h3>
            <h2>
    <h2>
    <h2>

完全奇怪,我无法知道或控制它!

我不关心样式,只关心语义。

我认为最好的解决办法就是 <h1> s everywhere并让分段元素按照新的HTML5文档大纲处理语义,但我的研究建议我不要这样做,因为没有客户机真正支持这种大纲方法。那么,最好的解决方案是什么?

评论中提出了一些使用脚本解决问题的想法。这些都可以工作,但我想我想知道是否有一个合理的解决方案,它不需要增加代码的复杂性来完成我认为浏览器应该自己完成的事情。

假设,如果这种脚本解决方案由于任何原因都不可能实现,那么使用 <h1> 而不是用嵌套不正确的子级别创建完全错误的大纲?

1 回复 | 直到 7 年前

1

unor Daniel Garijo 7 年前

就HTML5规范而言, 您可以使用任何标题元素( h1 - h6 ),只要始终使用剖切元素(如 article ).

所有这些代码段都是有效的,它们创建了相同的大纲,并且在语义上是等效的:

<!-- h1 + h2 -->
<body>
  <h1>heading for 'body'</h1>
  <article>
    <h2>heading for 'article'</h2>
  </article>
</body>

<!-- h1 + h1 -->
<body>
  <h1>heading for 'body'</h1>
  <article>
    <h1>heading for 'article'</h1>
  </article>
</body>

<!-- h1 + h6 -->
<body>
  <h1>heading for 'body'</h1>
  <article>
    <h6>heading for 'article'</h6>
  </article>
</body>

<!-- h5 + h1 -->
<body>
  <h5>heading for 'body'</h5>
  <article>
    <h1>heading for 'article'</h1>
  </article>
</body>

由于每个剖切元素在这些代码段中没有多个标题,因此标题元素 h1 - h6级 像这样工作(经常被提议) h 要素:排名无关紧要。

但是,像往常一样,一些用户代理可能不符合这里的规范, 由于各种原因。如果您还想将预期的大纲传达给这些UAs,则必须依赖heading元素列组(就像HTML 4.01中的情况一样)。这就是为什么 the spec recommends to do this :

作者应使用标题排名( h1 - h6级 )传达文件结构。

如果无法计算排名,该怎么办? 尽可能做出最佳猜测,并为不支持完整HTML5大纲算法的UAs提供一个不理想的大纲。对于支持HTML5s大纲算法的UAs来说,它可以很好地工作。

猜测如下:

永远不应该是 h1 ,因为您的代码段将是一个剖切元素,所以它至少从文档中的级别2开始(级别1将始终是具有 body 作为最近的剖切父对象)。
根据代码段的性质,不太可能出现低标题。例如,如果代码段是博客帖子的评论表单,那么它应该与 文章 元素或下面的一个级别(如果它嵌套在 文章 ),因此通常 h2 或 h3 .
如果代码段表示对用户非常重要的内容,则应使用较高的标题,因为使用较低的标题时,依赖大纲进行导航的用户可能永远无法访问代码段内容,因为它可能“隐藏”在较深的大纲中,用户可能对下面的条目不感兴趣(因此他们可能会跳过整个部分及其所有子部分)。