Same level headings but different category

Suppose there is a main heading and it has several sub headings which can be categorized by giving them separate headings but instead they are visually communicated differently than giving them separate headings.

i.e:

In such a case how should we use heading tags?

What I believe should be the right thing to do (but not sure) is to add separate section element for both categories.

like this:

Any suggestions?

Solution

Note that the section element is a sectioning content element. This means it creates an entry in the document outline. If you want to use h1-h6 according to the corresponding rank in the outline, your h2 headings should become h3 headings.

Also note that it’s recommended to explicitly use sectioning content elements where appropriate (e.g., at least wherever you use heading elements), so you might want to use section for "What we do" etc., too.

So the outline-relevant structure could look like this:

<body>
  <h1>Xyz Company</h1>

  <section>
    <h2>About us</h2>

    <section>
      <h3>What we do</h3>
    </section>

    <section>
      <h3>Where we are?</h3>
    </section>

    <section>
      <h3>Where we do?</h3>
    </section>

  </section>

  <section>
    <h2>Attributes</h2>

    <section>
      <h3>Respect</h3>
    </section>

    <section>
      <h3>Responsibility</h3>
    </section>

    <section>
      <h3>Growth</h3>
    </section>

  </section>

</body>

Each sectioning content element (and each sectioning root element, i.e., body in this case) has its own heading, and there is no heading without explicit section.

Even if you don’t want to provide "About us" and "Attributes" headings, you can still keep the two section elements. Not ideal, but better than not having these, because they make the intended document outline clear. (A compromise could be to visually hide these two headings with CSS.)