Using the Right Tag for the Right Job - HTML5 Mastery: Semantics, Standards, and Styling - page 61

instead, which offers far more options and also moves this presentational change to the
CSS instead of the HTML.
The li element, when part of an unordered list, has only the global attributes but
gains one more when inside an ordered list: value . This attribute allows authors to give
a specific list item an out-of-sequence number.
With the attributes out of the way, let's move on to an example of implementing a list.
Thankfully, though the markup may not be exciting, it is at least flexible, and with CSS
you can display a list in a wide variety of ways: horizontally, vertically, expanding/col-
lapsing, and so on. For instance, take the following navigation menu:
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/archive/">Archive</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
We can turn this into a horizontal menu very easily using the following CSS rule:
li {
float: left;
}
Simple! But it's clearly quite ugly and a bit unusable at this stage, so let's tidy things
up a little:
li {
border: 1px solid; float: left; list-style-type:
none; padding: 0.2em 1em;
}
By adding a border, removing the list bullet, and adding a touch of padding, we get
the list shown in Figure 2-3 .
Figure 2-3. An unordered list with the list items floated left, bordered, and padded
As you can see, we already have a very serviceable horizontal menu. We could jazz
this up even more with some styling of the anchor tags, giving them a background-
color , using display:block to allow them to fill the whole list item area, chan-
ging their background with the pseudoclass :hover , and so on.