Menu
In short, the HTML5 specification allows us to use multiple h1 elements. However, there is a fair amount of controversy over this feature, with 2 major claims as to why not to use it.
1. SEO: Mainly dubious claims that search bots do not support it, and unsubstantiated claims it will "confuse" them. However, let us defer such speculation to other postings.
2. User agents do not support it: Unfortunately, the reasoning behind this seems less clear than the SEO claims.
The MDN article for Sections and Outlines of an HTML5 Document features the following warning:
Important: There are currently no known implementations of the outline algorithm in graphical browsers or assistive technology user agents, although the algorithm is implemented in other software such as conformance checkers. Therefore the outline algorithm cannot be relied upon to convey document structure to users. Authors are advised to use heading rank (h1-h6) to convey document structure.
But it's not like a document which uses the new document outline structure doesn't work. To see for myself how browser react, I created some samples that make use of having multiple stand-alone articles on the same page.
HTML4:
<!DOCTYPE html>
<html>
<head>
<title>Outline HTML4</title>
</head>
<body>
<div>
<h1>Section List</h1>
<div>
<h2>Alpha</h2>
<p>Alpha is the first letter of the greek alphabet.</p>
<h3>Subheading</h3>
<p>This is just filler.</p>
</div>
<div>
<h2>Beta</h2>
<p>Beta is the second letter of the greek alphabet.</p>
<h3>Subheading</h3>
<p>This is just filler.</p>
</div>
</div>
</body>
</html>HTML5:
<!DOCTYPE html>
<html>
<head>
<title>Outline HTML5</title>
</head>
<body>
<main>
<h1>Section List</h1>
<section>
<h1>Alpha</h1>
<p>Alpha is the first letter of the greek alphabet.</p>
<h2>Subheading</h2>
<p>This is just filler.</p>
</section>
<section>
<h1>Beta</h1>
<p>Beta is the second letter of the greek alphabet.</p>
<h2>Subheading</h2>
<p>This is just filler.</p>
</section>
</main>
</body>
</html>The only potential visual issue I see would be that the browser might render all the h1 tags the same size, however the default user-agent styles of both Firefox and Chrome currently reduce the size of an h1 tag inside article, aside, nav, and section tags (seeming to indicate browsers do recognize this feature). Additionally, we don't have any problems recognizing a second h2 header means the end of the last h2 section, so I don't see any reason we would have a visual problem with multiple h1 tags.
While I can't speak for how those who depend on screen readers prefer to browse the web, Apple's VoiceOver does correctly identify each header level.
My question is, what exactly would a graphical browser or assistive technology have to do to "support" the outline that they don't do already?
858
Take as an example Jaws screenreader: http://webaim.org/resources/shortcuts/jaws#headings
It provides shortcut to go to the next heading of the same level. But with the addition of HTML5 section and article tags. It is subject to some precautions.
When you have such code:
<h1>Main title</h1>
<h2>sub part 1</h2>
<section>
<h1>first section inside sub part 1</h1>
<h2>subpart inside first section of sub part 1</h2>
</section>
<h2>sub part 2</h2>
If you are currently focusing h2 "sub part 1" and you press on the key 2 you would expect to go to "sub part 2" (ie. the next heading of the same level) but the Assistive Technology will lead you to the next h2 in the DOM reading order.
For that exact reason, you should respect the hierarchy of heading in the full document as though there were no section (even if it respects HTML5).
Now, you can perfectly imagine to have two h1 in the body but you expect to have some way to read the title of the current page without relying on the title tag which can contain some other elements like the web site name, the category/hierarchy in the web site. So you should use only one h1 element in the body element for the title of the current page.
140
The styling modification is very superficial. You can see that in the example below, the h2 subheading to the h1 "gamma" heading is rendered in a larger font than the "h1" gamma heading itself.
<!DOCTYPE html>
<html>
<head>
<title>Outline HTML5</title>
</head>
<body>
<main>
<h1>Section List</h1>
<section>
<h1>Alpha</h1>
<p>Alpha is the first letter of the greek alphabet.</p>
<h2>Subheading</h2>
<p>This is just filler.</p>
<section>
<h1>Gamma</h1>
<p>Gamma is the third letter of the greek alphabet.</p>
<h2>Subheading</h2>
<p>This is just filler.</p>
</section>
</section>
<section>
<h1>Beta</h1>
<p>Beta is the second letter of the greek alphabet.</p>
<h2>Subheading</h2>
<p>This is just filler.</p>
</section>
</main>
</body>
</html>In my opinion, browsers need to calculate the sectioning level of every element from the outline algorithm, and then expose it through a CSS pseudo-class - e.g. div:level(3) or :matches(h1, h2, h3, h4, h5, h6):level(4) or just :level(2) and also expose it as an element state through JavaScript e.g. if (document.getElementById("myElement").level == 4) { ... }
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
