Description

The ul 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.

Figure 1. Creating a shopping list using ul

Here, the 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).

Figure 2. Creating web site navigation using ul

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 markup below):

<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.

Figure 3. A nested unordered list

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 ul and li elements.

Compatibility

Every browser listed supports this element type.