Nested Lists

Lists can be nested inside each other by placing a new <ul> or <ol> tag inside an <li> element. Browsers automatically indent nested lists and may change the bullet style for each level. You can mix ordered and unordered lists.

Indentation and Accessibility

Keep nesting depth to a maximum of three levels — deeper hierarchies become difficult to read and navigate. Screen readers announce the nesting level (e.g., "list of 3 items, 2 levels deep"), so logical structure matters. Never put block elements like <p> directly inside <ul> without wrapping them in <li>.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Nested Lists</title>
</head>
<body>
  <h1>Course Outline</h1>
  <ol>
    <li>HTML Basics
      <ul>
        <li>Headings</li>
        <li>Paragraphs</li>
        <li>Links</li>
      </ul>
    </li>
    <li>CSS Fundamentals
      <ul>
        <li>Selectors</li>
        <li>Box Model</li>
        <li>Flexbox
          <ol type="a">
            <li>Flex container</li>
            <li>Flex items</li>
          </ol>
        </li>
      </ul>
    </li>
    <li>JavaScript
      <ul>
        <li>Variables</li>
        <li>Functions</li>
      </ul>
    </li>
  </ol>
</body>
</html>

HTML

Full Editor

Pro Tip

Place the nested <ul> or <ol> tag inside the parent <li> — not after the closing </li> — to keep the HTML valid and ensure correct indentation in all browsers.

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned