0
0
HTMLmarkup~5 mins

Nested lists in HTML

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Nested lists help organize information in groups and subgroups. They make content easier to read and understand.

To show steps with sub-steps, like a recipe with detailed instructions.
To list categories and subcategories, like a menu with food types and dishes.
To display an outline with main points and supporting details.
To create a table of contents with chapters and sections.
To organize tasks with main tasks and smaller tasks inside.
Syntax
HTML
<ul>
  <li>Item 1
    <ul>
      <li>Subitem 1a</li>
      <li>Subitem 1b</li>
    </ul>
  </li>
  <li>Item 2</li>
</ul>
Use
    for unordered (bulleted) lists and
      for ordered (numbered) lists.
You can put a list inside a
  • to create a nested list.
    • Examples
    This shows a list with 'Fruits' having a nested list of two items.
    HTML
    <ul>
  <li>Fruits
    <ul>
      <li>Apple</li>
      <li>Banana</li>
    </ul>
  </li>
  <li>Vegetables</li>
</ul>
    An ordered list with nested ordered substeps.
    HTML
    <ol>
  <li>Step 1
    <ol>
      <li>Substep 1a</li>
      <li>Substep 1b</li>
    </ol>
  </li>
  <li>Step 2</li>
</ol>
    Multiple levels of nested lists showing deep grouping.
    HTML
    <ul>
  <li>Item A</li>
  <li>Item B
    <ul>
      <li>Subitem B1</li>
      <li>Subitem B2
        <ul>
          <li>Sub-subitem B2a</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
    Sample Program

    This page shows a main list of weekend tasks. Some tasks have smaller lists inside to show details.

    HTML
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nested Lists Example</title>
</head>
<body>
  <main>
    <h1>Weekend To-Do List</h1>
    <ul>
      <li>Housework
        <ul>
          <li>Clean kitchen</li>
          <li>Vacuum living room</li>
        </ul>
      </li>
      <li>Shopping
        <ul>
          <li>Buy groceries
            <ul>
              <li>Milk</li>
              <li>Bread</li>
              <li>Eggs</li>
            </ul>
          </li>
          <li>Pick up package</li>
        </ul>
      </li>
      <li>Relax</li>
    </ul>
  </main>
</body>
</html>
    OutputSuccess
    Important Notes

    Nested lists can be as deep as you want, but too many levels can confuse readers.

    Use semantic tags like <main> and headings to improve accessibility.

    Screen readers announce nested lists clearly, helping users understand structure.

    Summary

    Nested lists organize information in groups and subgroups.

    Use <ul> for bullets and <ol> for numbers.

    Put a list inside a list item to create nesting.