Understanding HTML Lists - Intro to HTML & CSS

What are HTML Lists?

HTML lists are used to group related items together. They help organize content and make it easier to read and understand. There are three main types of lists in HTML:

Ordered Lists (<ol>): Items are numbered.
Unordered Lists (<ul>): Items are bulleted.
Definition Lists (<dl>): Items are paired with descriptions.

Example: Ordered List

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

An ordered list is useful when the order of items matters, such as steps in a process or rankings.

Example: Unordered List

<ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Cherries</li>
</ul>

An unordered list is ideal for items that don't have a specific order, such as a shopping list or a list of features.

Example: Definition List

<dl>
    <dt>HTML</dt>
    <dd>A markup language for creating web pages.</dd>
    <dt>CSS</dt>
    <dd>A stylesheet language for styling web pages.</dd>
</dl>

A definition list is great for presenting terms and their definitions, such as glossaries or FAQs.

Practice: Try It Yourself

Project: Grocery List
Create an unordered list of items you need to buy. Add a heading and style it using CSS.
Project: Step-by-Step Guide
Build an ordered list explaining how to complete a task, such as baking a cake or setting up a computer.
Project: Glossary
Create a definition list with terms and their meanings related to a topic of your choice.

Continue Learning

Quick Check

Which list type uses numbers: <ol> or <ul>?