This chapter is from the book
This chapter is from the book
This chapter is from the book
ul
Description
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.
Example:
<ul> <li>A bag of flour</li> <li>Carrots</li> <li>Fresh fruit</li> </ul>
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.