Ordered & Unordered Lists (<ul>, <ol>, <li>)

In Plain English

Lists organize items logically. Use <ul> (unordered list) for bullet points where sequence doesn't matter, and <ol> (ordered list) for numbered steps. Every item inside must be wrapped in an <li> (list item) tag.

The Mental Model

"<ul> is your grocery shopping list (buy apples, milk, bread in any order). <ol> is an IKEA furniture instruction manual (Step 1: attach leg, Step 2: tighten screw—mess up the order and your table collapses!)."

Deep Dive: How It Works

<ul>: Creates bulleted points (disc, circle, square).

<ol>: Creates numbered lists (1, 2, 3 or A, B, C or Roman numerals).

<li>: "List Item". Sits strictly inside <ul> or <ol>. Never place text directly inside <ul> without an <li> wrapper!

Nesting Lists: You can put a <ul> inside an <li> to create sub-bullet lists.

Syntax Blueprint

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Parent list container wrapping individual <li> items.

Core Rules to Remember

ul = Bullets: Use when the order of items has no mathematical significance.

ol = Numbers: Use for chronological recipes, rankings, and sequential instructions.

Navbar Backbone: Modern website navbars are built by styling <ul> and <li> tags with CSS flexbox.

Common Beginner Traps & How to Fix Them

Mistake:Placing raw text directly inside <ul>

Why it happens: Writing <ul>Hello<li>Item</li></ul> breaks valid HTML specifications.

How to fix: All direct children of <ul> and <ol> must be <li> tags.

Pro Tip: You can reverse an ordered list simply by adding the boolean attribute: <ol reversed>.

Live Interactive Example

Hit Run Code to see it live

Bulleted vs Numbered Lists

HTML5

Live Browser Preview

Click "Preview / Apply" to view the rendered output.

How it works: <ul> produces bullet points while <ol> produces automated numerical indexing.

Your Turn: Micro Challenge

No pressure! Edit the starter code below and test your solution with instant feedback.

Micro Exercise

Build an unordered list of languages

Create a <ul> container with two <li> items: "HTML" and "Python"

Browser Preview & Output

Click "Check HTML" to test your solution.

Finished reading and practicing?

Mark this lesson as completed to update your course progress.

Deep Dive: How It Works

<ul>: Creates bulleted points (disc, circle, square).

<ol>: Creates numbered lists (1, 2, 3 or A, B, C or Roman numerals).

<li>: "List Item". Sits strictly inside <ul> or <ol>. Never place text directly inside <ul> without an <li> wrapper!

Nesting Lists: You can put a <ul> inside an <li> to create sub-bullet lists.