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:
