HTML Nested Lists

Understanding HTML Nested Lists

A nested list is a list placed inside an item of another list.

Nested lists are useful for showing categories, subcategories, outlines, steps with substeps, navigation groups, and other hierarchical relationships.

Nested List Syntax

A nested list is created by placing a second list inside an <li> element of the outer list.

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
  <li>Backend</li>
</ul>

The inner <ul> belongs to the Frontend list item and represents items that are grouped beneath it.

Nesting Unordered Lists

An unordered list can contain another unordered list when the content has categories and subcategories but no meaningful numeric sequence.

<ul>
  <li>Fruit
    <ul>
      <li>Apples</li>
      <li>Oranges</li>
    </ul>
  </li>
  <li>Vegetables
    <ul>
      <li>Carrots</li>
      <li>Peas</li>
    </ul>
  </li>
</ul>

Browsers often display nested unordered lists with different marker styles or indentation, although the exact appearance is controlled by browser defaults and CSS.

Nesting Ordered Lists

An ordered list can contain another ordered list when both the main steps and the substeps need to appear in sequence.

<ol>
  <li>Create the document.</li>
  <li>Add the page structure.
    <ol>
      <li>Add the head section.</li>
      <li>Add the body section.</li>
    </ol>
  </li>
  <li>Save the file.</li>
</ol>

The nested ordered list creates a second sequence inside the second item of the outer list.

Mixing List Types

Different list types can be combined when the structure of the content requires it. For example, an unordered category can contain an ordered sequence of steps.

<ul>
  <li>HTML
    <ol>
      <li>Create the document.</li>
      <li>Add the markup.</li>
      <li>Open the file in a browser.</li>
    </ol>
  </li>
  <li>CSS</li>
</ul>

The outer list shows related categories, while the nested ordered list shows a meaningful sequence within one of those categories.

Proper List Structure

A nested list should be placed inside the <li> element it belongs to rather than beside that list item.

Correct

<ul>
  <li>HTML
    <ul>
      <li>Elements</li>
      <li>Attributes</li>
    </ul>
  </li>
</ul>

Incorrect

<ul>
  <li>HTML</li>
  <ul>
    <li>Elements</li>
    <li>Attributes</li>
  </ul>
</ul>

Keeping the nested list inside its parent <li> preserves the intended structural relationship between the parent item and its child items.

When to Use Nested Lists

Use nested lists when the content has a clear hierarchy or parent-child relationship. Common examples include navigation menus, outlines, categories with subcategories, procedures with substeps, and grouped options.

Avoid nesting lists simply to create indentation or visual spacing. The nesting should reflect the meaning and structure of the content.

HTML Nested List Example

The following example combines unordered and ordered lists. Add another nested level, move a subitem, or change one of the list types to see how the structure changes.

Nested List Best Practices

• Place the nested list inside the <li> element that acts as its parent item.
• Use unordered lists when order is not important and ordered lists when sequence matters.
• Mix list types when the meaning of the content requires different kinds of organization.
• Use nesting to represent hierarchy rather than simply to create indentation.
• Avoid unnecessary levels of nesting that make the content difficult to follow.
• Keep the markup indented consistently so the parent-child structure is easy to read.

Summary

Nested lists are created by placing one list inside an <li> element of another list. Unordered and ordered lists can be nested within the same type or combined when the content requires different kinds of organization. Proper nesting creates clear hierarchical relationships between parent items and their related subitems.