Lists in HTML

  • Last updated Apr 25, 2024

A list is a way to organize and present information by grouping related items together. In HTML, lists help structure content and can be of different types, such as ordered lists (numbered), unordered lists (bulleted), and definition lists.

Ordered Lists (<ol>)

Ordered lists are suitable when you want to present information in a specific order or sequence. They use numbers to indicate the order of items. Here's an example:

<ol>
  <li>First step</li>
  <li>Second step</li>
  <li>Third step</li>
  <li>Fourth step</li>
  <li>Fifth step</li>
</ol>

The above HTML code renders the following output:

  1. First step
  2. Second step
  3. Third step
  4. Fourth step
  5. Fifth step
Unordered Lists (<ul>)

Unordered lists are ideal for presenting information without a specific order or sequence. Typically, these lists use bullet points to denote individual items. Here's an example:

<ul>
  <li>First step</li>
  <li>Second step</li>
  <li>Third step</li>
  <li>Fourth step</li>
  <li>Fifth step</li>
</ul>

The above HTML code renders the following output:

  • First step
  • Second step
  • Third step
  • Fourth step
  • Fifth step
Definition Lists (<dl>)

Definition lists are used for defining terms and providing their corresponding descriptions. This type of list consists of <dt> (term) and <dd> (description) elements. Here's an example:

<dl>
  <dt>Term 1</dt>
  <dd>Description for Term 1</dd>

  <dt>Term 2</dt>
  <dd>Description for Term 2</dd>

  <dt>Term 3</dt>
  <dd>Description for Term 3</dd>

  <dt>Term 4</dt>
  <dd>Description for Term 4</dd>
</dl>

The above HTML code renders the following output:

Term 1
Description for Term 1
Term 2
Description for Term 2
Term 3
Description for Term 3
Term 4
Description for Term 4

By leveraging unordered lists, ordered lists, and definition lists appropriately, you can create content that is not only visually appealing but also well-structured and search engine-friendly.