Always add headings in the proper order

You should always add headings (<h1> to <h6>) to help break up your web page and give it structure. But you must always add headings in the proper order for A11Y and SEO reasons.

Sure, the SEO benefit is nice, but the accessibility issue is much more important. Well-structured headings are absolutely essential for those navigating the web with assistive technologies like screen readers.

The <h1> to <h6> elements are numbered for a reason. They’re supposed to be used in that order. Don’t just throw them in wherever you like because of their visual appearance. Don’t skip heading levels, either.

You should add one <h1> per page, then progressively go further down the chain for sub-sections (<h2>), sub-sub-sections (<h3>), and so on.

If you just want to mimic the style of a heading—without giving it any semantic importance—you should use CSS.

If you want some text to look like an <h2>, you might use the following CSS:

h2, .h2 {
  font-size: 1.5em;
  font-weight: bold;
  margin: .83em 0;
}

And the following HTML:

<h2>This is a real heading</h2>

<p class="h2">This is a paragraph that looks like a heading</p>

The elements will look the same, but only the actual <h2> element will have the semantic value of a second-level heading.

For more accessibility best practices, I highly recommend The A11Y Project and Dave Rupert’s A11Y Nutrition Cards.


If you have questions, feedback, or any other suggestions, please do email me. I'd love to hear from you!