Lists Using the List Tags

Making Menus The Right Way

Seems like a No-Brainer doesn’t it? Except that it is, apparently, not the case. I constantly see web pages with code like this for a vertical navigation bar:

<a href="1.html">Link1</a><br /><br />
<a href="2.html">Link2</a><br /><br />
<a href="3.html">Link3</a><br /><br />

I also see a ton of this for horizonal image based navigation bars:

<p class=”something”>
<a href="1.html"><img src="1.gif" alt="1" style="width:85px;height:35px; border:none;" /></a>& nbsp; & nbsp;
<a href="2.html"><img src="2.gif" alt="2" style="width:85px;height:35px; border:none;" /></a>& nbsp; & nbsp;
<a href="3.html"><img src="3.gif" alt="3" style="width:85px;height:35px; border:none;" /></a>& nbsp; & nbsp;
</p>

Now, neither are technically wrong, but both are just plain bad form. The question I always ask myself when I see code like these examples is … “Why would you put yourself through that editing hell?” Alas, people do it all the time. There is a much more semantically appropriate way to handle your lists. Let me give some example alternatives utilizing the <ul> and <li> tags.

The Vertical

Let’s make a simple list that could be used for a vertical navigation bar. Additionally, remember that these should go in a <div> called whatever it is that you want to call your navigation area. The code is as follows:

HTML

<div id="navigation">
<ul id="vertical">
<li><a href="1.html">Link1</a></li>
<li><a href="2.html">Link2</a></li>
<li><a href="3.html">Link3</a></li>
</ul>
</div>

CSS:

#vertical
{
padding-left: 0;
margin-left: 0;
}
#vertical li
{
list-style: none;
margin: 0;
padding: 0.5em;
padding-left: 0;
}

So to compare the two ways of doing it:

Original

Link1

Link2

Link3

With Lists

They should look the same to you. However, I’m betting you are asking yourself, “Why do it that way? My original way took less code!” True enough. But, the strength is not only in the use of semantic markup, but in the fact that it inherently contains the power of the cascade. When it comes time to make style changes to the first list, the difference is obvious. The first list would require you to manually update all the styles. However, let me show you a couple of changes to the CSS and what that can do to this simple list:

Quick Changes With Lists

What did I change? Nothing complicated, only basic CSS. Here’s the new style (changes in bold):

#vertical
{
padding-left: 0;
margin-left: 0;
text-align:center;
}
#vertical li
{
list-style: none;
margin: 2px; /* was 0 */
padding: 0.5em;
padding-left: 0;
border: 1px outset #000;
background-color:#99f;
}

The Horizontal

I think the most common thing people say about this is, “Wait, the <li> is only a vertical list.” That is wholly inaccurate. It is simply a list. Whether it goes up and down or side to side, it’s just a list.

Below is the code you can use to make your horizontal list using the unordered lists tags. If you don’t recall the original code of the first type, you can scroll up and see it near the top of this post.

HTML

<div id="navigation">
<ul id="horizontal">
<li><a href="1.html"><img src="1.gif" alt="1" /></a></li>
<li><a href="2.html"><img src="2.gif" alt="2" /></a></li>
<li><a href="3.html"><img src="3.gif" alt="3" /></a></li>
</ul>
</div>

CSS:

#horizontal
{
padding-left: 0;
margin-left: 0;
}
#horizontal li
{
display: inline;
list-style-type: none;
padding-right:.5em;
}
#horizontal img {
width:85px;
height:35px;
border:none;
}

For the sake of simplicity, I’m going to show the examples using the same image, but you can change the images accordingly.

Original

With Lists

The one CSS rule that makes this list go horizontal instead of vertical is the display: inline; rule.

You could have a lot more use with this if, for instance, you planed to use one consistent background image and place text on top. Then you can simply change that background image in the style sheet.

Overall, lists are great. CSS makes them powerful and flexible. So instead of having to change all your lists by hand in each page, try pulling out all the formatting and using an actual list tag for your lists.

For more references and ideas on making better lists, try stopping over at CSS Maxdesign.

~Nicole