If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

HTML provides several ways to display lists of information:

• Unordered lists: bulleted lists (like this one)
• Ordered lists: numbered lists, procedures, or outlines
• Definition lists: lists of terms and their definitions

Lists are different from other content we’ve covered because creating them requires at least two elements working together.

Ordered Lists

Ordered lists are wrapped in an ol element. Each item in the list 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>

By default, ordered lists use decimal numbers (1, 2, 3, …), but you can change the style using CSS or the type attribute. Within an ol, you can only place li elements. However, inside an li, you can include almost any HTML content: text, paragraphs, images, or 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 the victory arch? Forum is crowded.</li>
    </ol>
  </li>
  <li>Have Cicero killed</li>
  <li>Lunch</li>
  <li>Head-and-hands-on-pike viewing at the Forum</li>
</ol>

Nested lists allow you to place one list inside another. The outer list in this example uses upper-case Roman numerals, and the inner list uses upper-case letters. Common list-style-type values include decimal (default), upper-roman, lower-roman, upper-alpha, and lower-alpha. If the browser doesn’t recognize the value you specify, it defaults to decimal numbers.

Use ol whenever the order of items matters: outlines, procedures, ranked lists, and TODO lists.

Unordered Lists

Unordered lists are similar to ordered lists but have no inherent order. They also use the li element for each item, so converting an ordered list to an unordered list is simple - just change ol to ul:

<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 this example, the parent ul element sets all bullets to green squares, while the third item overrides it with a red disc. CSS cascades from parent to child elements, but you can always override styles at the child level.

Both ol and ul automatically indent their content. Avoid using lists just to indent text:

<ul>
<p>This is an indented paragraph.</p>
</ul>

This is invalid HTML. Lists should only contain li elements. Likewise, li elements must always be inside ul or ol elements, not directly in the body.

Definition Lists

Definition lists display terms and their definitions. They use three elements:

• dl: wraps the entire list. Only dt and dd are allowed inside.
• dt: marks a term. Only inline content is allowed here.
• dd: marks the definition. Can include block or inline content, including paragraphs and lists.

A definition list is structured with terms (dt) immediately followed by their definitions (dd).

<h1>The Devil's Dictionary</h1>
<dl>
  <dt>ABSURDITY, n.</dt>
  <dd>A statement or belief inconsistent with common sense.</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 unexpected occurrence resulting from natural laws.</dd;
</dl>

Definition lists can have multiple definitions per term, or even multiple terms sharing a definition. They are ideal for glossaries, documentation of variables or interface components, speaker/dialogue pairs, or any situation where information naturally comes in pairs.

Congratulations, you’ve completed the basics of HTML lists! In the next section, we’ll explore advanced font styling, alignment, margins, and borders.