Unordered lists in HTML - Cheat Sheet & Quick Revision

Recall & Review

beginner

What HTML tag is used to create an unordered list?

The <ul> tag is used to create an unordered list in HTML.

beginner

How do you add items inside an unordered list?

Use the <li> tag inside the <ul> tag to add each list item.

beginner

What is the default bullet style for unordered lists in most browsers?

The default bullet style is a solid black circle (disc) for unordered lists.

intermediate

Can unordered lists be nested inside other lists?

Yes, you can nest <ul> inside <li> elements to create sublists.

intermediate

Why should you use semantic HTML tags like <ul> instead of just styling text to look like a list?

Using semantic tags helps browsers and assistive technologies understand the content structure, improving accessibility and SEO.

Which tag starts an unordered list in HTML?

A <list>

B <ul>

C <li>

D <ol>

The <ul> tag is used to start an unordered list.

Which tag is used for each item inside an unordered list?

A <li>

B <ul>

C <item>

D <ol>

Each list item inside an unordered list uses the <li> tag.

What symbol is shown by default before each item in an unordered list?

A Solid black circles (bullets)

B Letters

C Numbers

D No symbol

Unordered lists show solid black circles (bullets) by default.

Can you put an unordered list inside a list item of another unordered list?

A No, nesting lists is not allowed

B Only ordered lists can be nested

C Yes, nesting unordered lists is allowed

D Only one list per page is allowed

You can nest unordered lists inside list items to create sublists.

Why is it better to use <ul> for lists instead of just styling text?

A It uses less code

B It looks prettier

C It makes the page load faster

D It helps screen readers and search engines understand the content

Using semantic tags like <ul> improves accessibility and SEO.

Explain how to create a simple unordered list with three items in HTML.

Think about the container tag and the item tags inside it.

Describe why semantic HTML tags like <ul> are important for web accessibility.

Consider how assistive tools use HTML tags.

Practice

1. What HTML tag is used to create an unordered list?

easy

A. <li>

B. <ol>

C. <ul>

D. <list>

Solution

1. Step 1: Understand list types in HTML

   <ul> creates unordered lists with bullet points, while <ol> creates ordered lists with numbers.

2. Step 2: Identify the correct tag for unordered lists

   The tag <ul> is specifically for unordered lists.

3. Final Answer:

   <ul> -> Option C

4. Quick Check:

   Unordered list tag = <ul> [OK]

Hint: Unordered lists always start with <ul> tag [OK]

Common Mistakes:

• Confusing <ul> with <ol>
• Using <li> as the list container
• Using non-standard tags like <list>

2. Which of the following is the correct syntax to create a list item inside an unordered list?

easy

A. Item

B. Item

C. Item

D. Item

Solution

1. Step 1: Identify the correct tag for list items

   List items must be inside <li> tags.

2. Step 2: Check the correct nesting of tags

   The <li> tags go inside the <ul> tags, not the other way around.

3. Final Answer:

   <ul><li>Item</li></ul> -> Option B

4. Quick Check:

   List item inside <ul> uses
5. [OK]

Hint: List items always go inside <li> tags within <ul> [OK]

Common Mistakes:

• Swapping <ul> and <li> tags
• Using <item> instead of <li>
• Using non-standard <list> tag

3. What will be the visual output of this HTML code?

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>

medium

A. A bulleted list with Apple, Banana, Cherry

B. An error message because of missing tags

C. Plain text: Apple Banana Cherry without bullets or numbers

D. A numbered list with Apple, Banana, Cherry

Solution

1. Step 1: Recognize the list type from the tag

   The <ul> tag creates an unordered list which shows bullet points.

2. Step 2: Understand the list items

   Each <li> creates a bullet point with the text inside it.

3. Final Answer:

   A bulleted list with Apple, Banana, Cherry -> Option A

4. Quick Check:

   <ul> = bulleted list [OK]

Hint: Unordered lists show bullets, ordered lists show numbers [OK]

Common Mistakes:

• Confusing <ul> with <ol>
• Expecting numbers instead of bullets
• Thinking it shows plain text without bullets

4. Identify the error in this unordered list code:

<ul>
  <li>First</li>
  <li>Second
</ul>

medium

A. No error, code is correct

B. Using <ul> instead of <ol>

C. Extra closing tag for <ul>

D. Missing closing tag for the second <li>

Solution

1. Step 1: Check each list item tag

   The first <li> has a closing tag, but the second <li> does not.

2. Step 2: Confirm proper HTML structure

   Every <li> must have a closing </li> tag to be valid.

3. Final Answer:

   Missing closing tag for the second <li> -> Option D

4. Quick Check:

   All
5. tags must be closed [OK]

Hint: Every

needs a closing

tag [OK]

Common Mistakes:

• Forgetting to close <li> tags
• Confusing <ul> with <ol>
• Ignoring missing closing tags

5. You want to create a nested unordered list where 'Fruits' has sub-items 'Apple' and 'Banana'. Which code correctly achieves this?

hard

A. FruitsAppleBanana

B. FruitsAppleBanana

C. FruitsAppleBanana

D. FruitsAppleBanana

Solution

1. Step 1: Understand nested list structure

   Nested lists must be inside a list item <li> of the parent list.

2. Step 2: Check correct nesting in options

   • Fruits
     • Apple
     • Banana
   correctly nests a <ul> inside the <li> for 'Fruits'. Other options either miss closing tags or place nested lists incorrectly.

3. Final Answer:

   <ul><li>Fruits<ul><li>Apple</li><li>Banana</li></ul></li></ul> -> Option A

4. Quick Check:

   Nested
   inside
   • for sublist [OK]

Hint: Put nested <ul> inside a parent <li> tag [OK]

Common Mistakes:

• Placing nested <ul> outside <li>
• Missing closing tags in nested lists
• Using multiple <li> without nesting