Lists are collections of organized items, primarily divided into two types: ordered and unordered.
Ordered lists feature numbered items, displaying a clear sequence, like this:

1
2
3
1. Item A
2. Item B
3. Item C

Unordered lists, on the other hand, use bullet points instead of numbers:

1
2
3
• Item A
• Item B
• Item C

<ol>

The <ol> tag creates an ordered list container. It automatically generates numbers for each list item. This tag is ideal for content where the order matters, such as rankings.

1
2
3
4
5
<ol> 
  <li>Item A</li> 
  <li>Item B</li> 
  <li>Item C</li> 
</ol>

This code will number the items A, B, and C as 1, 2, and 3 respectively.

You can nest <ol> or <ul> tags within an <ol> to create multi-level lists:

1
2
3
4
5
6
7
8
9
10
11
<ol> 
  <li>Item A</li> 
  <li>Item B 
    <ol> 
      <li>Item B1</li> 
      <li>Item B2</li> 
      <li>Item B3</li> 
    </ol> 
  </li> 
  <li>Item C</li> 
</ol>

This nested list will render as:

1
2
3
4
5
6
1. Item A
2. Item B
  1. Item B1
  2. Item B2
  3. Item B3
3.Item C

The <ol> tag has several useful attributes:

  1. reversed: Creates a reverse-order list.

    1
    2
    3
    4
    5
    <ol reversed> 
      <li>Item A</li> 
      <li>Item B</li> 
      <li>Item C</li> 
    </ol>

    This will number the items as 3, 2, 1.

  2. start: Sets the starting number for the list.

1
2
3
4
5
<ol start="5"> 
  <li>Item A</li> 
  <li>Item B</li> 
  <li>Item C</li> 
</ol>

This will number the items as 5, 6, 7.

  1. type: Specifies the numbering style. Options include:
  • a: lowercase letters
  • A: uppercase letters
  • i: lowercase Roman numerals
  • I: uppercase Roman numerals
  • 1: integers (default)
1
2
3
4
5
<ol type="a"> 
  <li>Item A</li> 
  <li>Item B</li> 
  <li>Item C</li> 
</ol>

This will label the items as a, b, c.

Note: Even when using letters, the start attribute still uses integers:

1
2
3
4
5
<ol type="a" start="3"> 
  <li>Item A</li> 
  <li>Item B</li> 
  <li>Item C</li> 
</ol>

This will start the list at ‘c’.

<ul>

The <ul> tag creates an unordered list container, using bullet points for each item. It’s best for lists where order doesn’t matter.

1
2
3
4
5
<ul> 
  <li>Item A</li> 
  <li>Item B</li> 
  <li>Item C</li> 
</ul>

This renders as a bulleted list.

Like <ol>, you can nest <ul> or <ol> tags within <ul> for multi-level lists.

<li>

The <li> tag represents list items within <ol> or <ul> containers.

In ordered lists, <li> has a value attribute to set the item’s number:

1
2
3
4
5
<ol> 
  <li>Item A</li> 
  <li value="4">Item B</li> 
  <li>Item C</li> 
</ol>

This will number the items as 1, 4, 5.

Definition Lists: <dl>, <dt>, <dd>

The <dl> tag is a block-level element used to create a description list. It consists of term-definition pairs, where <dt> defines the term (description term) and <dd> provides the definition (description detail). Description lists are commonly used for glossaries or vocabularies.

1
2
3
4
5
6
7
8
<dl> 
  <dt>CPU</dt> 
  <dd>Central Processing Unit</dd> 
  <dt>Memory</dt> 
  <dd>RAM</dd> 
  <dt>Hard Disk</dt> 
  <dd>Storage device</dd> 
</dl>

Both <dt> and <dd> are block-level elements. By default, <dd> elements are indented beneath their corresponding <dt> elements. The default rendering of the above code would look like this:

1
2
3
4
5
6
7
8
CPU
  Central Processing Unit

Memory
  RAM

Hard Disk
  Storage device

It’s perfectly valid to have multiple terms (<dt>) sharing a single definition (<dd>), or multiple definitions (<dd>) for a single term (<dt>).
For example:

1
2
3
4
5
6
7
8
9
<dl>
  <dt>A</dt>
  <dt>B</dt>
  <dd>C</dd>

  <dt>D</dt>
  <dd>E</dd>
  <dd>F</dd>
</dl>

In this structure, terms A and B share the common definition C, while term D has two definitions, E and F.