How to create nested list in html

HtmlHow-ToBeginner · 3 min read

How to Create Nested Lists in HTML: Simple Guide

To create a nested list in HTML, place a <ul> or <ol> list inside a <li> item of another list. This creates a list within a list, allowing multiple levels of items.

📐

Syntax

A nested list is made by putting a <ul> (unordered list) or <ol> (ordered list) inside a <li> (list item) of another list. The outer list holds main items, and the inner list holds sub-items.

<ul> or <ol>: Defines a list.
<li>: Defines an item in the list.
Nested list: Another <ul> or <ol> inside a <li> to create sub-items.

html

<ul>
  <li>Main item 1
    <ul>
      <li>Nested item 1</li>
      <li>Nested item 2</li>
    </ul>
  </li>
  <li>Main item 2</li>
</ul>

Output

• Main item 1 ◦ Nested item 1 ◦ Nested item 2 • Main item 2

💻

Example

This example shows an unordered list with a nested unordered list inside the first item. It demonstrates how sub-items appear indented under their parent item.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nested List Example</title>
</head>
<body>
  <ul>
    <li>Fruits
      <ul>
        <li>Apple</li>
        <li>Banana</li>
        <li>Cherry</li>
      </ul>
    </li>
    <li>Vegetables
      <ul>
        <li>Carrot</li>
        <li>Broccoli</li>
      </ul>
    </li>
    <li>Grains</li>
  </ul>
</body>
</html>

Output

• Fruits ◦ Apple ◦ Banana ◦ Cherry • Vegetables ◦ Carrot ◦ Broccoli • Grains

⚠️

Common Pitfalls

Common mistakes when creating nested lists include:

Placing the nested <ul> or <ol> outside of a <li> item, which breaks the list structure.
Forgetting to close tags properly, causing rendering issues.
Mixing unordered and ordered lists without clear structure, which can confuse readers.

Always nest lists inside <li> elements to keep the hierarchy correct.

html

<!-- Wrong way: nested list outside <li> -->
<ul>
  <li>Item 1</li>
  <ul>
    <li>Nested Item</li>
  </ul>
</ul>

<!-- Right way: nested list inside <li> -->
<ul>
  <li>Item 1
    <ul>
      <li>Nested Item</li>
    </ul>
  </li>
</ul>

Output

• Item 1 ◦ Nested Item

📊

Quick Reference

Tips for creating nested lists:

Use <ul> for bullet lists and <ol> for numbered lists.
Always nest lists inside <li> elements.
Indent nested lists for better readability in code.
Close all tags properly to avoid display errors.
Use semantic HTML to help screen readers understand the list structure.

✅

Key Takeaways

Nest <ul> or <ol> inside <li> to create nested lists.

Always close your list tags properly to ensure correct display.

Use indentation in your code to keep nested lists clear and readable.

Mixing list types is allowed but keep structure logical for users.

Semantic nesting helps accessibility and screen readers.