Unordered lists (ul and li)

Tip: Choose Save as PDF in the print dialog to download. Use A4 paper size.

Unordered lists (ul and li)

Name:
Date:
Class:
A

Quick Questions

Shade in the A or B circle for each question.

1. Which element creates an unordered list in HTML?
A <ul>
B <ol>
2. What element wraps each item inside a <ul>?
A <item>
B <li>
3. True or false: content can be placed directly inside <ul> without <li> wrappers.
A False
B True
4. True or false: <UL> and <LI> with capital letters are valid HTML.
A True
B False
5. What do unordered lists display by default?
A Bullet points
B Numbers
B

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

Left columnRight column
1<ul> <li>Apples</li> <li>Bananas</li> </ul> AThe first <li> is missing its closing tag - it should be <li>Apples</li>
2<nav> <ul> <li><a href="h.html">Home</a></li> </ul> </nav> BA navigation menu using <ul> and <li> to wrap the links - the standard semantic pattern for navbars
3<ul> is the list container; <li> wraps every individual list item inside it CA bulleted unordered list - <ul> is the container and each <li> is one bullet point item
4Direct children of <ul> must be <li> elements - not <p>, <div>, or plain text DDirect children of <ul> must be <li>, not <p> - replace <p>Apples</p> with <li>Apples</li>
5<ul> <li>Apples<li> <li>Bananas</li> </ul> E<ul> <li>Milk</li> <li>Eggs</li> </ul>
6<ul> <p>Apples</p> <li>Bananas</li> </ul> F<ul> <li>One</li> <li>Two</li> <li>Three</li> </ul>
C

Definitions

<ul>
D

Fill in the Blanks

Complete each line of code by filling in the missing parts.

1.
<___> <li>Apples</li> <li>Bananas</li> </ul>
2.
<ul> <___>Coffee</li> <li>Tea</li> </ul>
3.
<ul> <li>Red</___> <li>Blue</li> </ul>
4.
<ul> <li>One</li> <li>Two</li> </___>
5.
<nav> <___> <li>Home</li> </ul> </nav>
E

Spot the Error

Shade in the letter of the line that contains an error.

Question 1
A <UL>
B <li>Apples</li>
C <li>Bananas</li>
D </ul>
Question 2
A <ul>
B <li>Apples<li>
C <li>Bananas</li>
D </ul>
Question 3
A <ul>
B <li>Apples</li>
C <LI>Bananas</LI>
D <li>Cherries</li>
E </ul>
Question 4
A <ul>
B <li>One</li>
C <li>Two</li>
D </ul>
E <li>Three</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>

Answer Key

Unordered lists (ul and li)
Section A: Quick Questions
Q1
A — <ul>
Q2
B — <li>
Q3
A — False
Q4
B — False
Q5
A — Bullet points
Section B: Match the Pairs
Q1
<ul> <li>Apples</li> <li>Bananas</li> </ul> → A bulleted unordered list - <ul> is the container and each <li> is one bullet point item
Q2
<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
Q3
<ul> is the list container; <li> wraps every individual list item inside it → <ul> <li>One</li> <li>Two</li> <li>Three</li> </ul>
Q4
Direct children of <ul> must be <li> elements - not <p>, <div>, or plain text → <ul> <li>Milk</li> <li>Eggs</li> </ul>
Q5
<ul> <li>Apples<li> <li>Bananas</li> </ul> → The first <li> is missing its closing tag - it should be <li>Apples</li>
Q6
<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>
Section C: Definitions
Q1
<ul> — An HTML element that creates an unordered (bulleted) list. Each item inside must be wrapped in an <li> element.
Section D: Fill in the Blanks
Q1
<ul> <li>Apples</li> <li>Bananas</li> </ul>
Q2
<ul> <li>Coffee</li> <li>Tea</li> </ul>
Q3
<ul> <li>Red</li> <li>Blue</li> </ul>
Q4
<ul> <li>One</li> <li>Two</li> </ul>
Q5
<nav> <ul> <li>Home</li> </ul> </nav>
Section E: Spot the Error
Q1
A — HTML tag names must be lowercase. <UL> should be written as <ul>.
Q2
B — The first list item is missing its closing tag. It should be <li>Apples</li> with </li> at the end.
Q3
C — HTML tag names must be lowercase. <LI> and </LI> should be written as <li> and </li>.
Q4
D — The </ul> closing tag appears before the third list item. Move </ul> to after the last <li>.
Q5
E — The href value must be in double quotes: href="contact.html". href=contact.html without quotes is invalid HTML.