HTML – Lists

Lists are used to group related items together in a clear and readable way. They are one of the most commonly used HTML structures and appear everywhere on real websites, such as navigation menus, feature lists, steps, FAQs, and sidebars.

HTML provides three main types of lists:

• Unordered lists
• Ordered lists
• Definition lists

Unordered Lists (<ul>)

Unordered lists are used when the order of items does not matter.

Common real-world uses:

• Navigation menus
• Feature lists
• Shopping lists
• Bullet-point explanations

Key points:

• Created using the <ul> tag.
• Each item is wrapped inside an <li> tag.
• Browsers display bullet points by default.

Example:

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Oranges</li>
</ul>

Ordered Lists (<ol>)

Ordered lists are used when the order of items is important.

Common real-world uses:

• Step-by-step instructions
• Rankings
• Algorithms or procedures
• Exam instructions

Key points:

• Created using the <ol> tag.
• Each item uses the <li> tag.
• Browsers display numbers (1, 2, 3...) by default.
• The numbering can be changed using CSS or attributes.

Example:

<ol>
  <li>Mix flour and eggs</li>
  <li>Add sugar</li>
  <li>Bake for 20 minutes</li>
</ol>

Definition Lists (<dl>)

Definition lists are used to display terms along with their descriptions. They are commonly used for glossaries, FAQs, and documentation pages.

Key points:

• Created using the <dl> tag.
• <dt> defines the term.
• <dd> describes the term.
• One term can have multiple descriptions.

Example:

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

Nesting Lists

Lists can be nested (placed inside another list item). This is very common in multi-level menus and category structures.

Important rules:

• The nested list must be placed inside an <li>, not directly inside <ul> or <ol>.
• Nesting can be done with the same or different list types.

Example:

<ul>
  <li>Fruits
    <ul>
      <li>Apple</li>
      <li>Orange</li>
    </ul>
  </li>
  <li>Vegetables</li>
</ul>

Lists and Accessibility

• Screen readers announce lists and list items, helping users understand grouped content.
• Using lists instead of random paragraphs improves accessibility and structure.
• Navigation menus should almost always be built using <ul> and <li>.

Best Practices

• Use lists only for grouped, related content.
• Do not use lists just to create spacing or layout.
• Use CSS for styling bullets, numbers, and layout instead of old HTML tricks.

Suggested image prompt

"Illustration showing three list types: an unordered list as a shopping list, an ordered list as step-by-step instructions, and a definition list as a glossary, all labeled with <ul>, <ol>, and <dl>."

Interview-style questions from this topic

1. What is the difference between <ul>, <ol>, and <dl>?
2. When should you use an ordered list instead of an unordered list?
3. What are <dt> and <dd> used for?
4. How do you properly nest one list inside another?
5. Why are lists important for accessibility and navigation?