HTML Lists

HTML lists allow you to organise content in a structured and easy-to-read manner. There are three main types of lists in HTML:

  • Ordered Lists (ol) – Lists where the order matters.
  • Unordered Lists (ul) – Lists where the order doesn’t matter.
  • Definition Lists (dl) – Lists of terms and their definitions.

Ordered Lists

An ordered list is used when the sequence of items is important. The list items are numbered automatically. Here’s the basic structure:

HTML
<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Attributes for Ordered Lists

  • type: Specifies the kind of marker to use (numbers, letters, or Roman numerals).
  • start: Specifies the start value of the list items.

Example

HTML
<ol type="A" start="5">
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
</ol>

Unordered Lists

An unordered list is used when the order of the items doesn’t matter. By default, the list items are marked with bullets. Here’s the basic structure:

HTML
<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

Attributes for Unordered Lists

  • type (deprecated): Specifies the type of bullet to use (disc, circle, or square). However, this is better handled with CSS.

Example

HTML
<ul style="list-style-type: square;">
  <li>Square bullet item</li>
  <li>Another square bullet item</li>
</ul>

Definition Lists

A definition list is used for terms and their descriptions. Here’s the basic structure:

HTML
<dl>
  <dt>Term 1</dt>
  <dd>Description for term 1</dd>
  <dt>Term 2</dt>
  <dd>Description for term 2</dd>
</dl>

Nesting Lists

You can nest lists within lists to create more complex structures. Here’s an example:

HTML
<ul>
  <li>Item 1
    <ul>
      <li>Subitem 1.1</li>
      <li>Subitem 1.2</li>
    </ul>
  </li>
  <li>Item 2
    <ol>
      <li>Subitem 2.1</li>
      <li>Subitem 2.2</li>
    </ol>
  </li>
</ul>

HTML lists are a powerful way to organise information in a clear and structured format. By using ordered, unordered, and definition lists, you can present content in a way that’s easy to read and understand.