Lists

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

Ordered lists are contained by an ol element. Within the <ol> and </ol> tags, each list item is defined by an li element:

<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.

<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 upper-roman, lower-roman, upper-alpha, 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 List

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 ols into uls:

<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 ul or 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 ul or ol element. Don’t put li elements directly in the body of the document; this is also bad practice.

Definition Lists

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 dl you may only include dt and dd elements.

• dt: Denotes a term within the definition list. Within the dt you may only include inline content, such as plain text and inline style elements.

• dd: Denotes a definition for a term. Within the dd you may include any block or inline content: paragraphs, other lists, whatever you like.

A definition list consists of terms (dt) immediately followed by definitions (dd).

<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…