#19 heading in the wrong direction

submitted on May 14, 2020 by Šime

Context: A simple page that displays the availability of a product.

Bad code

<h1>Product Status</h1>
<h2>Is the product available?</h2>
<div>
  <h3>
    <div>
      <div>
        <i>
          <h3 class="message is-success">
            It‘s <a>available</a>.
          </h3>
        </i>
      </div>
    </div>
  </h3>
</div>

Issues and how to fix them

h1 – h6 elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection.¹
All div elements in this specific example are superfluous. It’s likely that they only exist because a front-end framework adds them by default. Use Fragments in React or similar techniques in other frameworks to avoid unnecessary markup.
Try to avoid excessive DOM sizes. Too many DOM nodes and nested DOM elements may harm your page performance.
A large DOM tree results in a large accessibility tree, which may have a bad impact on the performance of assistive technology.
Only phrasing content is allowed as children and descendants of h1 – h6 elements. (h3 and div don’t fall in the phrasing content category).
The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text.^Footnote2 If you just want italic text, use font-style: italic; in CSS.
If the <a> element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed. ³
If you’re adding a click event to a placeholder link, you probably don’t want to use a placeholder link, but an actual link with an href attribute or a <button>, depending on what's happening on click.

Good code

 <h1>Product Status</h1>
 <p>Is the product available?</p>
 <p class="message is-success">
   It‘s <a href="/product.html">available</a>.
 </p>

Resources

```