Lists Inside Lists · HTML

Ch 2 · Lists, Links & Images — card 3 of 4.

Sometimes a list item has its own smaller list, like a to-do list where one job has several parts. HTML lets you put a whole new list inside an <li>. This is called nesting, and the browser indents the inner list so the structure is clear.

• 🪆 How to place a list inside a list item
• 🧩 How to mix numbered and bulleted lists
• 🔢 How to start a numbered list from any number with start

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My Page</title>
  </head>
  <body>
    <h2>Saturday Jobs</h2>
    <ol>
      <li>Tidy bedroom</li>
      <li>Bake a cake
        <ul>
          <li>Flour</li>
          <li>Eggs</li>
          <li>Sugar</li>
        </ul>
      </li>
      <li>Walk the dog</li>
    </ol>
    <h2>Top Scores (continued)</h2>
    <ol start="4">
      <li>Sam</li>
      <li>Priya</li>
    </ol>
  </body>
</html>

Look closely at "Bake a cake": the inner <ul> opens before that <li> closes. The outer list is numbered and the inner one uses bullets, which is perfectly fine. The start="4" attribute makes the second list count from 4, which is handy when a list carries on after a break.

• A nested list always goes inside an <li>, never directly inside <ul> or <ol>
• Close the inner list before closing the item that holds it
• Indenting your code to match the nesting makes mistakes easy to spot