HTML Lists

HTML provides multiple ways to create lists, displaying information in a clear, structured form. The three main list types are:

• Unordered List: Items are marked with bullet points (like circles or squares).
• Ordered List: Items are marked with numbers or letters.
• Description List: Used to display terms and their definitions.

1. Unordered List <ul>

Unordered lists are created with the <ul> (Unordered List) tag. Each item in the list is defined by the <li> (List Item) tag.

Browsers default to displaying a solid circle bullet before each list item.

<h2>Shopping List</h2>
<ul>
  <li>Milk</li>
  <li>Bread</li>
  <li>Eggs</li>
</ul>

You can use CSS's list-style-type property to change the bullet style, e.g., disc (default), circle, square, or none.

2. Ordered List <ol>

Ordered lists are created with the <ol> (Ordered List) tag. Each item is also defined by the <li> tag.

Browsers default to displaying incrementing numbers before each list item.

<h2>Steps</h2>
<ol>
  <li>Open the refrigerator</li>
  <li>Put in the elephant</li>
  <li>Close the refrigerator door</li>
</ol>

The <ol> tag has some useful attributes:

• type: Changes the numbering type.
  • 1 (default): Numbers (1, 2, 3)
  • A: Uppercase letters (A, B, C)
  • a: Lowercase letters (a, b, c)
  • I: Uppercase Roman numerals (I, II, III)
  • i: Lowercase Roman numerals (i, ii, iii)
• start: Specifies the starting value for numbering.

<ol type="A" start="3">
  <li>Item C</li>
  <li>Item D</li>
  <li>Item E</li>
</ol>

3. Description List <dl>

Description lists are special lists used to display a series of terms and their explanations. They consist of three tags:

• <dl> (Description List): The container for the list.
• <dt> (Description Term): Defines a term or name.
• <dd> (Description Details): Describes or explains the term.

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language, used to create the structure of web pages.</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets, used to style web pages.</dd>
  <dt>JavaScript</dt>
  <dd>A programming language used to implement interactive features on web pages.</dd>
</dl>

Browsers typically add indentation to <dd> content.

Nested Lists

Any type of list can be nested within another list to create more complex hierarchical structures.

<ul>
  <li>Coffee</li>
  <li>Tea
    <ol>
      <li>Black Tea</li>
      <li>Green Tea</li>
    </ol>
  </li>
  <li>Milk</li>
</ul>