Rethinking Header Markup

Posted on by

After a coworker asked me about the <lh> tag, I looked it up. Apparently it was, as you would have guessed, a list header element. How handy! Too bad it’s gone. It got me thinking about the prevalent use of <h1> and <ul> tags for marking up the header elements.

The Google SEO Starter Guide (.PDF) recommends using the <h1> – <h6> tags to structure your content. Typically, Front End Developers use <h1> to wrap the website’s name. That seems to be an abuse of the most important heading tag, all for the hope that Google will index your site name, especially when it is the content that should be indexed.

So how can we do better? A friend of mine mentioned the <dl> tag when I lamented the demise of the <lh> tag. Using the <dt> tag for the site name and the <dd> tags for the navigation, you cut the amount of tags, and marry the site name and navigation semantically.

Compare the following block:

<div id="header"> <h1><a href="/" title="site name - home">Site Name</a></h1> <ul id="navigation"> <li><a href="pagename" title="page name">page name</a></li> <li><a href="pagename2" title="page name 2">page name 2</a></li> </ul> </div>

to this:

<dl id="header"> <dt><a href="/" title="site name - home">Site Name</a></dt> <dd><a href="pagename" title="page name">page name</a></dd> <dd><a href="pagename2" title="page name 2">page name 2</a></dd> </dl>

Ah, the elegance!

Using this markup frees up the exalted <h1> tag for the main heading of the content, as it should be. In the context of WordPress, the <h1> would be the post title (or the page title).

Now styling this new markup is going to be the next challenge (especially considering the myriad ways the various browsers render them), but one I’m looking forward to tackling.

(Maybe) Related Posts:

  1. 127.0.0.1 i’ve add some quick navigation to the header. and changed...
  • http://jasonlemoine.com Jason

    Interesting. I’ve never used a <dl> in the manner you mention – I generally use it for lists connected to pictures. I agree that using the <h1> on the site link is a bit annoying, but I usually still do it. I wonder how SEO people would react to your suggestion, let alone the <dl> purists who already think it’s been abused.

  • http://jasonlemoine.com Jason

    Oh wow. That didn’t come out quite right.

  • M. Dave Auayan

    There are <dl> purists?!

    (I fixed that for you; I’m using markdown so that might have been the problem.)

  • http://www.thomthom.net/ Thomas Thomassen

    @Jason: dl elements are abused? I can’t say I’ve seen too many of that element around… Care to elaborate?

  • http://twoseven.co.nz Dan

    It’s not a matter of being a <dl> purist as much as it is a matter of writing semantic markup.

    What the code here is describing is not a definition list. ‘Site Name’ is not a definition title, nor are ‘page name’ and ‘page name 2′ definition descriptions for ‘Site Name’.

    We should use an <h1> for the most important heading on a page. Matt Cutts says it doesn’t really matter if we have a couple or even three

    <h1> elements on the same page (as long as the content they markup is of equal importance); Google will only penalize us if we’re obviously trying to abuse the <h1> element; i.e. not using them in an semantically correct fashion.

    The element in the document would usually contain the title of the current page, and often the site name. The first or only

    <h1> element on the page should contain the page title. If a logo is required, there’s no reason why it can’t be a CSS background image on the <h1> element.

    As far as I understand it, Google likes page headings to be unique, so putting the site name in the

    <h1> element on every page will reduce the uniqueness of the content and may do the site more harm than good.

  • M. Dave Auayan

    Semantically speaking, an <h1> for the site name has even less to do with the content than an ‘about’ link as a definition to the site name.

    You could also use:

    <dl id="header"> <dt><a href="/" title="Site Name - Home">Site Name</a></dt> <dd>This is my site. There are many like it, but this one is mine.</dd> </dl>

    As someone pointed out, have you tried navigating a page that used <h1> tags for the site name?

  • http://twoseven.co.nz Dan

    Which is why I wouldn’t put the site name in an <h1> – sorry, I didn’t explicitly state that in my previous comment.

    The page title is usually the most significant piece of information on the page, and so should go in an <h1>.

    I know this would then mean that a link to the home page on the <h1> would no longer make sense, but there’s no reason why there couldn’t be a link to the home page on the site logo (if you’re not using it as a CSS background image on your <h1>), or as an item in the navigation, etc.

    Of course, the site name needs to be somewhere, which is why I tend to put it in the <h1> element, usually following the page title.

  • http://jasonlemoine.com Jason

    @Thomas Some people would argue using the <dl> for anything other than a definition list in the strictest sense would be abusing it (e.g., using it to mark up an image gallery with captions, credit, etc). More examples can be found here: http://www.maxdesign.com.au/presentation/definition/

    Personally, I think without the flexibility some have introduced to the tag, it should just be removed from the spec. The could just be reintroduced if people miss the .

    @Dan Calling for things to be semantic is all well and good, but you have to allow for growth. If people find a better use for your product than the one you intended, you should learn to adapt to that rather than fight it. I don’t agree with all or even most uses of the <dl> element, but I’m all for experimentation so long as the page is well-structured.

  • http://jimeh.me/ Jim Myhrberg

    Let's try some html in comments…

    H1 Heading



    Unclosed H2 Heading

    <div>some other html goes here.

  • http://octidextro.us/ M. Dave Auayan

    thank disqus for the completely fucked handling of markup.