Chapter 7. Working with Lists
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.
Ordered and Unordered 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.
User Agent Default Styles for Ordered and Unordered Lists
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 agents | User agent style |
---|---|
|
|
|
|
Note the 40px
values. Their consequence is that if type is especially large and an ordered list runs long, list item markers are likely to ...
Get HTML & CSS: The Good Parts now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.