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>

All <ul> Attributes

The <ul> element has no required attributes. List items must be wrapped in <li> children. Most styling is done with CSS (list-style-type, margins, etc.), not HTML attributes.

<!-- Avoid obsolete type="" on ul; use CSS instead -->
<ul class="checklist">
    <li>Free shipping</li>
    <li>30-day returns</li>
    <li>24/7 support</li>
</ul>

<style>
.checklist {
    list-style-type: square;   /* disc | circle | square | none */
    padding-left: 1.5rem;
}
</style>

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>

All <ol> Attributes

The <ol> element has three list-specific attributes in HTML5 (type, start, reversed) plus all global attributes. Only <li> elements are valid direct children (aside from script-support elements).

List-specific attribute examples

<!-- Numbering style (legacy; CSS is preferred) -->
<ol type="i">
    <li>Introduction</li>
    <li>Methods</li>
</ol>

<!-- Continue numbering from a previous list -->
<ol start="3">
    <li>Third chapter</li>
    <li>Fourth chapter</li>
</ol>

<!-- Count down from 3 to 1 -->
<ol reversed start="3">
    <li>Step three</li>
    <li>Step two</li>
    <li>Step one</li>
</ol>

<!-- CSS equivalent for numbering style -->
<ol class="roman-list">...</ol>
<style>.roman-list { list-style-type: lower-roman; }</style>

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="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">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.