HTML provides several ways to display lists of information:
- unordered lists: bulleted lists (like this one)
- ordered lists: numbered lists, procedures, formal outlines
- definition lists: lists of terms and definitions
Lists are different from anything we’ve covered so far, because generating a list requires at least two elements working together.
Ordered lists are contained by an
ol element. Within the
</ol> tags, each list item is defined by an
Example 2.17. Ordered Lists
<h3>My Dot-com Business Plan</h3> <ol> <li>Buy domain name</li> <li>Put up website</li> <li>???</li> <li>Profit!</li> </ol>
The default ordered list uses arabic numerals (1, 2, 3, …), but you can easily alter this behavior.
Directly within the
ol element, you can only include
li elements. However, within the
li elements you may place nearly any HTML content that you want: text, paragraphs, images, even another list.
Example 2.18. Nested Ordered List
<h3>Schedule for Monday</h3> <ol style="list-style-type: upper-roman"> <li>Suppress Gaul <ol style="list-style-type: upper-alpha"> <li>Two more legions or three?</li> <li>Where to put victory arch? Forum's looking crowded...</li> </ol> </li> <li>Have Cicero killed</li> <li>Lunch</li> <li>Head-and-hands-on-pike viewing at the Forum (casual dress ok?)</li> </ol>
Placing one list within another is a nested list. The outer list will use upper-case Roman numerals, and the inner list will start counting independently, using upper-case letters. There are a large number of available list-style-types for ordered lists. The most common and well-supported values are
lower-alpha, and the default,
decimal. If for some reason the browser doesn’t understand the value you specify, it just falls back to the default (decimal numbers).
You can use
ol for any list of items where the order is important. This includes outlines, procedures, TODO lists, lists of ranked items.
Unordered lists are similar to ordered lists, except that they do not have a particular order. Unordered lists even recycle the
li element, which makes it easy to turn an ordered list into an unordered list and vice-versa. All you need do is turn your
Example 2.19. Unordered List
<h3>My Dot-com Business Plan</h3> <ul style="list-style-type: square; color: #009900"> <li>Buy domain name</li> <li>Put up website</li> <li style="list-style-type: disc; color: #ff0000">???</li> <li>Profit!</li> </ul>
In the parent element
ul, we’ve specified that the list should be green and that the bullets should be squares. We overrode this behavior in the third bullet point, specifying a red, circular bullet. Notice how the style cascades from the parent element to the child elements — each bullet takes on the characteristics of its parent, unless we specify otherwise.
Ordered and unordered lists indent everything enclosed by the
ol block. You might be tempted to use
ul to indent any old HTML:
<ul> <p>This is an indented paragraph.</p> </ul>
Don’t do this. This is incorrect HTML, and there are better ways to achieve the same effect, as we’ll see in “Align and Indent”. While we’re on the subject,
li elements must always be enclosed by a
ol element. Don’t put
li elements directly in the
body of the document; this is also bad practice.
A definition list provides a list of terms and definitions. Definition lists require three elements to construct:
dl: Denotes the definition list itself. Within the
dlyou may only include
dt: Denotes a term within the definition list. Within the
dtyou may only include inline content, such as plain text and inline style elements.
dd: Denotes a definition for a term. Within the
ddyou may include any block or inline content: paragraphs, other lists, whatever you like.
A definition list consists of terms (
dt) immediately followed by definitions (
Example 2.20. Definition List
<h1>The Devil's Dictionary</h1> <dl> <dt>ABSURDITY, n.</dt> <dd>A statement or belief manifestly inconsistent with one's own opinion.</dd> <dt>ACADEME, n.</dt> <dd>An ancient school where morality and philosophy were taught.</dd> <dt>ACADEMY, n.</dt> <dd>[from ACADEME] A modern school where football is taught.</dd> <dt>ACCIDENT, n.</dt> <dd>An inevitable occurrence due to the action of immutable natural laws.</dd> </dl>
You may provide multiple definitions for a term, or even multiple definitions and multiple terms, although this is less common. Some people also use definition lists to mark up screenplays and other exchanges of dialogue: the speaker is a
dt and their dialogue is a
dd. If you’re writing technical manuals, you can use definition lists to document variables, interface components, and more. Definition lists are good for any “listed information that comes in pairs.”
Congratulations, you’ve finished the basic section! In the next section we learn about advanced font styling, alignment, margins, and borders. Read on for more…