Question

我正在构建一个动态包含在网页上的HTML代码段。该片段看起来像这样：

numpy.any()

问题在于我无法知道文档大纲中的哪个部分将被包含在内。它可能直接显示在<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>，并让分段元素按照新的HTML5文档大纲处理语义，但我的研究建议我反对，因为没有客户实际支持概述方法。那么什么是最好的解决方案呢？

在使用脚本来解决问题的评论中提出了一些想法。这些可以工作，但我想我想知道是否有一个明智的解决方案，不需要增加代码的复杂性，我认为浏览器应该自己做。

假设，如果无论出于何种原因这样的脚本解决方案是不可能的，那么仅使用<h1>创建一个扁平轮廓是否有意义，而不是使用不正确嵌套的子级别创建一个完全错误的轮廓？

Answer 1

就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元素：排名不会物质

但是，与往常一样，由于各种原因，某些用户代理可能不会遵循此处的规范。如果你想向这些UA传达预期的大纲，你将不得不依赖于标题元素排名（就像HTML 4.01中的情况一样）。这就是the spec recommends to do this：

的原因

作者应使用标题排名（h1 - h6）来传达文档结构。

如果无法计算排名该怎么办？尽可能做出最佳猜测，并且对于不支持完整HTML5大纲算法的UA，请使用非理想的大纲。对于支持HTML5大纲算法的UA，它可以正常工作。

¹猜测如下：

它永远不应该是h1，因为你的片段将是一个分段元素，因此它至少在文档的第2级开始（第1级将始终是{{1的任何标题元素）最近的分段父）。
根据片段的性质，低标题将不太可能。例如，如果代码段是博客帖子的评论表单，则它应与body元素处于同一级别或下一级（如果它嵌套在article内），通常article 1}}或h2。
如果代码段代表对用户非常重要的内容，则应使用更高的标题，因为较低的标题用户依赖于大纲进行导航可能永远不会访问代码段的内容，因为它可能是“隐藏”的在深度轮廓中，用户可能不感兴趣的条目下方（因此他们可能会跳过整个部分及其所有子项）。