htmlsemantic-markup

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>


Solution

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