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!
Tags
Can you help make this article better? You can edit it here and send me a pull request.
See Also
-
10 ways to spot a good front-end coder
Front-end coding is certainly a craft and there are some amazing people doing it. When I visit a good site I often rummage around in the undergrowth to learn from the Masters. Here are ten practices I commonly see from the best coders. -
The joy and curse of WYSIWYG
Allowing sites to be updated by non-technical staff is essential. WYSIWYG editors are a must in Content Management Systems, but can cause frustration too. -
Drop Shadows with CSS
A short tutorial showing how to apply drop shadows to images on your site with CSS.