Topic 1.5
Lists
In one line
HTML has three lists: <ul> when order doesn't matter, <ol> when it does (with start, reversed and type to control the numbers), and <dl> for terms and their descriptions; lists can nest inside list items.
Think of it like this
A shopping list, a recipe and a dictionary. On a shopping list the order doesn't matter: milk, eggs, bread in any order. In a recipe the order is everything: you can't bake before you mix. A dictionary pairs each word with its meaning. HTML has one list for each: <ul>, <ol> and <dl>.
Words you'll meet
New words in this topic, in plain English. Come back here whenever one feels fuzzy.
- Unordered list
<ul>: a list where order doesn't matter. Shown with bullets.- Ordered list
<ol>: a list where order matters. Shown with numbers or letters.- List item
<li>: one entry in a<ul>or<ol>.- Nested list
- A list placed inside a list item, making sub-items.
- Description list
<dl>: pairs of terms (<dt>) and their descriptions (<dd>).- Marker
- The bullet, number or letter shown in front of a list item.
- Roman numerals
- Numbers written as letters: i, ii, iii, iv… Set with
type="i"ortype="I".
Step by step
01A plain bulleted list
The ingredients can be gathered in any order, so <ul>. Each ingredient is an <li>.
<ul>
<li>2 cups flour</li>
<li>1 cup milk</li>
<li>2 eggs</li>
</ul>02A numbered list of steps
The method has to happen in order, so <ol>. You never type the numbers: the browser counts.
<ol>
<li>Mix the flour and milk.</li>
<li>Beat in the eggs.</li>
<li>Cook on a hot pan.</li>
</ol>03Nest sub-steps inside a step
Step 2 has two parts. The inner <ol> goes inside step 2's <li>, after its text, and before that </li>.
<ol>
<li>Mix the flour and milk.</li>
<li>Beat in the eggs.
<ol type="a">
<li>Crack them into a cup first.</li>
<li>Whisk for one minute.</li>
</ol>
</li>
<li>Cook on a hot pan.</li>
</ol>04Count backwards from 3
A top-3 countdown uses reversed: the browser numbers 3, 2, 1. start isn't needed because a reversed list starts from its item count.
<ol reversed>
<li>Bronze: Pune</li>
<li>Silver: Delhi</li>
<li>Gold: Chennai</li>
</ol>05Terms and meanings
A mini glossary uses <dl>. Each <dt> is followed by its <dd>.
<dl>
<dt>Whisk</dt>
<dd>To beat quickly so air gets in.</dd>
<dt>Batter</dt>
<dd>A runny mix of flour, eggs and milk.</dd>
</dl>Try it yourself
- 1
Add a step in the middle
In the first example, add a new step between
MixandBeat. Predict: do you need to change any numbers? Run it and check the console count. - 2
Countdown from 10
In the second example, make the reversed list count 10, 9, 8. Which attribute do you add? Predict, then run.
- 3
Two meanings for one word
In the glossary, give
Whiska second<dd>:A kitchen tool made of wire loops.One term with two descriptions is valid.
Code & diagrams
The method has 3 top-level steps, but 5 `li` elements in total because the sub-steps count too.
Preview
Console
Nothing logged yet.Expected console output
Top-level steps: 3
All li in the method: 5
Glossary terms: Whisk, Batter`value` resets the count, and the next item continues from it. `li.value` reads only an explicit value, so the last item reports 0.
Preview
Console
Nothing logged yet.Expected console output
start: 5 reversed: true type: A
Last item's value: 0Break it on purpose
Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.
Break #1
Put the sub-list beside the item instead of inside it
Close step 2's </li> before the inner <ol>, so the inner list sits directly inside the outer <ol>.
Break #2
Type the numbers yourself
Write <ol><li>1. Mix</li><li>2. Beat</li></ol>.
Myth vs fact
Myth
Navigation menus shouldn't be lists because they don't look like lists.
Fact
A menu is a list of links. Wrapping it in <ul> tells screen readers how many links there are; CSS removes the bullets and lays it out in a row.
Myth
<dl> is only for dictionary definitions.
Fact
It's for any group of name-value pairs: glossaries, FAQs, product specs, metadata like "Author: Asha".
Myth
The type attribute on <ol> is deprecated.
Fact
type on <ol> is valid HTML, because in some documents (legal or exam papers) the numbering style is part of the meaning, as in "see clause B". For purely decorative styles, use CSS list-style-type.
Pro corner
Extra depth for experienced readers. New to this? Skip it for now and come back later.
- ▸
Safari with VoiceOver stops announcing a
<ul>/<ol>as a list when CSS setslist-style: none, a deliberate choice by WebKit to cut "list noise". If the list semantics matter (like a product grid), addrole="list"to restore them. - ▸
List markers are generated by the
::markerpseudo-element, and numbering is done with CSS counters (list-item). You can style markers withli::marker { color: tomato; }(CSS course). - ▸
ol.startreflects the attribute; for areversedlist with nostart, the first number shown is the number of items, computed by the browser. - ▸
In a
<dl>, the only allowed wrapper around<dt>/<dd>groups is<div>. Each<dt>must be followed (eventually) by at least one<dd>.
Remember this
- 1
<ul>is an unordered list: items whose order doesn't change the meaning. Each item is an<li>(list item). Browsers show a bullet (•) in front of each. Navigation menus are usually<ul>lists of links, styled with CSS to remove the bullets. - 2
<ol>is an ordered list: steps, rankings, anything where position matters. Browsers number the items automatically, so adding or removing an item renumbers the rest. Three attributes change the numbering:start="5"begins counting at 5;reversed(a boolean attribute) counts down;typepicks the style:1(numbers, the default),aorA(letters),iorI(Roman numerals). An<li>can also set its own number withvalue="10", and the items after it continue from there. - 3
A
<ul>or<ol>may contain only<li>elements as children (plus<script>and<template>). Text, headings or other elements go inside an<li>, never directly in the list. An<li>can hold anything: text, links, images, paragraphs, even a whole other list. - 4
To nest a list, put the inner
<ul>or<ol>inside an<li>of the outer list, after that item's text. That makes a sub-list belonging to that item, like sub-steps of a step. Browsers change the bullet style at each level (disc, circle, square) to show depth. - 5
<dl>is a description list: groups of terms and descriptions. Each term is a<dt>(description term) and each description is a<dd>(description details). One term can have several descriptions and several terms can share one description. Use it for glossaries, FAQs, and key-value details like "Price: ₹500". You may wrap each<dt>/<dd>group in a<div>to style it. - 6
Why use list elements instead of lines starting with
-or1.? Screen readers announce "list, 5 items" and let users jump between items or skip the whole list. Search engines and reader modes understand the structure. And CSS can restyle lists completely (as menus, cards, grids) without changing the HTML.
Explain it without notes
When do you use <ul>, <ol> and <dl>?
How do you nest a list correctly, and what goes wrong if you don't?
What do start, reversed, type and value do?
Why should a navigation menu be a list?
Practice
Write a top-5 list of your favourite films, numbered 5 down to 1.
Write a packing list with three bullets, where the item Clothes has its own nested bullet list of Shirts and Socks.
Write a description list for a phone: Screen is 6.1 inches, Battery is 4000 mAh.
Trade-offs
- ↔
typeon<ol>keeps the numbering style when CSS is missing, but CSSlist-style-typeoffers far more styles; usetypeonly when the style is part of the meaning.
Done when you can
I can choose between
<ul>,<ol>and<dl>.I can nest a list inside a list item correctly.
I can control numbering with
start,reversed,typeandvalue.I know a list may only have
<li>children.I can write a description list with
<dt>and<dd>.