Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > HTML/XHTML

  • Print
  • + Share This
This chapter is from the book

This chapter is from the book



Use an unordered list (ul) to define a generic list for which the sequence of items is not important. Each list item is represented by a li element, which can contain either block-level or inline content.

The ul is on the short list of the most commonly used elements on the Web because it is semantically appropriate for a wide variety of content (see "Recommended Uses").

Let's take a look at a simple example in the form of a shopping list.


   <li>A bag of flour</li>
   <li>Fresh fruit</li>

Typically, most user agents render a bullet before each list item by default, like so:

  • A bag of flour
  • Carrots
  • Fresh fruit

However, the fact that a list may have bullets isn't important; it's whether your content calls for an unordered list semantically. CSS provides you full control over the formatting, allowing different types of bullets, images, no marker at all, and more.

Recommended Uses

Here are just a few of the many ways in which unordered lists are utilized:

Navigation. Whether it's for global navigation, a group of footer links, or anywhere in between, the ul is the de facto standard for marking up site navigation. (Please see the ol entry for a couple exceptions.)

Tabs. This form of navigation typically appears across the top of a module.

Product grids and carousels. These are typically displayed horizontally.

Article headline lists. These often appear on a home page to surface links to recent articles or on an article subpage as related links. View source on your favorite news sites, and you're likely to see groups of links to articles formatted in a ul.

Related video lists. These typically have a thumbnail image and a title and description.

Deprecated Attributes

  • compact and type: Obsolete in HTML5. These attribute are presentational in nature so were deprecated in favor of using CSS. Please see the ol entry in this chapter for more information.
  • + Share This
  • 🔖 Save To Your Account