htmlaccessibilitysemantic-markup

What is the correct way to mark up a heading and tagline in HTML?

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

What is the correct way to mark up these two lines of text from a semantics and accessibility standpoint? Is it OK to use an h3 and then h2?

enter image description here

<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>
Solution

  • Headings imply new sections of a document outline. In the design you shared, both lines of text don't function as separate headings semantically. Instead, they function as a heading and tagline (or subheading)—which needs to be marked up in a specific way in HTML.

    Don't use h3 + h2 in this context

    <!-- don't do this -->
<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

    <!-- also don't do this -->
<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

    <!-- do this -->
<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>.

    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.