15. Nested Lists (Nested Lists - a list inside a list)

Explanation

Nested list: When another new list is placed inside a point (<li>) of a list.

The most important structural rule:

The new list must always be closed inside the <li> of the parent list, not outside the <li>!

<ul>
  <li>Fruits
    <ul> <!-- new ul inside li -->
      <li>Apple</li>
    </ul>
  </li> <!-- the parent li is closed here -->
</ul>

Golden rules

• A nested list must always come before the closing tag of the <li>.

Example code

<!DOCTYPE html>
<html>
<body style="font-family: sans-serif; padding: 20px;">
  <h4 style="color: #065f46; margin-top: 0;">Web Development Syllabus (Nested List):</h4>
  <ul style="line-height: 1.6; font-size: 13px;">
    <li><strong>Front-End Development</strong>
      <ol type="a" style="margin-top: 4px; color: #0284c7;">
        <li>HTML5 (Structure)</li>
        <li>CSS3 (Styling)
          <ul style="list-style-type: circle; color: #475569;">
            <li>Flexbox</li>
            <li>Grid</li>
          </ul>
        </li>
        <li>JavaScript (Logic)</li>
      </ol>
    </li>
    <li style="margin-top: 6px;"><strong>Back-End Development</strong>
      <ol type="a" style="margin-top: 4px; color: #059669;">
        <li>Node.js</li>
        <li>Python</li>
      </ol>
    </li>
  </ul>
</body>
</html>

Run & edit this in the live editor

Quick quiz

What is the correct syntax for creating a nested list?

1. Placing <ol> immediately after <ul>
2. Placing a new <ul> or <ol> inside an <li>
3. Placing a new <ul> after closing the <li>
4. Joining two <ul> without an <li>