A post about the h (h1, h2, h3, h3, h5, h6) heading tags of html and it’s uses for document headings, especially within wordpress themes. This post is completely China unrelated, but at this moment I have no other place to put it and I really want to write this down for reference. Comments are welcome.
WordPress has changed the playing field of web pages. With wordpress a dream has come true. Easy to install, full of features, SEO friendly and a meanignfull heading structure.
Wait…. have you checked the html code that your wordpress theme produces? This selfwritten wp theme does something that 99% of all currently available wp themes do. The h1-tag is used for the name of the blog, in my case that’s “Junjie’s China blog”. That makes sense to some degree if you are on the front page and look at a list of articles. It makes no sense at all if you open a certain article, like this one you are reading right now.
If you printed out this article about heading markup in html, would you say that the title is “Junjie’s China blog” or would you say, that the title is “h1 and document title issues”. I think we can all agree that the latter is correct. If this is true, then “Junjie’s China blog” should not be enclosed in h1-tags, instead the title or topic of this document should be honored with h1-tags.
But what to do with the name of the blog? Will it at least get an h2? The W3C has some answers: Using h1-h6 to identify headings. Ah well, then everything is nice, isn’t it? I don’t think so. The W3C is beating around the bush with their recommendation. h-tags are clearly meant to give documents a structure. While giving a h2 to the blog name doesn’t seem that bad, there are other parts where the recommendation fails miserably. Html headings are meant to give structure to a document in a semantic sense. Giving that h2 to “Junjie’s China blog” is acceptable, because this is not anyones take on the topic, it’s Junjie’s view on this topic. Giving h2 to the navigation however doesn’t make sense at all. h1 should be the main title of a document, while h2 shall be used for all the important main points. “Navigation” and “Archives” are not main points within most documents, in fact they are only “boilerplate” content. Therefore it would be a nightmare to the idea of a semantic web to enclose them in h2-tags. Clearly, the html standard is lacking some tags.
WAI ARIA has been recommended by some people, but I feel that is more of a workaround than a real solution. Especially because there is a lot of extra work involved when using WAI ARIA.
The reader of a website doesn’t see if a heading uses h1 or h2 or h3. All he cares is that the important things are bigger and the other stuf is smaller. Naturally heading-tags express this relation and that is fine. Search engines like google on the other hand heavily depend on these tags to structure the information on a page and if the heading structure is fine for google, then I will receive more hits from it. Furthermore, I really want to support the idea of a semantic web, because I think that’s the way the internet should be.
What can we do?
I’m currently writing my own blank-theme for wordpress and I want to get this right. There are a number of blank themes out there, all open source, but most if not all of them do not adress the heading issue properly (besides some other issues). This is one of the major reasons why I want to create my own blank-theme. I’ve been reading material concerning this issue all afternoon and so far haven’t found a nice solution. But I do want to build something, that is at least acceptable.
Here is what I want to do:
- the visual sizes of headings should lead the reader of the website
- meanignful html heading structure, meaningful in the semantic sense
There is a chance I might just end up doing it like everyone else does it, but at least I want to take a moment and think this through.
Any advice welcome. If you have stumbled onto this previously, please let me know what you have done about it.
John Chow does it pretty much the way I want it for myself. Have a look into his html code of the blog overview and then of a single post. Very nice.
However when I create a theme and pass it on to other people, they probably expect it to be the same like all the other themes. So for other people I will do the usual h1-tag for blog name style. Unless they tell me they want something better