Question

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

但是，为了确保这些<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>

Answer 1

<details>元素是sectioning root，因此您无法添加标题。话虽如此，随意为其包含的<summary>元素添加标题，因为<summary>元素可以接受短语内容，或者一个标题元素，它将作为其封闭{{1}的标题元素。

Answer 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元素中，即，如果您想使用其他标签打开/关闭details比第一个标题更有意义（在大多数情况下，它们将是相同的。）

我应该为细节标签指定h2-h6子标题，以使细节成为一个独特的部分吗？

2 个答案:

`details`

`details`