我应该为详细信息标签指定 h2-h6 子标题以使详细信息成为不同的部分吗？答案

【问题标题】：Should I specify h2-h6 sub-headings for a details tag to make the details a distinct section?我应该为详细信息标签指定 h2-h6 子标题以使详细信息成为不同的部分吗？
【发布时间】：2018-04-02 07:02:28
【问题描述】：

我有几个<details> 标签用作我的页面部分。我的理解是<summary>标签作为<details>的标题，所以我没有在<details>内部或之前添加任何<h2>标题。

但是，为了确保这些<details> 确实是单独的部分，我不确定细节是否需要小标题。我当前的标记看起来像：

<body>
<h1>Page title</h1>

<details>
  <summary>1st Section</summary> <!--should I insert an h2 tag inside the summary to make it a distinct section?-->
  <p> ........... </p>
</details>

<details>
  <summary>2nd Section</summary>
  <p> ........... </p>
</details>

</body>

【问题讨论】：

标签： html semantic-markup

【解决方案1】：

<details> 元素是一个sectioning root，因此您没有有添加标题。话虽如此，请随意在其封闭的<summary> 元素中添加标题，因为<summary> 元素可以接受短语内容，也可以接受一个标题元素作为其封闭<details> 元素的标题。

【讨论】：

谢谢。 MDN 表示切片根不包含在树/大纲中。我想要的大纲如下。是否在summary 标签中包含h2，然后将大纲设为：1. Page title 1.1 1st Section 1.2 2nd Section
@JAT86：切根不参与主大纲。如果您希望您的内容包含在主要大纲中，请使用部分，而不是详细信息。如果您需要打开/关闭控件，则需要自己实现。
似乎将<h2> 标签嵌套在<summary> 中会使<details> 成为一个部分？我在HTML 5 Outliner 上对其进行了测试，并在文档大纲中添加了<summary> 文本。
@JAT86: That’s an error 在 gsnedders 的大纲中。您可以使用Tool that displays outline of HTML5 documents 推荐的其他两个工具之一：hoyois’s outliner 或W3C HTML checker（您需要启用“大纲”复选框并查看“结构大纲”，而不是“标题级大纲”） .

【解决方案2】：

details 元素是一个分节根，因此它（或其summary 元素）不能成为文档大纲的一部分，无论它是否包含标题元素。

`details` 之外的标题

如果用户可以从中受益

获取文档包含的details 元素的概览，或
能够跳过或跳转到某些details 元素，

在details 元素（组）之前提供标题是有意义的。

这里details 没什么特别之处，如果它是一个form、几个p 元素、一个ul 等，你也会这样做。

<body>
<h1>Page title</h1>

<section>
  <h2>foo</h2>
  <details><!-- details 1 --></details>
  <details><!-- details 2 --></details>
</section>

<section>
  <h2>bar</h2>
  <details><!-- details 3 --></details>
</section>

</body>

`details` 内的标题

由于details 元素是一个分割根，它有自己的轮廓。如果details 元素中的内容将从结构中受益（概述、跳过），请在其中提供标题元素。

<details>
  <summary><h1>History</h1></summary>
  <p>…</p>

  <section>
    <h2>1800s</h2>
    <p>…</p>
  </section>

  <section>
    <h2>1900s</h2>
    <p>…</p>
  </section>

</details>

如果您使用标题，请注意您没有必须将第一个标题放在 summary 元素中，即，如果您想使用不同的标签来打开/关闭 @ 987654337@ 比第一个标题更有意义（但在大多数情况下，它们是相同的）。

【讨论】：

details 之外的标题

details 内的标题

`details` 之外的标题

`details` 内的标题