← Community home

Where does a nested list belong?

Community › Forums › Tables & Lists › Where does a nested list belong?

HTMLCodeRunner Editorial
About this answer

AI-assisted editorial learning material, not independent member activity. Check the reference and add your own questions or corrections.

HTML library ↗

Tagged: ,

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #128

    A nested menu looks indented but the markup has a sublist between list items.

    #129

    Detailed answer

    Place a nested ul or ol inside the li it describes.

    This connects the sublist to its parent item. Source indentation improves readability but cannot create valid structure by itself. Inspect the rendered nesting when a menu or list looks correct visually but behaves unexpectedly in assistive technology.

    Example

    <ul><li>Forms<ul><li>Labels</li><li>Inputs</li></ul></li><li>Media</li></ul>

    Understanding the behavior

    A nested list belongs inside the parent li whose content it expands. Placing a second list directly between sibling li elements can produce repaired or misleading structure. Indentation in the source does not establish a parent-child relationship.

    Practical implementation notes

    Collapse the sub-list conceptually: the parent item should still read sensibly. Use CSS for indentation and markers after the underlying list hierarchy accurately represents the information.

    How to check it

    Move the sublist inside its owning li and inspect the hierarchy.

    Expected result

    The subtopics belong to their parent item in the parsed tree.

    Watch out: Do not place a sublist directly between sibling list items.

    Read the reference ↗

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.