Heading Elements, Semantics and the Spec

Andy Budd has written a bit about Heading Elements, Semantics and the Spec, noting that there are different schools of using headings.

Here’s the comment I posted:

Interesting topic, Andy, and a difficult one. I’m with the “use the highest level heading for the title of the current document” gang. It seems most logical to me. A possible exception is a site’s home page, where the site name may be relevant enough to go in a h1 element.

I also don’t think putting the site name in an h1 element is going to improve search engine rankings. Think about it: if someone searches for your site/company name, they already know about you, and the search is specific enough that they will find you anyway. You want your highest level headings to describe what your documents are about, so you can be found by those searching for what you are offering.

To make sure search engines pick up your company or site name, you can use the title element to include it on every document if you want to (along with the title of each document, of course).

Posted on February 7, 2005 in (X)HTML, Accessibility, Quicklinks, Search Engine Optimisation


  1. I did a little playing to see whether there was any practical use for actually using the <title> tag to display the title on the page.

    The CSS is simple:

    head, title { display: block; }

    But unfortunately that doesn’t work in IE. It’s easy to fix - you just add some conditional comments (inside the body tag):

    <!—[if IE]> <script type=”text/javascript”> document.write (“<div id=’title’>”+document.title+”</div>”); </script>

    <noscript> <div id=”test”>Test</div> </noscript> <![endif]—>

    and then style it the same as you do for other browsers:

    title, #title { font-family: sans-serif; font-size: 2em; color: #900; }

    But really all you’re doing is creating extra code to maintain for little added benefit (other than the knowledge that you’re using the correct tag). Also, as pointed out in the comments to Andy’s post, it is rare that the page title is only the name of the site.

  2. It’s not just search engines that benefit from a proper heading hierarchy. Browsers for the blind can make a tree of headings and links on a page for easier navigation.

  3. February 8, 2005 by Roger Johansson (Author comment)

    Matthew: Interesting experiment. I don’t really see the need for displaying the contents of the title element on the page though, since all (afaik) browsers already make it available to the user in one way or another (displaying it in the window title, first line of text, reading it out loud, etc).

    Woolly: Yes, proper heading hierarchy is good for accessibility as well. My comment was in response to other comments speculating on why some people tend to use the top level heading for the site name, mentioning SEO as a possible reason. I don’t think that would be very efficient SEO, and that’s why I posted the above comment.

  4. November 10, 2005 by Julián

    Hi Roger. I knew that if I did a search about “headings” in your site, I would find something useful.

    Maybe, your post is a little out-of-date, because I see you have made some changes in the way you use headings in your pages.

    Example: in your homepage, now, you dont have any <h1> heading. You start your headings directly in <h2>.

    I like the approach about not using for the site name, because the site name should be already in the <title> element. Bu t I also find “weird” not to have an <h1> title in the homepage.

    Some weeks ago, you took advantage of nice trick to use a <h1> title in the homepage. You were using <h1> with “display:inline”, and followed by a paragraph (also inline). That was the box you have absolute positioned over your header image. I like that trick. But now you have removed it, and I have no doubt that you have your very good reasons to do it.

    I would like to read an article written by Roger Johansson about how to take advantage of headings and how not to squander them. :D

  5. November 10, 2005 by Roger Johansson (Author comment)

    Julián: I recently removed that info paragraph to reduce clutter. The h1 header on the homepage disappeared because of that. I’m looking for a way of putting a h1 back there - the homepage should have one.

    Thanks for the article idea - I’ve scribbled it down in my notebook.

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.