CODEWITHSUNDEEP
htmlsemantic-markup
JAT86
JAT86

Reputation: 1075

Should I specify h2-h6 sub-headings for a details tag to make the details a distinct section?

I have several <details> tags that serve as the sections of my page. My understanding is that the <summary> tag serves as the heading for <details>, so I did not add any <h2> headings within or before the <details>.

However, to ensure that these <details> are indeed separate sections, I am not sure if the details requires sub-headings. My current markup looks something like:

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

Upvotes: 5

Views: 1777

Answers (2)

unor
unor

Reputation: 96567

The details element is a sectioning root, so it (or its summary element) can’t become part of the document outline, whether it includes heading elements or not.

Headings outside of details

If users could benefit from

  • getting an overview which details elements the document contains, or
  • being able to skip over, or to, certain details elements,

it can make sense to provide headings before (groups of) details elements.

Nothing special about details here, you would do the same if it were a form, a few p elements, a ul, etc.

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

Headings within details

As the details elements is a sectioning root, it gets its own outline. If the content within the details element would benefit from the structure (overview, skip), provide heading elements within.

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

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

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

</details>

If you use headings, note that you don’t have to place the first heading in the summary element, i.e., if you want to use a different label to open/close the details than what makes sense for the first heading (in most cases they would be the same, though).

Upvotes: 3

BoltClock
BoltClock

Reputation: 723518

The <details> element is a sectioning root, so you don't have to add a heading. Having said that, feel free to add a heading to its enclosed <summary> element, as the <summary> element can accept either phrasing content, or one heading element which will serve as the heading for its enclosing <details> element.

Upvotes: 3

Related Questions