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

问题描述 投票：0回答：2

我有几个 

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

但是，为了确保这些

<details>
确实是单独的部分，我不确定详细信息是否需要小标题。我当前的标记看起来像：

    <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>

html semantic-markup
2个回答
3
投票

<details>
元素是分区根，因此您无需有添加标题。话虽如此，请随意向其封闭的 
<summary>
元素添加标题，因为 
<summary>
元素可以接受短语内容，也可以接受一个标题元素，该标题元素将用作其封闭的 
<details>
元素的标题。

3
投票

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>

如果您使用标题，请注意，您不 have 将第一个标题放置在 

summary
元素中，即，如果您想使用不同的标签来打开/关闭 
details
，而不是有意义的标签第一个标题（但在大多数情况下它们是相同的）。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.