HTML Lists: A Beginner's Guide

HTML lists are used to organize and present content in a structured, easy-to-read format. There are three main types of lists in HTML: unordered lists, ordered lists, and description lists. This tutorial will explain each type with examples and show you how to create them, along with a preview of the output.

What Are HTML Lists?

Lists in HTML are created using specific tags to display items in a structured way. They’re perfect for menus, steps, or grouped information. The <li> tag defines each list item, and different list tags control the formatting.

Types of HTML Lists

HTML supports three main types of lists. Let’s explore each with examples.

1. Unordered Lists (<ul>)

Unordered lists display items with bullets (e.g., circles, squares). They’re ideal for items where order doesn’t matter, like a shopping list.

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

Preview

• Apples
• Bananas
• Oranges

2. Ordered Lists (<ol>)

Ordered lists display items with numbers or letters, perfect for sequential content like steps or rankings.

<ol>
  <li>Preheat oven to 350°F</li>
  <li>Mix ingredients</li>
  <li>Bake for 20 minutes</li>
</ol>

Preview

1. Preheat oven to 350°F
2. Mix ingredients
3. Bake for 20 minutes

3. Description Lists (<dl>)

Description lists pair terms with their descriptions, useful for glossaries or metadata.

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language, the standard language for web pages.</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets, used for styling web pages.</dd>
</dl>

Preview

HTML

HyperText Markup Language, the standard language for web pages.

CSS

Cascading Style Sheets, used for styling web pages.

Nested Lists

You can nest lists inside one another for more complex structures, like subcategories or detailed steps.

<ul>
  <li>Fruits
    <ul>
      <li>Apples</li>
      <li>Bananas</li>
    </ul>
  </li>
  <li>Vegetables
    <ul>
      <li>Carrots</li>
      <li>Broccoli</li>
    </ul>
  </li>
</ul>

Preview

• Fruits
  • Apples
  • Bananas
• Vegetables
  • Carrots
  • Broccoli