How to Create HTML Nested Lists with Examples

In this article, you will learn how the browsers read nested lists in HTML and how to use them with clear examples.

What are HTML Nested Lists?

A nested list is a list inside another list in HTML.

A browser shows a main list, then indents a sub-list. The browser reads a parent list item, then finds a child list inside. The browser then shows that child list under the parent item.

Here is an example:

<ul>
  <li>Item one
    <ul>
      <li>Sub-item one</li>
      <li>Sub-item two</li>
    </ul>
  </li>
  <li>Item two</li>
</ul>

This shows one unordered list with a nested sub-list inside the first item. The browser reads the outer list, then reads the inner list under the first item.

You may forget to close a <ul> or <ol> tag. You may place the nested list outside the <li> tag.

The Difference Between Ordered and Unordered Nested Lists

An unordered nested list uses <ul> tags. The browser shows bullet points.
An ordered nested list uses <ol> tags. The browser shows numbers.

Here is a table showing you the key differences:

Use an unordered nested list for topics without order. Use an ordered nested list for steps or ranked items.

Examples

Basic unordered nested list:

<ul>
  <li>Fruit
    <ul>
      <li>Apple</li>
      <li>Banana</li>
    </ul>
  </li>
</ul>

Take this example. This returns a list of fruit with sub-items. You get a bullet list, then a second bullet list inside a bullet. It shows how browsers indent sub-items under the main heading.

Ordered list with nested unordered list:

<ol>
  <li>Step 1
    <ul>
      <li>Do this</li>
    </ul>
  </li>
  <li>Step 2</li>
</ol>

Take this example. You get a numbered list for steps. It shows one step with a sub-step in bullet form. The layout reads a number, then shows a bullet list under that step.

Nested ordered lists:

<ol>
  <li>Chapter 1
    <ol>
      <li>Section 1.1</li>
      <li>Section 1.2</li>
    </ol>
  </li>
  <li>Chapter 2</li>
</ol>

Take this example. You get a number list inside a number list. It shows chapter numbers, then section numbers under each chapter. This shows how to keep a clear hierarchy.

Mixed nested list:

<ul>
  <li>Project
    <ol>
      <li>Phase one</li>
      <li>Phase two</li>
    </ol>
  </li>
  <li>Archive</li>
</ul>

Take this example. You see a bullet list with a numbered sub-list. It shows the project name, then numbered phases below. You get a mix of list types to show order inside a bullet list.

Wrapping Up

You learned what nested lists in HTML mean and how browsers show them, and how to write both ordered and unordered nested lists.

Here is a quick recap:

• You saw what nested lists mean, how to write them, how browsers read them, how to fix nesting mistakes, how ordered and unordered types differ, and how to use examples from basic to mixed types.

FAQs

Similar Reads