Lesson 2.3: Lists (Ordered & Unordered)

1. Introduction

Lists in HTML are used to group related items together in a structured way. They make content easier to read, organize, and navigate. There are mainly two types of lists in HTML:

• Ordered List (<ol>) – Items are numbered.

• Unordered List (<ul>) – Items are bulleted.

Additionally, there is a Description List (<dl>) which is used for key–value pairs (like glossaries or definitions).

2. Ordered List (<ol>)

An ordered list is a numbered list. Each item in the list is wrapped inside the <li> tag.

Example:

Output:

1. Boil water

2. Add tea leaves

3. Add sugar and milk

4. Stir and serve

👉 You can also change the numbering style using the type attribute.

• type="1" → Numbers (default)

• type="A" → Uppercase letters

• type="a" → Lowercase letters

• type="I" → Roman numerals (uppercase)

• type="i" → Roman numerals (lowercase)

Example:

3. Unordered List (<ul>)

An unordered list is a bulleted list.

Example:

Output:

• Bread

• Butter

• Milk

• Eggs

👉 You can also change the bullet style with the type attribute (though CSS is preferred today).

• type="disc" → ● (default)

• type="circle" → ○

• type="square" → ■

4. Nested Lists

You can create a list inside another list.

Example:

Output:

• Frontend

  • HTML

  • CSS

  • JavaScript

• Backend

  • PHP

  • Python

  • Node.js

5. Description List (<dl>)

Used for key–value pairs, like glossaries.

Example:

Output:
HTML – HyperText Markup Language, used for structuring web pages.
CSS – Cascading Style Sheets, used for styling web pages.

6. Best Practices

• Use ordered lists when sequence matters (e.g., steps in a process).

• Use unordered lists when order doesn’t matter (e.g., shopping list).

• Avoid using lists just for indentation – use CSS for layout.

• Keep list items short and consistent in format.