Nested use of lists

Nested Usage of Lists

Nested lists are a common structure in HTML, used to display hierarchical data. By combining <ul>, <ol>, and <li> tags, multi-level lists can be created, suitable for scenarios such as menus, directories, and step-by-step instructions.

Basic Syntax Structure

Both unordered and ordered lists can be nested. To nest, simply place a new list structure inside a <li> tag:

<ul>
  <li>Level 1 Item 1
    <ul>
      <li>Level 2 Item 1</li>
      <li>Level 2 Item 2</li>
    </ul>
  </li>
  <li>Level 1 Item 2</li>
</ul>

The nesting method for ordered lists is identical:

<ol>
  <li>Step 1
    <ol>
      <li>Substep 1</li>
      <li>Substep 2</li>
    </ol>
  </li>
  <li>Step 2</li>
</ol>

Mixed Nesting Example

In actual development, ordered and unordered lists are often mixed:

<ol>
  <li>Prepare Materials
    <ul>
      <li>500g flour</li>
      <li>3 eggs</li>
    </ul>
  </li>
  <li>Mix Ingredients</li>
</ol>

Deep Nesting Practice

Theoretically, lists can be nested infinitely, but it is recommended not to exceed 4 levels for readability:

<ul>
  <li>Company Structure
    <ul>
      <li>Technical Department
        <ul>
          <li>Frontend Team
            <ul>
              <li>UI Group</li>
              <li>Interaction Group</li>
            </ul>
          </li>
          <li>Backend Team</li>
        </ul>
      </li>
      <li>Marketing Department</li>
    </ul>
  </li>
</ul>

CSS Styling Control

Nested lists have default indentation styles, which can be customized with CSS:

<style>
  ul, ol {
    padding-left: 20px;
  }
  li {
    margin: 5px 0;
  }
  ul ul {
    list-style-type: circle;
  }
  ul ul ul {
    list-style-type: square;
  }
</style>

Practical Application Examples

Website Navigation Menu

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li>Products
      <ul>
        <li><a href="/product/web">Website Development</a></li>
        <li><a href="/product/app">App Development</a></li>
      </ul>
    </li>
    <li>Services</li>
  </ul>
</nav>

Document Table of Contents

<div class="toc">
  <ol>
    <li>Chapter 1
      <ol>
        <li>1.1 Overview</li>
        <li>1.2 Basic Concepts</li>
      </ol>
    </li>
    <li>Chapter 2</li>
  </ol>
</div>

Notes

1. Each <li> element must be properly closed.
2. Avoid placing text nodes directly inside <ul> or <ol>.
3. For overly deep nesting, consider using other structures like <details>.
4. On mobile displays, ensure touch targets are appropriately sized.

Advanced Techniques

Combine CSS counters for custom numbering:

<style>
  ol { counter-reset: section; }
  li { counter-increment: section; }
  li:before {
    content: counters(section,".") " ";
  }
</style>
<ol>
  <li>Item
    <ol>
      <li>Subitem</li>
    </ol>
  </li>
</ol>

Accessibility Recommendations

1. Add aria-label attributes to navigation lists.
2. Use role="navigation" for complex structures.
3. Avoid relying solely on visual hierarchy to convey information.

<nav aria-label="Main Navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li>
      <button aria-expanded="false">Products</button>
      <ul>
        <li><a href="/product/web">Website Development</a></li>
      </ul>
    </li>
  </ul>
</nav>