Lesson 3: HTML Lists

Understanding HTML Lists

HTML provides several ways to structure lists of information. In this lesson, we will explore the different types of lists in HTML, including unordered lists, ordered lists, and definition lists.

Unordered Lists

An unordered list is a collection of items where the order does not matter. Each item in the list is marked with a bullet point by default:

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

You can also customize the bullet points with CSS by using the `list-style-type` property.

Ordered Lists

An ordered list is a collection of items where the order matters. Each item in the list is marked with a number or letter by default:

<ol>
    <li>First step</li>
    <li>Second step</li>
    <li>Third step</li>
</ol>

Just like unordered lists, you can customize the numbering style with the `list-style-type` property in CSS.

Definition Lists

A definition list is used to define terms and their descriptions. Unlike ordered and unordered lists, definition lists use a different structure with <dl>, <dt>, and <dd> tags:

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

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

The <dt> tag is used for the term, and the <dd> tag is used for its definition.

Nesting Lists

You can also nest lists inside one another to create more complex structures:

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

Practice Exercise

Now that you understand the different types of lists in HTML, try creating a webpage that uses each type of list. Experiment with nesting lists and customizing their styles using CSS.