Kevin Powell - Community•2mo ago

Semantic HTML Question - Does paragraph text have a parent/child relationship with headings?

I am looking for a semantically correct answer. It likely doesn't matter that much, but I've been wondering this for a while. If I have a heading structure like: H1 Body Text -H2 -Body Text --H3 --Body Text -Body Text Based on this structure, there are two body paragraphs at the end. If I wrap the H3 heading and the body text associated with the H3 in a div, would the second body text (bold and italicized) semantically be associated to the H2? Or would I need to add another H2 to refresh the content topic back. OR - Am I over thinking this lol

4 Replies

lko•2mo ago

@banjobongo With this html:

  <body>
    <h1>h1</h1>
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste minus nemo,
      reiciendis rem recusandae saepe. In distinctio deserunt dolore laboriosam.
    </p>
    <h2>h2</h2>
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste minus nemo,
      reiciendis rem recusandae saepe. In distinctio deserunt dolore laboriosam.
    </p>
    <div>
      <h3>h3</h3>
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste minus
        nemo, reiciendis rem recusandae saepe. In distinctio deserunt dolore
        laboriosam.
      </p>
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste minus
        nemo, reiciendis rem recusandae saepe. In distinctio deserunt dolore
        laboriosam.
      </p>
    </div>
  </body>

  <body>
    <h1>h1</h1>
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste minus nemo,
      reiciendis rem recusandae saepe. In distinctio deserunt dolore laboriosam.
    </p>
    <h2>h2</h2>
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste minus nemo,
      reiciendis rem recusandae saepe. In distinctio deserunt dolore laboriosam.
    </p>
    <div>
      <h3>h3</h3>
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste minus
        nemo, reiciendis rem recusandae saepe. In distinctio deserunt dolore
        laboriosam.
      </p>
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste minus
        nemo, reiciendis rem recusandae saepe. In distinctio deserunt dolore
        laboriosam.
      </p>
    </div>
  </body>

This is how the accessibility tree looks like:

lko•2mo ago

So basically after na h3, all the text after is is related to the h3 no matter how many divs you use

vinicius!•2mo ago

how can i open a a11y tree on devtools?

banjobongoOP•2mo ago

Thank you. That is exactly what I was looking for.

Gaming

Programming

Semantic HTML Question - Does paragraph text have a parent/child relationship with headings?