HTML and CSS · lesson 5 of 30 · free

Lists: ul, ol and li — HTML and CSS for kids

HTML has two main kinds of list. An unordered list (ul) shows bullet points, good for a shopping list where order does not matter. An ordered list (ol) shows numbers 1, 2, 3, good for the steps of a recipe. Every item in either list is wrapped in an li tag. An ordered list can even start at another number with the start attribute.

▶ Watch how it works

Got it? Practise ↓

Code tip

Bullets or numbers? — “ul for any order, ol when the order matters”

  1. <ul> = bullets (any order); <ol> = numbers (in order); each item is <li> … </li>.
  2. Count the <li> tags to know how many items show.
  3. <ol start="3"> starts counting at 3: item 1 shows 3, item 2 shows 4 …

Use it for: Menus, top-10 lists, recipe steps and to-do lists on a web page.

Worked example: 📋 What number does the browser show next to “Jamun”?
<ol start="3">
  <li>Litchi</li>
  <li>Papaya</li>
  <li>Jamun</li>
</ol> → 5

  1. The list starts at 3, and Jamun is the 3rd item.
  2. 3, 4, 5 — so Jamun shows 5.

Check: Litchi 3, Papaya 4, Jamun 5 ✓

▶ Watch it animated

✏️ Practice

Work it out in your head or on paper, type the answer and press Check. Stuck? Press “Show me how”.

Right: 0 · Tried: 0

🏁 Lesson 5 test

20 questions. Check each answer, then go to the next one. Get 16 or more right to pass.

🏅 Sign in with Google to earn the 📋 List Maker Pro badge when you pass — and a certificate when you finish all 10 lessons of Part 1 · HTML Basics. You can still take the test without signing in.

🖨️ HTML Worksheet: Lists ul ol li

✨ Free AI tutor

Ask the AI tutor about this lesson

Why does it work? When should you use it? Ask in English, मराठी or हिंदी.

Sign in with Google to ask Free — 20 questions a day.

👩‍🏫 HTML and CSS classes near you — online or at home

Prefer a real teacher? TalentJR teachers take live online classes anywhere in India and visit homes in selected cities. Tell us what you need and our team will call you with timings and fees.

Live online classesSmall groups or 1:1 with a teacher, from home, any city.
Teacher at homeA TalentJR teacher visits your home (selected cities).
At a centreClasses at a TalentJR partner centre near you, where available.
Badges, certificates & gifts A badge for every lesson you pass, a certificate for every part you finish, plus TalentJR Points for daily practice. Computer worksheets Flowcharts, block coding, spreadsheets and safe internet.