HTML Lists

Introduction to HTML Lists

HTML supports three main types of lists:

• Unordered lists (<ul>) – items with bullet points where order is not important.
• Ordered lists (<ol>) – items that are numbered or lettered, where order/sequence matters.
• Description lists (<dl>) – term/description pairs, ideal for glossaries and key–value data.

You will use lists everywhere in real projects: navigation menus, feature highlights, FAQs, steps in a process, and more. Understanding how each list type works will make your HTML more structured and easier to style with CSS.

Unordered Lists (<ul>)

Use an unordered list when the order of items doesn’t matter and you simply want to group related pieces of information. By default, browsers render unordered lists with solid bullet markers, but the appearance can be fully customized using CSS.

<ul>
    <li>Milk</li>
    <li>Bread</li>
    <li>Eggs</li>
    <li>Vegetables</li>
</ul>

Ordered Lists (<ol>)

Use an ordered list when the sequence of items is important. This is common for instructions, rankings, timelines, and any data where position has meaning. Ordered lists can be numbered with digits, letters, or even Roman numerals using the type attribute.

<ol>
    <li>Boil water</li>
    <li>Add tea leaves</li>
    <li>Steep for 3–5 minutes</li>
    <li>Pour and serve</li>
</ol>

Description Lists (<dl>)

Description lists are used for name/value pairs such as terms and definitions. They are perfect for glossaries, metadata, or any content where you have a label followed by a more detailed explanation.

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language...</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets...</dd>
</dl>

Nested Lists

You can nest lists to represent hierarchies (for example, multi-level menus, outlines, or categories and sub‑categories). Each nested list is simply another <ul> or <ol> placed inside a parent <li> element.

Using Lists for Navigation

Most navigation menus on modern websites are built using lists. A navigation list is typically wrapped in a <nav> element and styled with CSS to appear horizontally across the top of the page or vertically as a sidebar.

<nav>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>

Best Practices

• Choose <ul> vs <ol> based on whether order matters.
• Wrap each list item in its own <li> tag.
• Use lists for navigation menus and grouped information instead of multiple paragraphs with line breaks.
• Keep nested lists clear and well-indented for readability.
• Use CSS to customize list bullets and numbering instead of deprecated HTML attributes.