Lists
Today we look at lists: ul for items where order does not matter, ol for steps where sequence does, and li for each item.
- 1
What a list is
Last lesson we played a clip with
<video>. Today we group related items on the page. A shopping bag of ingredients is one kind of list. A recipe with step one, two, three is another.In HTML, each item is an
<li>. The parent decides the kind of list:<ul>for unordered bullets,<ol>for ordered numbers. - 2
The Sequence Dilemma: Why Bullets and Ordered Numbers Differ
Plain paragraphs do not say “these lines belong together as a list”. People needed a clear sign for a group of items, and a second sign for when the order of those items matters.
So HTML gives
<ul>when rank does not matter, and<ol>when sequence is the point. Both wrap<li>children. We do not nest lists inside lists today. - 3
How Browsers Calculate Counters and Bullet Markers
The browser opens
<ul>or<ol>, then draws each<li>with a bullet or a number. An<li>must sit inside a list parent, not alone in the body.In the example below, the tiffin bag is a
<ul>. The chai steps are an<ol>. Swap the chai steps and the drink changes. Swap the tiffin items and lunch is still lunch. - 4
Hands-On: Contrasting Unordered Ingredients with Ordered Steps
Read both short lists below, then look at the browser pane. One shows bullets. The other shows numbers.
- 5
The Golden Rule of Lists: Purpose Dictates Parent (ul vs ol)
Use
<ul>for ingredients, tags, or nav links. Use<ol>for recipes, rankings, or instructions. Put every item in its own<li>.
Renders bullet points. Used when order doesn't matter (grocery ingredients, feature checklists, navigation menus).
Renders sequential numbers (1, 2, 3...). Used when order is essential (cooking recipes, leaderboards, installation guides).
What you'll learn
- 1Lists group related items
- 2ul is for unordered bullets
- 3ol is for ordered steps
- 4li is one item inside the list
- 5li must live inside ul or ol
Line by line
<ul> ... </ul>An unordered list. The browser draws bullets. Use it when order does not change the meaning.
<ol> ... </ol>An ordered list. The browser draws numbers. Use it when step one must come before step two.
<li>Roti</li>One list item. Every
<li>sits inside<ul>or<ol>, never alone in the body.
Try it yourself
Write your morning routine as an <ol> with three steps. Then write three apps on your phone as a <ul>. Keep both lists flat — no list inside another list.
Hint: Each item needs its own <li> inside the parent list tag.
Common mistakes
- 1.Putting
<li>outside<ul>or<ol>. List items only live inside a list parent. - 2.Using
<ol>for a bag of links where order does not matter. Prefer<ul>there.
Interview prep (Click to reveal)
Q: When should you use <ul> versus <ol>?↓
Use <ul> when sequence is irrelevant (ingredients, navigation links, feature lists). Use <ol> when order matters structurally (algorithmic steps, numbered rankings, checkout procedures).
Q: Can an <li> tag live outside a <ul> or <ol>?↓
No. In valid HTML specifications, an <li> must always be a direct child of a list container (<ul>, <ol>, or <menu>). Placing it alone in the body is invalid HTML and breaks screen reader navigation.
Q: How do you properly nest a sub-list in HTML?↓
The nested list must sit inside an <li> element, not between two <li> tags. For example: <li>Parent item <ul><li>Child item</li></ul></li>.