Challenge · easy
Fix a Broken Nested List in HTML: Practice Challenge
Goal: Repair a packing list that breaks list nesting rules.
Learn
Lists are strict. The direct children of a <ul> or <ol> can only be list items. Paragraphs, loose text and other lists are not allowed there.
A sub-list goes inside an <li>: write the item text, then the whole inner <ul>, then the closing </li>. The nested lists lesson walks through it one step at a time.
Browsers patch up broken lists on their own, so the page can look nearly fine while the structure underneath is wrong. A screen reader will then announce the wrong item count. Close every <li> so each item has a visible end. For a tricky page, the W3C Markup Validation Service (opens in a new tab) will point out list children in the wrong place.
The short version
- A missing
</li>gets patched by the browser, so look for it. - A nested
<ul>goes inside its parent<li>, before the closing tag. - The direct children of a list are
<li>elements and nothing else. - Screen readers count the items, so check the structure as well as the look.
Example
<ul>
<li>Fruit
<ul>
<li>Apples</li>
<li>Pears</li>
</ul>
</li>
<li>Bread</li>
</ul>Your task
Someone packed this list badly. Fix its three bugs:
- 'Sleeping bag' has no closing
</li>tag. - The Socks and Jumper list is sitting straight inside the main
<ul>. Move it into the 'Clothes'<li>. - 'Torch' is a
<p>. Turn it into a list item.
When you finish, the main list has 5 items: Tent, Sleeping bag, Clothes, Torch, Water bottle.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Frequently asked questions
How do you make a nested list in HTML?
Place the inner list inside one item of the outer list. Write the item text, then the complete inner <ul> or <ol>, and close the item with </li> last. Now the sub-list belongs to that item and the browser indents it underneath. Mixing types is fine, such as a numbered list inside a bulleted one. Messy indentation? A formatter like HTML Tidy (opens in a new tab) re-indents the code, and you can see each sub-list sitting in its item.
Can a ul contain a p or a div in HTML?
Not as a direct child. The ul content model in the HTML standard (opens in a new tab) allows <li> items as children of <ul> and <ol>, plus <script> and <template>. That is the whole list. Put paragraphs, divs, images or another list inside an <li>, since a list item can hold almost anything.