Proper way to make HTML nested list?

Question

The W3 docs have a nested list example prefixed by DEPRECATED EXAMPLE:, but they never corrected it with a non-deprecated example, nor explained exactly what is wrong with the example.

So which of these ways is the correct way to write an HTML list?

Option 1: The nested <ul> is a child of the parent <ul>:

<ul>
    <li>List item one</li>
    <li>List item two with subitems:</li>
    <ul>
        <li>Subitem 1</li>
        <li>Subitem 2</li>
    </ul>
    <li>Final list item</li>
</ul>

Option 2: The nested <ul> is a child of the <li> it belongs in:

<ul>
    <li>List item one</li>
    <li>List item two with subitems:
        <ul>
            <li>Subitem 1</li>
            <li>Subitem 2</li>
        </ul>
    </li>
    <li>Final list item</li>
</ul>

Micahmicawber

Answer 1

Option 2 is correct.

The nested list should be inside a <li> element of the list in which it is nested.

Link to the MDN article on lists (taken from comment below): HTML lists.

Link to the HTML5 W3C ul spec: HTML5 ul.

Note that a ul element may contain exactly zero or more li elements. The same applies to HTML5 ol.

The description list (HTML5 dl) is similar, but allows both dt and dd elements.

More notes:

• dl = definition list.
• ol = ordered list (numbers).
• ul = unordered list (bullets).

---

MDN link on nesting lists.

Hannis

I ran into a case that seems to be impossible to create with valid HTML5: a nested list item without a parent list item (imagine pressing TAB to indent at the beginning of a list item in a word processor). See my question here: #61094884 – Targe

I'm really happy to get this answer, but can't find how to convert the invalid HTML5 in Option 1 (which for instance BlueGriffon creates, and requires to display nested lists correctly) into the valid HTML5 of Option 2. HTML Tidy doesn't appear to do it, and all the WYSIWYG editors that I've tried will accept copy & paste of the invalid markup and just leave it that way. :( – Dicrotic

Answer 2

Option 2

<ul>
<li>Choice A</li>
<li>Choice B
  <ul>
    <li>Sub 1</li>
    <li>Sub 2</li>
  </ul>
</li>
</ul>

Nesting Lists - UL

Alida

Answer 3

Option 2 is correct: The nested <ul> is a child of the <li> it belongs in.

If you validate, option 1 comes up as an error in html 5 -- credit: user3272456

---

Correct: <ul> as child of <li>

The proper way to make HTML nested list is with the nested <ul> as a child of the <li> to which it belongs. The nested list should be inside of the <li> element of the list in which it is nested.

<ul>
    <li>Parent/Item
        <ul>
            <li>Child/Subitem
            </li>
        </ul>
    </li>
</ul>

---

W3C Standard for Nesting Lists

A list item can contain another entire list — this is known as "nesting" a list. It is useful for things like tables of contents, such as the one at the start of this article:

1. Chapter One
   1. Section One
   2. Section Two
   3. Section Three
2. Chapter Two
3. Chapter Three

The key to nesting lists is to remember that the nested list should relate to one specific list item. To reflect that in the code, the nested list is contained inside that list item. The code for the list above looks something like this:

<ol>
  <li>Chapter One
    <ol>
      <li>Section One</li>
      <li>Section Two </li>
      <li>Section Three </li>
    </ol>
  </li>
  <li>Chapter Two</li>
  <li>Chapter Three  </li>
</ol>

Note how the nested list starts after the <li> and the text of the containing list item (“Chapter One”); then ends before the </li> of the containing list item. Nested lists often form the basis for website navigation menus, as they are a good way to define the hierarchical structure of the website.

Theoretically you can nest as many lists as you like, although in practice it can become confusing to nest lists too deeply. For very large lists, you may be better off splitting the content up into several lists with headings instead, or even splitting it up into separate pages.

Camelback

Answer 4

If you validate , option 1 comes up as an error in html 5, so option 2 is correct.

Faulty

Answer 5

I prefer option two because it clearly shows the list item as the possessor of that nested list. I would always lean towards semantically sound HTML.

Bestial

Answer 6

Have you thought about using the TAG "dt" instead of "ul" for nesting lists? It's inherit style and structure allow you to have a title per section and it automatically tabulates the content that goes inside.

<dl>
  <dt>Coffee</dt>
    <dd>Black hot drink</dd>
  <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>

VS

<ul>
   <li>Choice A</li>
   <li>Choice B
      <ul>
         <li>Sub 1</li>
         <li>Sub 2</li>
      </ul>
   </li>
</ul>

Ostia

Your examples are not the same. The second example with "Choice A", "Choice B", "Sub 1", "Sub 2" does not work for the dt/dd tags which are paired. Also the inherent style (and the tabulation, I suspect) merely comes from the default browser stylesheet, so that's not saying much. I would treat it like a semantic element; if you have a list of definitions, or perhaps if you just have pairs of title/description data, a dl could be a good choice. – Micahmicawber

Can you edit your comment to give equivalent examples - e.g. both to contain choice A and choice B with two sub-entries Sub 1 and Sub 2 for Choice B? – Stratification

Answer 7

What's not mentioned here is that option 1 allows you arbitrarily deep nesting of lists.

This shouldn't matter if you control the content/css, but if you're making a rich text editor it comes in handy.

For example, gmail, inbox, and evernote all allow creating lists like this:

With option 2 you cannot do that (you'll have an extra list item), with option 1, you can.

Doviedow

Option 1 produces invalid HTML. Five years ago when this question was asked that may not have been the case but it is now. – Unpleasant

Yes, it's definitely invalid HTML. However it's still used and is still useful for compatibility. The alternative is to fiddle with margins and bullet styles which may not be what you want when composing an email. – Doviedow

I am not sure I understand why I would want something misaligned as this. Can you edit your comment to give more meaningful usage for this? – Stratification

Importantly this allows free form editing for a group of bullets, giving it a more intuitive feel. As a user, if I have a list of bullets I might want to indent them and nest them under a new bullet. Without the ability to indent to arbitrarily the user would first need to insert the header bullet and then indent every bullet after. With the ability to arbitrarily indent, the user can indent the group of bullets and then insert a new header bullet. – Doviedow

I can confirm as of May 2023 this is how Google Docs structures indented <ol>'s and <ul>'s both in their markup and in their clipboard data. OP has a valid point. – Complaisance