Unordered lists (ul and li)

An HTML element that creates an unordered (bulleted) list. Each item inside must be wrapped in an <li> element.

Part of: HTML and CSS Journey — Module 18

What it does: Every item between <ul> and </ul> must be a <li>. Here three items each have their own <li>...</li> wrapper. Both children are <li> elements - correct. Placing <p> or raw text directly inside <ul> is invalid. <ul> creates an unordered (bulleted) list. <ol> creates an ordered (numbered) list. HTML tag names must be lowercase. <UL> and <LI> are non-standard - use <ul> and <li>. <ul> items are bullet points by default. Numbered lists use <ol>. Both <li> and </li> are required. A missing </li> closing tag is invalid HTML. Wrapping nav links in a <ul> with <li> elements is the semantic HTML pattern for navigation menus.

Common mistakes: HTML tag names must be lowercase. <UL> should be written as <ul>. The first list item is missing its closing tag. It should be <li>Apples</li> with </li> at the end.

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a journey and assign it to your class.

🖨 Print Worksheet and Answer key of Unordered lists (ul and li) (PDF)

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning

Duo

Which element creates an unordered list in HTML?

Matches

<ul> <li>Apples<li> <li>Bananas</li> </ul>

↓

The first <li> is missing its closing tag - it should be <li>Apples</li>

Applying

Meanings

Term

<ul>

Meaning

An HTML element that creates an unordered (bulleted) list. Each item inside must be wrapped in an <li> element.

Practice

<ul>

Testing

Gaps

Check Answer

Spots

1<UL>

2 <li>Apples</li>

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy

Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games

Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print

Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Teach this with your class →

Quick Questions

1. Which element creates an unordered list in HTML?

A. <ul> ✓

B. <ol>

<ul> creates an unordered (bulleted) list. <ol> creates an ordered (numbered) list.

2. What element wraps each item inside a <ul>?

A. <li> ✓

B. <item>

Each list item must be wrapped in <li>...</li>. There is no <item> element in HTML.

3. True or false: content can be placed directly inside <ul> without <li> wrappers.

A. False ✓

B. True

Direct children of <ul> must be <li> elements. Placing text or other elements directly inside <ul> is invalid.

4. True or false: <UL> and <LI> with capital letters are valid HTML.

A. False ✓

B. True

HTML tag names must be lowercase. <UL> and <LI> are non-standard - use <ul> and <li>.

5. What do unordered lists display by default?

A. Bullet points ✓

B. Numbers

<ul> items are bullet points by default. Numbered lists use <ol>.

Match the Pairs

<ul> <li>Apples</li> <li>Bananas</li> </ul> → A bulleted unordered list - <ul> is the container and each <li> is one bullet point item

<nav> <ul> <li><a href="h.html">Home</a></li> </ul> </nav> → A navigation menu using <ul> and <li> to wrap the links - the standard semantic pattern for navbars

<ul> is the list container; <li> wraps every individual list item inside it → <ul> <li>One</li> <li>Two</li> <li>Three</li> </ul>

Direct children of <ul> must be <li> elements - not <p>, <div>, or plain text → <ul> <li>Milk</li> <li>Eggs</li> </ul>

<ul> <li>Apples<li> <li>Bananas</li> </ul> → The first <li> is missing its closing tag - it should be <li>Apples</li>

<ul> <p>Apples</p> <li>Bananas</li> </ul> → Direct children of <ul> must be <li>, not <p> - replace <p>Apples</p> with <li>Apples</li>

Key Term

<ul>

An HTML element that creates an unordered (bulleted) list. Each item inside must be wrapped in an <li> element.

Fill in the Blanks

1. <ul> <li>Apples</li> <li>Bananas</li> </ul>

Hint: Type the element name that creates an unordered list

2. <ul> <li>Coffee</li> <li>Tea</li> </ul>

Hint: Type the element name used for each item in a list

3. <ul> <li>Red</li> <li>Blue</li> </ul>

Hint: Type the element name for the closing tag of a list item

4. <ul> <li>One</li> <li>Two</li> </ul>

Hint: Type the element name for the closing tag that ends the unordered list

5. <nav> <ul> <li>Home</li> </ul> </nav>

Hint: Type the element name that wraps the list of navigation links

Spot the Error

Question 1

A <UL>

B <li>Apples</li>

C <li>Bananas</li>

D </ul>

Line A — HTML tag names must be lowercase. <UL> should be written as <ul>.

Question 2

A <ul>

B <li>Apples<li>

C <li>Bananas</li>

D </ul>

Line B — The first list item is missing its closing tag. It should be <li>Apples</li> with </li> at the end.

Question 3

A <ul>

B <li>Apples</li>

C <LI>Bananas</LI>

D <li>Cherries</li>

E </ul>

Line C — HTML tag names must be lowercase. <LI> and </LI> should be written as <li> and </li>.

Question 4

A <ul>

B <li>One</li>

C <li>Two</li>

D </ul>

E <li>Three</li>

Line D — The </ul> closing tag appears before the third list item. Move </ul> to after the last <li>.

Question 5

A <nav>

B <ul>

C <li><a href="home.html">Home</a></li>

D <li><a href="about.html">About</a></li>

E <li><a href=contact.html>Contact</a></li>

F </ul>

Line E — The href value must be in double quotes: href="contact.html". href=contact.html without quotes is invalid HTML.

For Teachers

Create a free class, add this module to a journey, and track who's stuck.

Create a free teacher account →

No credit card. No setup fee. Make a class and invite students in under three minutes.

For Students

Practice this topic interactively, track progress, and unlock badges.

Start Learning Free →

Have a class code?