The web is full of comments that attack some deeply held web development beliefs. Something like 'you should use multiple H1s on a page, it's no longer 2001'. Maybe you are a bit old-fashioned and, like me, still clutching the principle of Only One H1 Per Page pretty tightly in your internal style dictionary. So you decided to look it up.
But it turns out, this question goes pretty deep.
TL;DR: multiple <h1>s are technically on specification, but the document outline algorithm is dead so either create one <h1> or split the page into 2 or more pages.
Conflicting Results
Like any front-end developer, you looked up the heading elements documentation on MDN and finds this very helpful usage note:
Using more than one
<h1>is allowed by the HTML specification, but is not considered a best practice. Using only one<h1>is beneficial for screenreader users.
Sounds like a pretty open and shut case, but what does it mean by 'allowed by the specification'?
WHATWG
Going through the HTML specification, it's pretty clear that using multiple <h1>s are allowed as long as they are contained in their own sectioning elements, such as <article> and <section>. There's even a whole section on the sections spec strongly encouraging authors to use <h1>s. This is allowed by the HTML Spec because the document outline algorithm will pick up the section tags and create the necessary document outline for screen readers. I.e. a <h1> inside a root level <section> will correctly output as a level 2 heading.
But now you remember reading something on the MDN site about outlines and not being implemented.
HTML specification includes the concept of an outline formed by the use of
<section>elements... This functionality has never been implemented; therefore it is important to use your headings to describe the outline of your document.
So you read the attached blog posts and found out that no browser has yet implemented this outline algorithm, which means your multiple <h1> are treated like top-level landmarks by all screen readers. This is a nightmare to navigate for users using accessible technologies.
Ok, fine, maybe the document outline algorithm isn't yet supported by anyone. But there's no reason why you can't use it for now because it is 'technically in the spec' right? After all, technically correct is the best form of correctness.
So you dig around a little more and found this pull request in the WATWG repo. Looks like the related <hgroup> tag is also being dropped from the spec, which also include the pull quote 'achieve our collective long-sought goal of dropping the current still-unimplemented-after-15-years HTML outline algorithm`.
A little more digging indicates that new heading proposals are being worked on, but these are probably a few years out from actually being implemented, so you should not rely on them anytime soon.
ARIA
Ok, you discovered that the document outline algorithm is dead before arrival on any browsers, and you should not use <h1> inside a <section> element. But you hear yourself asking 'what about actually having multiple top-level heading items on the page?' Remember what MDN said about multiple H1s and screen readers, maybe it's an accessibility violation?
You happen to have a WAVE accessibility plugin installed, so you mock up a page with two <h1>s and ran a validation, it does not show up as an error or an alert. Undeterred, you look up ARI-ARIA 1.1 specification, and it doesn't mention anything about limiting aria-level=1 elements to just one per page. You also tested the page with Safari and Voiceover on your laptop, and the screen reader manages to correctly read out the two top-level heading elements.
Unsatisfied, you look up various additional accessibility resources, and the closest thing you find is from WebAIM:
The
<h1>describes the page as a whole (and should be similar to the page<title>). A page should typically have only one<h1>.
This, once again, makes sense for most pages, but what if you really wish to have two equally important top-level headings instead of repeating the page title in a <h1>?
<head>
<title>Best of Times and Worst of Times</title>
<body>
<!--Omittied the <h1>Best of Times and Worst of Times</h1> -->
<h1>Best of Times</h1>
<h1>Worst of Times</h1>
</body>
While your gut may say it is a peccadillo at worst if the number of <h1> is limited to 2 per page, it's more likely a sign that you are trying too hard to fit multiple ideas onto the same page.
So next time you find yourself reaching for that second <h1>, either combine the two into a single <h1> that captures both ideas or split your page into two separate ones.
If you liked this article, you also be interested in measuring web performance with Navigation Timing API.