Context: A simple page that displays the availability of a product.
Bad code Bad code
<h2>Is the product available?</h2>
<h3 class="message is-success">
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
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. (
divdon’t fall in the phrasing content category).
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, use
font-style: italic;in CSS.
- If the
<a>element has no
hrefattribute, 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
<p>Is the product available?</p>
<p class="message is-success">
It‘s <a href="/product.html">available</a>.