Is it a bad practice for a11y and SEO to place h3 before h2?

AsmaaMahmoud
July 16, 2024
117 views
0 votes
2 Answers

In this section I have two titles "Why Choice Us" and "Best Choicing For Cryptocurency"

what is the correct marckup for this two?

Is it OK for a11y to place h3 and then h2 for them?

<div class="container">
    <h3>Why Choose Us</h3>
    <h2>Best Choosing For Cryptocurrency</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <div class="features">
        <div class="feature">
            <div class="feature-icon">🛡️</div>
            <div>
                <h3>World Digital Money Secure</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
            </div>
        </div>
        <div class="feature">
            <div class="feature-icon">%</div>
            <div>
                <h3>More Profits Percentage</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
            </div>
        </div>
        <div class="feature">
            <div class="feature-icon">📅</div>
            <div>
                <h3>10 Years Experience</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
            </div>
        </div>
    </div>
    <div class="placeholder"></div>
</div>

Answers

- QuentinC
- July 15, 2024 at 5:42 pm
- 0 votes
0
That’s just an invalid heading structure.

As a reminder:
- You shouldn’t skip levels, e.g. <h2> and then <h4>
- There shouldn’t be headings of lower levels if there isn’t first a heading of higher level, e.g. <h3> and then <h2> if there weren’t any <h2> before the <h3>.
The second point is exactly your case. You should use <h2> instead of <h3>.

Given that screen readers and other tools can provide a hierarchic list of headings to the user, creating an incorrect structure can create bug in such lists, preventing the user from correctly reading the page at the end.
Login or Signup to reply.

- Sean
- July 16, 2024 at 5:31 pm
- 0 votes
0
Headings imply new sections of a document outline.

Don’t use h3 + h2 in this context
```

<h3>Why Choose Us</h3>
<h2>Best Choice For Crypto</h2>
```
Using an h3 followed by an h2 implies that "Why Choose Us" is an empty child section belonging to a previous section, and is unrelated to the next section "Best Choice for Crypto". This doesn’t align with the intended document structure where those are a heading and supplemental subheading (or tagline) working together as the title of a singular section.

Without seeing the rest of your markup, it could also be invalid HTML if the heading preceding the h3 is an h1.

Also don’t use h2 + h3 in this context
```

<h2>Why Choose Us</h2>
<h3>Best Choice For Crypto</h3>
```
Even though using an h2 followed by an h3 is valid HTML, it’s also not appropriate in this case. "Best Choice For Crypto" isn’t a discrete child section of the section "Why Choose Us". Instead, those two elements work together to act as a single heading to a single section.

Instead, use an hgroup and h2
```
<hgroup>
  <h2>Why Choose Us</h2>
  <p>Best Choice For Crypto</p>
</hgroup>
```
An hgroup element—

The <hgroup> element allows the grouping of a heading with any secondary content, such as subheadings, an alternative title, or tagline. Each of these types of content represented as a <p> element within the <hgroup>.

I’d argue that, semantically, even though it is styled larger, "Best Choice for Crypto" is a tagline that supplements the true heading of that section, which is "Why Choose Us". Semantically, this best aligns with the HTML spec. It’s also less problematic than the other two options from an accessibility point of view, because it allows the document outline to match the intent of the content and design.
Login or Signup to reply.