Problem Statement
Explain how nested lists work with an example.
Explanation
Nested lists are lists placed inside other lists to create hierarchical or multi-level structures. Understanding how nested lists work is essential for creating complex content structures like outlines, multi-level navigation menus, or organizational charts. The key rule for nested lists is that the inner list must be placed inside an li element of the outer list. You cannot place a list directly inside another ul or ol tag. Here is how it works. First, you create your parent list with a ul or ol tag. Then, inside one of the li elements, after the item text, you place a complete child list with its own ul or ol tags and li elements. The browser automatically indents the nested list to show the hierarchy. Each level of nesting creates another level of indentation. You can nest lists to multiple levels. For example, you can have a list inside a list inside another list. However, more than three or four levels can become difficult to read and maintain. The nested list can be a different type from its parent. You can have an ordered list nested inside an unordered list, or vice versa. This flexibility allows you to create complex structures that match your content needs. Common use cases for nested lists include website navigation menus with dropdown submenus, table of contents with chapters and sections, organizational hierarchies showing departments and teams, file and folder structures, product categories and subcategories, and course outlines with topics and subtopics. When creating nested lists, proper indentation in your HTML code is important for readability. Each level should be indented further to make the structure clear to developers. However, the browser does not care about your code indentation. It only follows the HTML structure. Nested lists are important for accessibility. Screen readers can navigate through the hierarchy and announce the nesting level to users. This helps visually impaired users understand the structure of your content. Understanding nested lists demonstrates knowledge of HTML document structure and is commonly tested in interviews through questions about creating hierarchical content or fixing improperly nested lists.
