This chapter is from the book
This chapter is from the book
This chapter is from the book
ol
Description
Use an ordered list (ol) to define a list of items for which the sequence is important to the list's meaning. For example, you might want to list a ranking of your favorite songs, detail the steps in a recipe, or provide driving directions from one point to another. Each list item is represented by a li element, which can contain either block-level or inline content.
Example:
<h2>Directions to Birthday Party from Town Hall</h2> <ol> <li>Head north on Hill Street for a quarter mile.</li> <li>Bear right at the fork onto Elm Street and continue for a mile.</li> <li>Turn left onto Glass Drive; it's the last house on the left.</li> </ol>
Typically, most user agents render a number as the default marker before each list item, like so:
- Head north on Hill Street for a quarter mile.
- Bear right at the fork onto Elm Street and continue for a mile.
- Turn left onto Glass Drive; it's the last house on the left.
You can control what type of marker appears with the list-style-type CSS property (don't use the deprecated HTML type attribute). Options include letters, Roman numerals, bullets (yes, even on an ordered list, though it isn't recommended), images, no marker at all, and more. If you're curious about the options, the CSS 2.1 Specification details them at http://www.w3.org/TR/CSS21/generate.html#lists.
As with definition lists (dl) and unordered lists (ul), you may nest all types of lists inside an ordered list, and vice versa. Please see the "Nested Lists" section earlier in this chapter for more information about nesting and an example using ordered lists.
Most important, remember to use an ol only if it's appropriate to describe the semantics of your content, not just because you want numbers or another sequenced marker before your content (though the two typically go hand in hand).
Recommended Uses
Aside from some of the obvious uses I've noted, an ordered list is the proper choice for marking up both breadcrumb and pagination navigation.
Breadcrumb navigation. Breadcrumb navigation is the series of links you'll often see above the content on, say, an e-commerce site to indicate the navigation path to the page you're viewing. A breadcrumb is often displayed like this example, with the page you're on displayed but not linked:
Home > Products > Outdoors > The Garden Weasel
An ordered list makes sense for this because a breadcrumb represents a distinct sequence of links.
Pagination navigation. Pagination navigation is the horizontal list of mostly numeric links you're probably used to seeing on e-commerce and news sites, allowing you to paginate through lists of products or to additional pages within an article.
Deprecated Attributes
The following attributes are deprecated in X/HTML. Where applicable, I've described the method that has replaced the attribute and that replicates its purpose.
- compact: Obsolete in HTML5. Since this attribute is presentational in nature (and never gained wide support anyway), use the CSS margin, padding, and line-height CSS properties instead to adjust the spacing between list items and make the list more compact.
- start: Please see the "HTML5 and the ol Element" box for more information.
-
type:
Obsolete in HTML5. As noted earlier in the chapter, use the CSS list-style-type property instead of the type attribute to control each list item's marker styling. For instance, the following rule dictates that all ordered lists display an uppercase Roman numeral before each list item:
ol { list-style-type: upper-roman; }