Site Navigation in CSS and XHTML

Coding navigation in CSS and XHTML properly is important for both search engines and accessibility. Here's my take on how to do it, although I would be very interested to hear what others think.

Not interested in the explanation? See the demo and download the source code here

Semantics anyone?

HTML doesn't currently have any semantic syntax for navigation. HTML 5 is proposing "nav" to give meaning to navigation. Currently though we don't have anything. Boo hoo. So we have to use what it out there. There are many different takes on which is the best, but this is the one I use. I've found it is lightweight, performs well for search engines but has some minor concerns over accessibility.

Using common elements

Most if not all clients have common elements to the header of websites. Specifically the logo and navigation. It seems strange that semantics do not exist in HTML for these elements. The logo is the title of the site so I give this a big fat h1 tag. I also make it a link to the homepage. For the navigation an unordered list works well. Here's the HTML I use.

<div id="header">

    <h1><a href="/" title="Return to the Home Page">Your Company Name</a></h1>

    <ul>

        <li><a href="/">Home</a></li>

        <li><a href="/about-us">About Us</a></li>

        <li><a href="/services">Services</a></li>

        <li><a href="/portfolio">Portfolio</a></li>

        <li><a href="/contact">Contact</a></li>

    </ul>

</div>

With stylesheets turned off this makes sense. Now for the CSS.

}

#header

    {

    width: 760px; 

    float: left;

    background-color: #000;

}

#header h1

    {

    float: left;

    font-size: 1em;

    text-indent:-9999px;

}

#header h1 a

    {

    width:150px; 

    height: 75px;

    background: #000 url(../images/logo.png) top left no-repeat;

    float:left;

    text-decoration:none;

}

#header ul

    {

    float: right;

    list-style: none;

}

#header li 

    {

    margin-right: 0.1875em;

    display: inline;

    float: left;

    text-align: center;

    font-size: 1.6em;

}

#header li a

    {

    display: block;

    padding: 0em 0.625em 0.3125em 0.625em;

    color: #000;

    background-color: #ccc;    

    text-decoration: none;

}

#header li a:hover

    {

    background-color: #fff;    

    color: #000;

}

I'm using image replacement to move the h1 text off the screen and replace it with an image. The unordered list is switched to display:inline to make it a vertical line.

Concerns

This technique does pretty well. The code behind is robust and should perform well in screen readers. The major concern is that with images turned off the logo disappears and no alt text is shown. Having tried a few techniques this is the lesser of many evils for me and I've used this happily for around two years.

What do you think?

I have been rethinking this recently so I'd be very interested to hear what others think. What is your preferred method for creating headers? Why?

This code is license under a Creative Corners 3.0 License so you are free to do what you wish with it. It is provided as is but has been tested in the following browsers.

Firefox 1+ Windows and Mac
Internet Explorer 5+
Opera 8.5+
Camino 1
Safari 2

See the demo or download the source code here

Juan Manuel Lemus has kindly translated this article into Spanish. Thanks Juan!

Comments

Clive Walker May 30 2007: I have never been convinced by the use of H1 for wrapping the logo element. I think it makes more sense to have H1 as the first level heading on the page itself. I’m probably wrong here but it makes more sense to me. I kinda think it gives an added weight to the page content main keywords if it is used on the page rather than for wrapping the logo. I guess I am thinking this from a search engine perspective where I feel it is a bit ‘wasted’ on the logo.
George Ornbo May 30 2007: @clive walker - I’m inclined to agree with you. I’ve found it gets good results for the client name though. There have been a couple of projects where the client name was not in the URL. The big fat H1 did the trick. Something feels wrong about using though..