0Pricing
HTML Academy · Lesson

Nested Lists and List Styling

Nest lists within lists and control their appearance.

Nesting Lists

Lists can be nested inside <li> elements:

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend
    <ul>
      <li>Node.js</li>
      <li>Python</li>
    </ul>
  </li>
</ul>

Correct Nesting

The nested list must be inside a <li> element, not a direct child of <ul> or <ol>:

<!-- WRONG: nested ul as direct child of outer ul -->
<ul>
  <ul>   <!-- INVALID -->
    <li>Item</li>
  </ul>
</ul>

<!-- CORRECT: nested ul inside li -->
<ul>
  <li>
    Parent item
    <ul>
      <li>Child item</li>
    </ul>
  </li>
</ul>

All lessons in this course

  1. Unordered Lists ul and li
  2. Ordered Lists ol start reversed type
  3. Description Lists dl dt dd
  4. Nested Lists and List Styling
← Back to HTML Academy