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

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

✏️ Practice

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

🏁 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

• Worksheet set 1 (PDF)
• Worksheet set 2 (PDF)
• Worksheet set 3 (PDF)