Rethinking Header Markup

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 - October 6, 2004 i’ve add some quick navigation to the header. and changed [...]
This entry was written by M. Dave Auayan and posted on February 3, 2009 at 5:28 pm and filed under Uncategorized. Tagged . Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL.
  • Let's try some html in comments...

    H1 Heading



    Unclosed H2 Heading

    some other html goes here.



    Link to Apple.com

    Click here to see where you are!

    hehe

  • thank disqus for the completely fucked handling of markup.
  • @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.
  • 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.
  • 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#header
        %dt
            %a(href="/" title="Site Name - Home") Site Name
        %dd This is my site. There are many like it, but this one is mine.

    As someone pointed out, have you tried navigating a page that used h1 tags for the site name?
  • 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.

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

  • Oh wow. That didn't come out quite right.

  • There are <dl> purists?!


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

  • 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.
blog comments powered by Disqus
Copyright © 2004 - 2010 M. Auayan. All rights reserved.