Horizontal Lists
Websites often have a set of links in their footer, like this:
Top of Page | Accessibility Statement | Website Policy & Disclaimer | Search | Site Map
Logically, this is a list. But <ol> and <ul> are displayed vertically by default. With CSS, you can use the correct markup and get the presentation you want.
This article avoids float, so it’s easy to use in existing CSS layouts.
Old Method
A <div>, a <p> or both contain several <a> elements, with a vertical bar between them:
<div id="footer">
<p><a href="#top">Top of Page</a> | <a href="/about/accessibility">Accessibility Statement</a> | <a href="/about/disclaimer">Website Policy & Disclaimer</a> | <a href="/search">Search</a> | <a href="/sitemap">Site Map</a></p>
</div>Decorative Characters
If you want to change the seperator you have to change the markup.
The decorative characters only add noise. Screen readers will normally say “bar” or “dash” or “dot” for these characters. Normally, “link” will be annouced for each <a> and “item” may be announced for each <li>.
Graphics
An <img> element could be used between each link:
<div id="footer">
<p><a href="#top">Top of Page</a> <img width="11" height="3" src="/images/line.gif" alt=""> <a href="/about/accessibility">Accessibility Statement</a> <img width="11" height="3" src="/images/line.gif" alt=""> <a href="/about/disclaimer">Website Policy & Disclaimer</a> <img width="11" height="3" src="/images/line.gif" alt=""> <a href="/search">Search</a> <img width="11" height="3" src="/images/line.gif" alt=""> <a href="/sitemap">Site Map</a></p>
</div>Graphical separators are now present:
Top of Page
Accessibility Statement
It adds a lot of markup, though.
New Method
- Choose the most appropriate HTML elements.
- Apply CSS to get the right look.
The First Amendment
<ul> is an “unordered list”, perfect for grouping the links together. <li> is a “list item”, perfect for making each link a separate item.
<div id="footer">
<ul>
<li class="first"><a href="#top">Top of Page</a></li>
<li><a href="/about/accessibility">Accessibility Statement</a></li>
<li><a href="/about/disclaimer">Website Policy & Disclaimer</a></li>
<li><a href="/search">Search</a></li>
<li><a href="/sitemap">Site Map</a></li>
</ul>
</div>Some newlines help the markup stay readable.
Practical Effect of Good Markup
Assistive devices provide users with many different features, including:
- Say “item” at each
<li>. - Say the number of items at each
<ul>. - Provide shortcuts to move between lists and their items.
These features work best when good markup is used.
The Right Look
<ul> is usually displayed as a vertical list of bullet points. This CSS makes it horizontal:
/* Footer Links */
#footer ul {
margin: 0.25em 0;
padding: 0 1em;
list-style: none;
}
#footer li {
display: inline;
margin: 0;
padding: 0 0.2em 0 0.5em;
border-left: 1px solid;
}
#footer .first {
padding-left: 0;
border: 0;
}What the CSS Does
- Changes the spacing above and below the list.
- Hides the bullet points.
- Makes the list horizontal instead of vertical.
- Changes the spacing between each item.
- Places a divider line between each item.
How it Looks
Graphics
The CSS background property can place a decorative image between each item. The markup stays exactly the same. The only changes are to the CSS:
/* Footer Links */
#footer ul {
margin: 0.25em 0;
padding: 0 1em;
list-style: none;
}
#footer li {
display: inline;
margin: 0;
padding: 0 0.2em 0 0.5em;
background: url(line.gif) left center no-repeat;
}
#footer a {
margin-left: 3px; /* Width of the graphic */
}
#footer .first {
padding-left: 0;
background: none;
}
#footer .first a {
margin-left: 0;
}The padding in em lets the gaps scale with text size. The margin-left in px creates space for the graphic.
How it Looks
Analysis
Better markup makes styling with CSS more efficient, more versatile and easier to adjust.
It also helps users of assistive technologies, improving accessibility.
Recommendation
Use <ul> and <li> styled with CSS for horizontal lists. Use better images than these demos.