element, the name for which is an abbreviation of unordered list, is used
to group a collection of items together in a list, but in a way that
doesn’t suggest an order of precedence or importance. The
ul might be used for anything from a simple shopping
list to a collection of links.
Lists have become a very popular mechanism for defining a web site’s navigation. This approach constitutes an appropriate use of markup (navigation is, after all, a collection of related items), but was shunned for this purpose for many years, primarily because the default appearance of lists, which sees them rendered as a series of bulleted items, doesn’t lend itself to navigation applications. However, with the excellent support provided by current browsers for Cascading Style Sheets (CSS), it’s now possible to transform lists to take on almost any appearance.
Using lists for blocks of navigation benefits users who are navigating the Web with assistive technology (such as visually impaired users accessing the web page using a screen reader). By wrapping a site’s navigation in a list, we give users the ability to easily skip entire blocks of navigation, jumping from one navigation level to another—a clear advantage over having to move from link to link while trying to get a feel for the web page’s structure.
The shopping list example shown above renders as shown in Figure 1.
ul is used to mark up a series of
links that comprise a web site’s main navigation section:
<ul> <li><a href="/">Home</a></li> <li><a href="/about/">About Us</a></li> <li><a href="/portfolio/">Portfolio</a></li> <li><a href="/clients/">Clients</a></li> <li><a href="/contact/">Contact Us</a></li> </ul>
This code would render as shown in Figure 2 (without CSS styles applied).
The examples above show fairly simple lists, but you can also
nest one or more lists inside a parent list item, to whatever depth is
required. If we wanted to expand the About Us section in the navigation
list shown, we would start a new unordered list inside the About Us list
item. The closing
</li> for “About Us” doesn’t appear until
after the nested list is completed (as demonstrated and noted in the
<ul> <li><a href="/">Home</a></li> <li><a href="/about/">About Us</a> <!— note that this list item is not closed here —> <ul> <li><a href="/about/history/">Our history</a></li> <li><a href="/aboout/team/">The team</a></li> <li><a href="/about/vision/">Our vision</a></li> </ul> </li> <!—the parent for the nested list is actually closed here —> <li><a href="/portfolio/">Portfolio</a></li> <li><a href="/clients/">Clients</a></li> <li><a href="/contact/">Contact Us</a></li> </ul>
The result of this nesting can be seen in Figure 3.
ul can be
used to mark up a simple shopping list of everyday items, like
<ul> <li>Eggs</li> <li>Cheese</li> <li>Milk</li> <li>Papadums</li> <li>Tickle-me Elmo</li> <li>Dr Who Remote Control Dalek</li> </ul>
Use This For …
This element can be used to mark up any piece of content that might conceivably constitute a list, be that:
- the greatest hits of Kevin Federline
- the many reasons why Jar Jar Binks should never have existed
- a birthday gift wish list (that doesn’t include socks or shower gel)
- a group of links on a web page
- your top ten favorite cities in the world
Any of the above groups of information could be contained in an
unordered list. In fact, the very way that I presented these possibilities
would be marked up in HTML using
Every browser listed supports this element type.