Context: A simple page that displays the availability of a product.
Bad code 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 Issues and how to fix them
h1 – h6elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection.1- All
divelements 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 – h6elements. (h3anddivdon’t fall in the phrasing content category). - The
ielement 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, usefont-style: italic;in CSS. - If the
<a>element has nohrefattribute, then the element represents a placeholder for where a link might otherwise have been placed. 3 - 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
hrefattribute or a<button>, depending on what's happening on click.
Good code 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>