To nest HTML lists correctly, place each sublist inside the list item it belongs to, before that item’s closing tag. This guide shows how to build, save, and preview a three-level example using TextEdit and Safari on a Mac.

Where does a nested HTML list belong?

An HTML list has two structural parts: a list container and its items. Use <ul> for an unordered list and <ol> for an ordered list. Each ordinary item is enclosed in <li> and </li>. A nested list belongs inside one of those items. Google’s Lists guide demonstrates this exact nesting pattern.

The essential sequence is: open the parent item, write its label, insert the complete sublist, and then close the parent item. Keeping the closing tag visible makes the relationship easier to check.

This correct HTML fragment gives Group A two children while keeping Group B at the outer level:

<ul>
  <li>Group A
    <ul>
      <li>Item A1</li>
      <li>Item A2</li>
    </ul>
  </li>
  <li>Group B</li>
</ul>

Read the closing tags from the inside outward. First, each child item closes. Next, the inner list closes with </ul>. Then Group A closes with </li>. Only after that does Group B begin. This gives you a practical check: locate the parent’s opening and closing tags and confirm that the entire sublist sits between them.

The HTML Standard allows <li> elements to contain flow content, which includes lists. The content model for <ul> and <ol> permits list items and script-supporting elements; it does not permit another list container directly inside the outer container. See the HTML Standard’s grouping-content definitions.

Choose the list type separately at each level

Ask whether changing the order of the items would change their meaning. If it would, choose <ol>. If the items are a collection whose meaning does not depend on sequence, choose <ul>. Apply that question independently to every sublist. Mozilla’s ordered-list documentation explains both the order test and mixing list types.

For the worked example below, Group A and Group B are neutral categories, so their outer list is unordered. Item A1 and Item A2 are also an unordered collection. Under Item A2, opening a sample document comes before renaming it, so those two instructions use an ordered list.

Content relationship List choice Placement
A collection of groups <ul> Around the group items
Items belonging to Group A <ul> Inside Group A’s <li>
A sequence belonging to Item A2 <ol> Inside Item A2’s <li>
Items belonging to Group B <ul> Inside Group B’s separate <li>

A change from bullets to numbers does not require a different nesting technique. The parent item still encloses the whole child list. Mozilla’s documentation explicitly supports nesting ordered and unordered lists together at multiple depths. Ordered-list usage notes

Create a complete nested-list document in TextEdit

The following example is a complete HTML document. It uses synthetic labels and needs no downloaded assets or additional code. Its structure contains four lists and eight list items: two outer groups, four items distributed between those groups, and two instructions under Item A2.

In TextEdit, choose File > New, then Format > Make Plain Text. Paste the complete example below. Apple documents this plain-text workflow for creating HTML files in its TextEdit HTML guide.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sample workspace outline</title>
</head>
<body>
  <h1>Sample workspace outline</h1>
  <ul>
    <li>Group A
      <ul>
        <li>Item A1</li>
        <li>Item A2
          <ol>
            <li>Open the sample document.</li>
            <li>Rename the sample document.</li>
          </ol>
        </li>
      </ul>
    </li>
    <li>Group B
      <ul>
        <li>Item B1</li>
        <li>Item B2</li>
      </ul>
    </li>
  </ul>
</body>
</html>

Choose File > Save, name the file nested-lists.html, and save it somewhere easy to find. If TextEdit asks which extension to use, choose Use .html. These are Apple’s documented HTML saving steps. Copy only the code inside the fenced block; omit the Markdown fence lines.

In Finder, select the saved file and choose File > Open With > Safari. Apple documents selecting an application through File > Open With in Choose an app to open a file on Mac.

Compare the preview with these expected relationships:

  • Group A and Group B are siblings at the outer level.
  • Item A1 and Item A2 belong to Group A.
  • The two numbered instructions belong only to Item A2.
  • Item B1 and Item B2 belong to Group B.

Check those relationships against the source as well as the display. The example’s explicit tags and list-parent relationships were checked programmatically; its Safari appearance was not tested here.

Diagnose a sublist attached to the wrong item

Use the following sequence when an existing document has the right words but the wrong hierarchy. Work on one parent and its immediate children at a time, starting with the outer list.

1. Find a parent item that closes too early

This incorrect fragment closes Group A before its sublist starts:

<ul>
  <li>Group A</li>
  <ul>
    <li>Item A1</li>
  </ul>
</ul>

Here, the inner <ul> is a direct child of the outer <ul>. Move Group A’s </li> below the inner </ul> so that the parent encloses the sublist. This repair follows the placement rule illustrated in Google’s nested-list example.

2. Check for a valid structure with the wrong parent

A list can follow the nesting rules and still describe the wrong relationship. For example, putting the numbered instructions inside Item A1 would attach them to Item A1, even if the intended label was Item A2. Correct syntax alone cannot establish your intended grouping.

For each sublist, ask: “Which item’s opening tag encloses this entire list?” Compare that item’s label with the intended parent. In the complete example, tracing outward from the numbered instructions should reach Item A2, then Group A. If it reaches another label, relocate the complete sublist before adjusting its appearance.

3. Make closing tags explicit while editing

HTML permits an item’s closing </li> tag to be omitted under specific conditions, including when another item immediately follows. You do not need to rely on that shorthand. Write every closing item tag while learning or repairing nesting so each boundary is visible. Mozilla lists the exact omission conditions in its list-item technical summary.

Use consistent indentation as an editing aid: indent a child list beneath its parent label, and align matching opening and closing list tags. Then check the actual tag boundaries. Indentation makes the intended relationship easier to read; the enclosing elements establish it.

4. Keep paragraph wrappers inside their own boundaries

If a parent label needs a paragraph, close that paragraph before opening the sublist, while keeping both inside the parent item. The HTML Standard states that list containers cannot be children of <p> elements. HTML paragraph content rules

This valid fragment keeps the label paragraph and child list together inside Group A:

<ul>
  <li>
    <p>Group A</p>
    <ul>
      <li>Item A1</li>
    </ul>
  </li>
</ul>

Reopen the source and preserve the hierarchy during changes

If reopening the file in TextEdit shows formatted content instead of tags, choose File > Open, select the file, click Show Options, select Ignore rich text commands, and click Open. For future files, Apple also provides TextEdit > Settings > Open and Save and the option Display HTML files as HTML code instead of formatted text. View HTML as code in TextEdit

When moving an item, move its complete <li> block, including any sublists it contains. For example, moving Item A2 requires carrying its two instructions with it. Moving only the label would leave those instructions behind and change the document’s intended grouping.

Before saving a revision, check three things: every child list is enclosed by the intended parent item; sibling items remain in the required order; and each list uses bullets or numbering according to whether its sequence matters. Save the file, reopen it in Safari, and compare the visible groups with your intended outline. Keeping each parent and its complete subtree together makes future edits easier to verify.

Sources