octidextro.us

Is this marketing for G.I. Joe? or Nick Fury / S.H.E.I.L.D. ?

Should I totally steal that octopus for my logo?

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.