HTML — Lists

Three kinds of lists

HTML provides three list elements, each for a different kind of information:

Element	Kind	Renders as
<ul>	Unordered list — order irrelevant	Bullets •
<ol>	Ordered list — sequence matters	Numbers 1. 2. 3.
<dl>	Description list — term + definition	Indented pairs

Every list is built from items (<li>) — except description lists, which pair terms and descriptions.

Unordered lists: <ul>

When the order genuinely doesn't matter — shopping, features, menu links:

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

What the browser displays

• Bread
• Milk
• Eggs

(Each item on its own line with a bullet marker.)

Swapping Milk and Bread changes nothing about meaning → that's exactly when <ul> is right.

The bullet style is presentation; CSS controls it:

ul { list-style-type: square; }   /* disc (default), circle, square, none */

list-style-type: none removes bullets entirely — the first step in building navigation menus from lists.

Ordered lists: <ol>

When sequence matters — instructions, rankings, steps:

<ol>
    <li>Preheat the oven to 180°C</li>
    <li>Mix flour and eggs</li>
    <li>Bake for 25 minutes</li>
</ol>

What the browser displays

1. Preheat the oven to 180°C
2. Mix flour and eggs
3. Bake for 25 minutes

(Numbered top to bottom — reordering the HTML renumbers automatically.)

Controlling numbering

<!-- Start at a different number -->
<ol start="5">
    <li>Fifth item</li>
    <li>Sixth item</li>
</ol>

<!-- Different marker types -->
<ol type="A">   <!-- A. B. C. -->
<ol type="a">   <!-- a. b. c. -->
<ol type="I">   <!-- I. II. III. -->
<ol type="i">   <!-- i. ii. iii. -->

<!-- Reverse countdown -->
<ol reversed>
    <li>Silver</li>    <!-- shows 2 -->
    <li>Gold</li>      <!-- shows 1 -->
</ol>

<!-- Number one specific item differently -->
<ol>
    <li value="10">Jump to ten</li>
</ol>

Nesting lists inside lists

A list item can contain an entire sub-list — place it inside an <li>:

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

What the browser displays

• Fruits
  • Apples
  • Bananas
• Vegetables
  • Carrots
  • Spinach

(Sub-items indent under their parent, usually with different bullet styles per level.)

Nesting rules that prevent broken markup:

1. A nested <ul>/<ol> must live inside an <li>, never directly inside another list
2. Close the inner list before closing its parent <li>

<!-- Wrong: stray list between items -->
<ul>
    <li>Item</li>
    <ul><li>Nested</li></ul>
</ul>

<!-- Right: nested list belongs to an item -->
<ul>
    <li>
        Item
        <ul><li>Nested</li></ul>
    </li>
</ul>

You can mix types while nesting — numbered chapters containing bulleted topics:

<ol>
    <li>Setup
        <ul>
            <li>Install editor</li>
            <li>Create folder</li>
        </ul>
    </li>
    <li>Build
        <ul><li>Write code</li></ul>
    </li>
</ol>

Description lists: <dl>

Term–description pairs — glossaries, FAQs, metadata:

<dl>
    <dt>HTML</dt>
    <dd>Markup language for structuring web pages.</dd>

    <dt>CSS</dt>
    <dd>Style sheet language for describing appearance.</dd>

    <dt>JavaScript</dt>
    <dd>Programming language of the web.</dd>
</dl>

• <dl> wraps the whole list
• <dt> = description term
• <dd> = description itself (indented by default)

One term may have several descriptions, or several terms share one — browsers handle both.

The killer feature: lists are semantic menus

Real websites build navigation from lists, because "a set of related links" is semantically a list:

<nav>
    <ul style="list-style: none;">
        <li><a href="/">Home</a></li>
        <li><a href="/about.html">About</a></li>
        <li><a href="/contact.html">Contact</a></li>
    </ul>
</nav>

Screen readers announce "list, 3 items" before reading links — orientation for free. CSS then turns this structure into horizontal menus, dropdowns, whatever the design needs. Structure from HTML, appearance from CSS: the recurring theme of professional web development.

Common mistakes checklist

1. Wrong list type — recipes need <ol>; ingredient lists need <ul>
2. Fake lists made of <p> + dashes or manual numbers — lose all semantics and auto-numbering
3. Nested lists outside <li> — invalid markup, unpredictable rendering
4. Empty <li>s used as spacing — spacing belongs to CSS
5. Forgetting list-style: none on nav menus, then wondering why bullets appear next to links

Mini Practice

Build recipe.html:

1. An <h2> recipe title and a short intro paragraph
2. Ingredients as a <ul>
3. Steps as an <ol> starting at 1, using type you haven't tried
4. One step containing a nested <ul> of tips
5. A glossary section using <dl> defining two cooking terms
6. Bonus: make your steps list reversed just to watch it count down

Next: block & inline →