Nested lists in HTML - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a nested list in HTML?

A nested list is a list placed inside another list item. It helps organize information in a hierarchy, like chapters and subchapters in a book.

beginner

Which HTML tags are used to create nested lists?

You use <ul> or <ol> tags inside a <li> tag to create nested lists. <ul> is for unordered (bulleted) lists, and <ol> is for ordered (numbered) lists.

beginner

How does nesting lists help in real life?

Nesting lists helps show details clearly. For example, a grocery list can have categories like Fruits, and inside Fruits, you list Apples, Bananas, etc.

intermediate

What is the correct way to nest an ordered list inside an unordered list?

Place the <ol> inside a <li> of the <ul>. For example:

<ul>
  <li>Item 1
    <ol>
      <li>Subitem 1</li>
    </ol>
  </li>
</ul>

intermediate

Can you nest multiple levels of lists in HTML?

Yes, you can nest lists as many levels as you want. Each nested list goes inside a <li> of the parent list, creating a clear structure.

Which tag is used to start an unordered list in HTML?

A <li>

B <ol>

C <ul>

D <list>

The

tag starts an unordered (bulleted) list.

Where do you place a nested list inside the parent list?

A Inside a <li> element

B Directly inside <ul> or <ol> without <li>

C Outside the list tags

D Inside a <div> only

Nested lists must be inside a

element of the parent list.

What happens if you put a nested list outside a <li>?

A The browser ignores it

B It causes a browser crash

C It creates a new separate list

D It still works but is not valid HTML

Placing nested lists outside

is invalid HTML and may cause unexpected display.

Which of these is a valid nested list structure?

A <ul><ul><li>Item</li></ul></ul>

B <ul><li>Item<ul><li>Subitem</li></ul></li></ul>

C <li><ul>Item</ul></li>

D <ol><li>Item</li><li>Subitem</li></ol>

Option B correctly nests a

inside a
• .

Can you mix ordered and unordered lists in nesting?

A Yes, you can nest <ol> inside <ul> and vice versa

B No, you must use only one type

C Only <ul> can be nested

D Only <ol> can be nested

HTML allows mixing ordered and unordered lists in nesting.

Explain how to create a nested list in HTML and why it might be useful.

Think about how you organize items in groups and subgroups.

Describe the rules for placing nested lists inside parent lists in HTML.

Focus on where the nested list tags go in the HTML structure.

Practice

1. What is the main purpose of using nested lists in HTML?

easy

A. To organize information into groups and subgroups

B. To add images inside list items

C. To change the font style of list items

D. To create buttons inside lists

Solution

1. Step 1: Understand the role of nested lists

   Nested lists allow placing one list inside another to show hierarchy or subgroups.

2. Step 2: Identify the correct purpose

   Organizing information into groups and subgroups matches the use of nested lists.

3. Final Answer:

   To organize information into groups and subgroups -> Option A

4. Quick Check:

   Nested lists = groups and subgroups [OK]

Hint: Nested lists group items inside other lists [OK]

Common Mistakes:

• Thinking nested lists add images
• Confusing nested lists with styling
• Believing nested lists create buttons

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

easy

A. <li><ul>

B. <ul><li>

C. <ol><ul>

D. <li><ol>

Solution

1. Step 1: Recall nested list structure

   A nested list must be inside a list item, so
2. comes first.

3. Step 2: Identify correct tag order

   Starting a nested unordered list inside a list item uses <li><ul>.

4. Final Answer:

   <li><ul> -> Option A

5. Quick Check:

   Nested list starts inside <li> [OK]

Hint: Nested list always starts inside a list item <li> [OK]

Common Mistakes:

• Starting nested list outside <li>
• Mixing <ul> and <ol> incorrectly
• Placing <li> before <ul> in wrong order

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

<ul>
  <li>Fruit
    <ul>
      <li>Apple</li>
      <li>Banana</li>
    </ul>
  </li>
  <li>Vegetables</li>
</ul>

medium

A. A numbered list with 'Fruit' and 'Vegetables' only

B. A bulleted list with 'Fruit' having a nested bulleted list of 'Apple' and 'Banana', and 'Vegetables' as a separate item

C. A bulleted list with 'Fruit', 'Apple', 'Banana', and 'Vegetables' all at the same level

D. An error because nested lists are not allowed inside list items

Solution

1. Step 1: Analyze the list tags

   The outer list is unordered (<ul>), so bullets appear. 'Fruit' has a nested <ul> with 'Apple' and 'Banana'.

2. Step 2: Understand nesting effect

   'Apple' and 'Banana' appear as a sub-bulleted list under 'Fruit'. 'Vegetables' is a separate top-level bullet.

3. Final Answer:

   A bulleted list with 'Fruit' having a nested bulleted list of 'Apple' and 'Banana', and 'Vegetables' as a separate item -> Option B

4. Quick Check:

   Nested <ul> creates sub-bullets [OK]

Hint: Nested <ul> creates sub-bullets under parent item [OK]

Common Mistakes:

• Thinking nested items appear at same level
• Confusing bullets with numbers
• Believing nested lists cause errors

4. Identify the error in this nested list HTML code:

<ul>
  <li>Item 1</li>
  <ul>
    <li>Subitem 1</li>
  </ul>
  <li>Item 2</li>
</ul>

medium

A. There should be no nested lists inside <ul>

B. The <li> tags are missing closing tags

C. The nested <ul> is not inside a <li> element

D. The outer <ul> should be an <ol>

Solution

1. Step 1: Check nested list placement

   The nested <ul> appears directly inside the outer <ul>, not inside any <li>.

2. Step 2: Understand correct nesting rules

   A nested list must be inside a list item (<li>), so this structure is invalid.

3. Final Answer:

   The nested <ul> is not inside a <li> element -> Option C

4. Quick Check:

   Nested list must be inside <li> [OK]

Hint: Nested lists must be inside a list item <li> [OK]

Common Mistakes:

• Placing nested <ul> directly inside <ul>
• Forgetting to close <li> tags
• Thinking <ul> and <ol> are interchangeable here

5. You want to create a nested list where the top level is numbered and the nested level is bulleted. Which HTML structure correctly achieves this?

hard

A. <ul>\n <li>Main Item</li>\n <ul>\n <li>Sub Item</li>\n <ul>\n</ul>

B. <ul>\n <li>Main Item\n <ol>\n <li>Sub Item</li>\n </ol>\n </li>\n</ul>

C. <ol>\n <li>Main Item</li>\n <ol>\n <li>Sub Item</li>\n </ol>\n</ol>

D. <ol>\n <li>Main Item\n <ul>\n <li>Sub Item</li>\n </ul>\n </li>\n</ol>

Solution

1. Step 1: Identify top-level list type

   The top level should be numbered, so use <ol> for the main list.

2. Step 2: Identify nested list type

   The nested list should be bulleted, so use <ul> inside a <li> of the <ol>.

3. Step 3: Check correct nesting

   The nested <ul> is correctly placed inside a <li> of the <ol>.

4. Final Answer:

   <ol> with nested <ul> inside <li> -> Option D

5. Quick Check:

   Numbered <ol> with bulleted <ul> nested inside [OK]

Hint: Use <ol> for numbers, <ul> inside <li> for bullets [OK]

Common Mistakes:

• Placing nested list outside <li>
• Using same list type for both levels
• Incorrectly closing tags