Same level headings but different category

Question

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?

score 1 · Answer 1 · edited Aug 23 '17 at 12:51

From a pure technical SEO standpoint, it would be better if both sections had their own heading, and the contents of those sections had their subheadings, so you would be looking for something like this:

<main>
    <h1>Your Company Name</h1>
    <section>
            <header>
                    <h2>About Us</h2>
                    <h3><a href="#what_we_do">What we do</a></h3>
                    <h3><a href="#where_we_are">Where we are</a></h3>
                    <h3><a href="#where_we_do">Where we do</a></h3>
            </header>
            <section id="what_we_do"><p>Lorem Ipsum Dolor Sit Amet...</section>
            <section id="where_we_are"><p>Lorem Ipsum Dolor Sit Amet...</section>
            <section id="where_we_do"><p>Lorem Ipsum Dolor Sit Amet...</section>
    </section>
    <section>
            <header>
                    <h2>About Us</h2>
                    <h3><a href="#what_we_do">What we do</a></h3>
                    <h3><a href="#where_we_are">Where we are</a></h3>
                    <h3><a href="#where_we_do">Where we do</a></h3>
            </header>
            <section id="what_we_do"><p>Lorem Ipsum Dolor Sit Amet...</section>
            <section id="where_we_are"><p>Lorem Ipsum Dolor Sit Amet...</section>
            <section id="where_we_do"><p>Lorem Ipsum Dolor Sit Amet Dolor...</section>
    </section>
</main>

Usually what I like to do is look at the page without any CSS/JavaScript and see how it looks. If you have the same flow, and things appear like they should by default, you are on the right track. Search engines are smart enough to understand what you mean, even if you use div for everything, but having it semantically correct may increase their likeness towards your clean and organized code.

Adding sections for both could be helpful, but what is much more helpful is that this page talks about a specific topic, other than multiple. So I would recommend that instead, you make one page for each About Us and Attributes. If it seems overkill, you can go with just one page; That would be correct, but not optimal in search engines eyes -- They really like that you have one page for each topic and that they-re unique within the domain.

Advice from a very senior perspective -- I suppose we should be welcoming you to the community, Pedro. Have fun! — Paula Hasstenteufel, Aug 23 '17 at 12:53
Welcome Pedro to community, Indeed your approach is the ideal scenario & it feels like I was trying to ditch a heading level :) — Imran Bughio, Aug 23 '17 at 15:27

score 1 · Accepted Answer · answered Aug 25 '17 at 22:06

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

Same level headings but different category

2 Answers2