Lists are everywhere: checklists, shopping lists, to-do lists, “Best of” and “Worst of” lists, procedure lists, and simple rankings turn up every day. Lists are pretty easy to find in web markup, too, used for all of those purposes and often for navigation. HTML supports three types of lists: ordered, unordered, and definition lists.
The principal difference between ordered and unordered lists is semantics: sometimes there’s a need to rank items by some criterion (e.g., importance, order of execution, time, order of addition, alphabetic order), and sometimes a list contains nothing more than a group of data with something in common.
At first glance, unstyled lists look like block elements (which they are) containing a series of still more block elements, each of which is offset from the apparent left margin of the list. However, current browsers apply different user agent styles to lists than their legacy counterparts, as shown in Table 7-1.
Table 7-1. User agent styles for unordered, ordered, and definition lists (ul, ol, dl)
User agent style
40px values. Their consequence is that if type is especially large and an ordered list runs long, list item markers are likely to be obscured in part ...