Use <h2> for blog post titles instead of <h1> for better logical structure

[mbluelander]

If <h1> is used for the main blog title (and I agree it should be), it's more structurally logical to use <h2> for blog post titles and <h3> for section headings. When you use the WAVE accessibility evaluation tool on the example blog, it gives this alert:

Alerts Skipped heading level

Headings provide document structure and facilitate keyboard navigation by users of assistive technology. These users may be confused or experience difficulty navigating when heading levels are skipped.

What To Do Restructure the document headings to ensure that heading levels are not skipped.

[HermanMartinus]

Thanks for submitting a PR, it is appreciated :)

I understand that the structure is something that WAVE validates as important, however the reason for using H1 for the heading of the blog post is for better SEO. The most important part of that page (for search engines) is not the name of the blog but instead the title of the article.

As for assistive technology, it jumps heading to heading and in this case isn't affected much by the incongruence of Title of blog to Heading of blog post, and is still perfectly useable.

One more note. I do prefer the H1 default formatting in this context without having to write custom styles to improve the layout.

[mbluelander]

Thanks for the response. My view's the exact opposite—I think accessibility for humans is more important than accessibility for search engines, and I had to customize my h1 styles because I think it's totally backwards for the title of a post to be larger than the title of the blog. But if that's the final word, I'll close this and go ahead with fixing all my <h3>s.

[HermanMartinus]

It's not a final word. Let me consider this :)

[mbluelander]

Thanks. Sorry for assuming, no one else seemed to have an opinion about it when I created the issue, so if I'm in the minority here, I understand.

[HermanMartinus]

@mbluelander so, I pulled in your changes, then did a bunch more digging on the best practises here. It turns out both you and I had part of, but not the whole picture.

The title of the blog post should be h1 for see and usability purposes, however, there should not be 2 h1 tags present on the page. All really good examples of optimised blogs do not have the name of the blog as an h1 and instead just have an a link in the header for that, then use the h1 for the blog post title.

This should work well. Thanks for brining this up. Can you run this through your accessibility tool and let me know if I've missed anything?

[HermanMartinus]

Eerp, that went and broke all the user styling using the no-class css themes :/

I've reverted and am going to give this some more thought.

[HermanMartinus]

I'm just going to dump some thoughts here:

• For both accessibility and SEO the consensus seems to be that multiple h1 tags aren't a bad thing (although they used to be)
• For SEO the consensus is that the title of the post should be an h1 tag.
• For all the people who have written styles or used classless stylesheets I can't undo the title of the blog from being an h1.

Based on that info I reckon that the best course of action is to leave it as it is, as it works both for accessibility and SEO, and I really don't want to break user styling.

Thoughts and opinions are appreciated.

[mbluelander]

No worries. I underestimate how complicated everything is beneath the surface. Thanks for taking a look at it.