The 7th heading

HTML

You may think there are only 6 of them. And you are right, but there's a little trick for you, if you run out of headings.

As we all may know, we have 6 levels of native HTML header tags. <h1> <h2> <h3> <h4> <h5> and <h6>.

All you need to know about these 6:

  • You should only have one <h1> per page.
  • Make sure they are in ascending order.
  • Avoid skipping heading levels.

There is one more thing: Don't use heading level for styling

I can hardly imagine a situation where this isn't enough for me, but if we have to work with an extremely complex document, there's a solution for adding more heading levels.

<h1>Heading lvl 1</h1>
<h2>Heading lvl 2</h2>
<h3>Heading lvl 3</h3>
<h4>Heading lvl 4</h4>
<h5>Heading lvl 5</h5>
<h6>Heading lvl 6</h6>
<div role="heading" aria-level="7">
  This is the 7th heading.
</div>

As you can see in the above example I used 2 WAI-ARIA attributes: role and aria-level.

The role="heading" attribute indicates to screen readers and other assistive technologies that this element should be treated like other html heading elements.
The aria-level attribute tells the heading level.

You can use these attributes on <div> or <span> elements.

You should use native HTML tags for the first 6 levels of headings in the correct order.
If you need a 7th heading level, please consider to restructure you document.
If this isn't possible, use the mentioned attributes.

You can read more about these attributes here:

This link redirects you to my Buy me a coffee profile, where you can support me, if you want to.