Problem Statement
Where should a nested list be placed in HTML?
Explanation
A nested list should be placed inside an li element of the parent list. This is the correct and semantic way to create hierarchical lists. The nested list can be either ordered or unordered, regardless of the parent list type. For example, you can have an unordered list nested inside an ordered list or vice versa. The browser automatically indents nested lists to show the hierarchy. Nested lists are useful for creating outlines, multi-level navigation menus, or any content with subcategories. The key point to remember is that you must place the nested list inside an li tag, not directly inside the ul or ol tag. Each li can contain text followed by a complete nested list. You can nest lists to multiple levels, though more than three or four levels can become difficult to read. Understanding proper nesting is important for creating well-structured, accessible HTML.
Code Solution
SolutionRead Only
<!-- Correct nesting -->
<ul>
<li>Fruits
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Carrot</li>
<li>Broccoli</li>
</ul>
</li>
</ul>
<!-- Mixed list types -->
<ol>
<li>Main topic
<ul>
<li>Subtopic A</li>
<li>Subtopic B</li>
</ul>
</li>
<li>Another topic</li>
</ol>