How to use HTML Lists (<ul>, <ol>, <dl>)

In HTML there are 3 types of list elements:

• Unordered lists (the most common)
• Ordered lists
• Description lists

Unordered lists

Unordered lists are defined with the <ul> element and each list item inside is defined with the <li> element:

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
</ul>

Result:

• Apple
• Banana
• Orange

By default, unordered lists are styled with a circle bullet point, but this can be customized with CSS.

Ordered lists

Ordered lists are defined with the <ol> element and each list item inside is defined with the <li> element:

<ol>
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
</ol>

Result:

1. Apple
2. Banana
3. Orange

By default, ordered lists are displayed numerically, but this can be customized with CSS.

Description lists

Description lists work a lot differently than ordered and unordered lists.

Here’s how they work:

• The <dl> element defines the a description list (and is the parent element).
• The <dt> element defines terms (names) inside a description list (and is a child of the <dl> element).
• The <dd> element provides the description, definition, or value for the description list term (<dt>) that came just before it (and is also a child of the <dl> element).

Example:

<dl>
  <dt>African Elephant</dt>
  <dd>The worlds largest living land animal.</dd>
  <dt>Giraffe</dt>
  <dd>The tallest living animal on Earth.</dd>
  <dt>Blue Whale</dt>
  <dd>The largest animal ever (as we know it).</dd>
</dl>

Result:

African Elephant

The worlds largest living land animal.

Giraffe

The tallest living animal on Earth.

Blue Whale

The largest animal ever (as we know it).