DEV Community


Discussion on: Stop using so many divs! An intro to semantic HTML

thedutchcoder profile image
Reinier Kaper

This is certainly a lot better than just divs and spans, however there are also some quirks with HTML5's section elements.

Section and Aside bring some nasty-ness to the outline for example.

Using more than one h1 (like in your example) is also generally discouraged for accessibility, even though the spec seems to encourage it.

I usually don't include a heading in the nav (even though the outline wants it), and only use 1 h1 element on the page at all times (literally the main heading on the page, the rest gets an h2/h3/etc where it makes hierarchical sense).

So in your example I would change the 2nd h1 to h2 and all the h2 to h3 for a somewhat nicer outline.

Other than that, I really encourage writing more semantic markup in general. There's a ton of useful tags out there that are way better than your styling hooks (div/span)!

kenbellows profile image
Ken Bellows Author

Thanks for the context! I'll readily admit that I'm no expert on the outline algorithm, but I will say that the rumors I've heard suggest that an updated outline algorithm is beginning to be implemented in a few browsers, and the updated algorithm prefers a new <h1> within each sectioning context, e.g. within each <section>, <article>, etc. But even so, it's not the predominate algorithm in the wild right now, so fair point, one <h1> per page.

How do you examine the generated outline for a page, as perceived by assistive tech? Are there good tools out there to help with this?

thedutchcoder profile image
Reinier Kaper

Hey Ken!

Yeah the spec calls for a new outline in each section, so multiple H1's are technically allowed, but assistive technologies and (as much as I hate this argument) SEO don't always line up with the spec. So for now it's safer to go the 1 H1 route.

Usually I use W3C's validator ( with the outline option checked to test for at least the basics.

Then there's some other tools (like the "Siteimprove Accessibility Checker" plugin for Chrome) that help a bunch as well (but they focus less on semantics and more on pure a11y).