html
html copied to clipboard
whatwg
"Headings and outline" -- Recommended root h1 usage
Hey,
I would like to know what the recommended h1 usage should look like, according to whatwg, and if there could potentially be a comment within the specification.
I understand how the heading level is calculated; I can follow the three examples provided in h1-...-h6-elements, as well as the comments mentioned in the header element section.
The question is regarding the provided example in the last header element section:
<body>
<header>
<h1>Little Green Guys With Guns</h1>
<nav>
<ul>
<li><a href="/games">Games</a>
<li><a href="/forum">Forum</a>
<li><a href="/download">Download</a>
</ul>
</nav>
<h2>Important News</h2> <!-- this starts a second subsection -->
<!-- this is part of the subsection entitled "Important News" -->
<p>To play today's games you will need to update your client.</p>
<h2>Games</h2> <!-- this starts a third subsection -->
</header>
<p>You have three active games:</p>
<!-- this is still part of the subsection entitled "Games" -->
...
This is how I would write the outline of my page and how I would understand the specification. H1 is the root outline of my page and I feel like it should be shared across all pages of my website. But there seem to be two camps with very strong opinions on this topic. And I would like to use this thread to discuss both viewpoints and hope to get some professional input and understand both sites. For the following discussion, let's assume that we have a website that contains a blog and that we are viewing a blog post. Should the name of the site be the H1 heading, or the title of the blog post, be the H1 heading?
Some might argue that for SEO purposes, the H1 heading should be unique and informative, i.e. the title of the blog post and not the webpage, but according to an experiment by SEO Sherpa it seems to make little difference. I think this might not be conclusive, but it looks like it is not proven to be relevant for SEO optimization. Truth be told, I don't really care about the SEO arguments. I think the accessibility component is more relevant.
The main argument for and against the use of a site-wide H1 heading are both coming from an accessibility viewpoint. According to the Accessible heading structure by A11Y Project under the section "Is the logo a heading" they mention that it would be confusing for screen-reader users if all pages start with the site-wide H1 heading across all pages.
But I have a hard time following this argument. It might be annoying to navigate multiple pages from the same site and have a repeating H1 heading, but I would argue that this is nevertheless, the root element of the outline.
My argument would be that if the blog post title is the H1 element, there is no semantically correct way to include "other" sections on the page. For example, after the blog post, we might want to include other elements, like a call to action to hire the author as a consultant, prices/links for similar reading material (that don't really fit the flow of the blog post), or a collection of links in the footer like resources or an about section. With the root H1 element being connected to the blog post, there is no way to "outline" things outside of the blog post itself. Maybe my example is a bit lacking, but I hope one can follow my issue with setting the blog post title as the H1 element. I would assume that a screen-reader user might favor a repetitive H1 heading but with the benefit of being able to quickly navigate over the entire page.
I understand that this might be a highly subjective issue, but I hope that this issue might lead to a fruitful discussion that explains both pros and cons that could, potentially, be referenced somewhere.
Thanks :)
PS: I've assumed that we only allow a singular H1 heading. Although according to the spec multiple top-level headings are allowed, I blindly accepted the recommendation of MDN to only use a single H1 heading per page. Maybe I should question this assumption?
