The question in the title of today’s article has been bugging me for several years. Why, out of all the tags we could potentially use to style our site’s navigation, have modern designers chosen the unordered list?

At First Blush: Web-Elitism and Table Layouts All Over Again?

Coming from my background in hand-coding, when tables were still in vogue for layout building and lists were used for–well, listing things in one’s content–my confusion is warranted. I caught so much flack as a newbie designer for sticking with table format layouts, because, in the words of my critics, “tables are meant for tabular data only.”

So why use a list format for a navigation bar that is kinda sorta but not really a list?  See the following:

<ul class=”nav”><li><a href=”page1.html”>Page 1</a></li>

<li><a href=”page2.html”>Page 2</a></li>

<li><a href=”page3.html”>Page 3</a></li></ul>

Sure, a site’s navigation IS a list of links, but the unordered list used in most navigation schemes these days doesn’t end up LOOKING like a regular bulleted list. Instead, it gets twisted and reshaped with CSS magic into whatever configuration is needed, whether that’s a vertical list of links without bullets or whether it’s a long horizontal bar across the top of the page.  That magical CSS class creates all the beauty out of what otherwise looks like slightly bloated code, at least to my eye.

As I read article after article about using and styling unordered links, I kept thinking, “Isn’t that what we table-layout-makers were doing with tables back in the early 2000s? Isn’t this just another creative use of an HTML tag?” I found myself wondering if the unordered list would eventually go the way of the HTML table as a “deprecated” way of designing, and if those of us who had adopted it would be the butt of elitist jokes in 5 to 10 years. (Y’all who don’t think web-elitism exists–trust me, it does. People get snarky and condescending when they think they code better than you.)

The Answer to My Question: Yes AND No

But, as I’ve studied this problem a bit more, I’ve realized something. Yes, unordered lists seem like a little bit of excess code for what amounts to “a list that doesn’t look like a list onscreen.” But they actually solve a couple of problems, one of which reared its head in one of my recent designs.

My Old Navigation Style: “Display: Block” All the Way

I had organized my navigation into a div called “sidebar,” with the following code to handle all my navigation links:

#sidebar a {
display: block;
font-size: 20px;
font-weight: bold;
text-decoration: none;
border-bottom: 1px solid #AAAAAA;
padding: 10px 5px 10px 5px;}

#sidebar a:hover {
border-bottom: 1px solid #FFFFFF;
text-decoration: none;}

The corresponding HTML code for the navigation looked very simple, like this:

<div id=”sidebar”>

<a href=”about.php”>About</a>

<a href=”projects.php”>Projects</a>

<a href=”archives.php”>Archives</a>

</div>

The Problem: ALL the Links Were Affected

This was all well and good, until I decided to put more content in the sidebar–including some links that were part of paragraphs rather than navigation. You can probably guess what happened; I refreshed the page, and found that all my links in my sidebar were displaying proudly in block format, even if I had intended them to be contained in context with the paragraph around them.

So, what to do? I thought about creating another div to house my navigation links, styling it separately…but then, I realized I had the perfect tool for a vertical list of links already in my HTML toolbox. All I needed to do was to add unordered list code and give the unordered list a CSS ID. I dragged my feet about it a bit, but finally decided the list code was better than potentially causing layout havoc with another div thrown into the mix.

The Simple but Effective Fix

Thus, I ended up with this code instead:

#navlinks a {
font-size: 20px;
font-weight: bold;
text-decoration: none;
border-bottom: 1px solid #AAAAAA;
padding: 10px 5px 10px 5px;}

#navlinks a:hover {
border-bottom: #1px solid #FFFFFF;
text-decoration: none;}

The corresponding HTML code looked like this:

<div id=”sidebar”>

<p class=”sub”>A Headline</p>

<p>some text here with <a href=”index.html”>a link</a></p>

<ul id=”navlinks”>

<li><a href=”about.php”>About</a></li>

<li><a href=”projects.php”>Projects</a></li>

<li><a href=”archives.php”>Archives</a></li>

</ul>

</div>

Why This Change Helped

Adding the unordered list tags to my navigation helped me out in two ways:

1. Eliminated the need for “display: block;” in my CSS, because the natural behavior of lists is to display each item on a separate line;
2. Created a specific ID for just my navigation links, so that the other links in the sidebar would be unfettered by navigation styling

Having specifically targeted code like this, even if it results in typing <ul> and <li> about a thousand times more than you’d like, actually makes it easier for you to design. With your navigation self-contained in a little list “box” all its own, you can specify its styles to your heart’s content and not worry about those style choices overflowing and causing havoc in the larger divided layer.

This is a great habit to pick up–only applying CSS styling to the elements you absolutely need to style, rather than cramming all your style rules in one or two overarching divided layers. It organizes your code better, makes it easier to change small formatting issues later, AND can save you from accidentally messing up the whole page trying to affect one small section.

Summary

Putting navigation in unordered list format may seem esoteric at first, but it’s actually handy. You might not actually need a separate div to cordon off your navigation, necessarily; all you might need is <ul><li></li></ul>!