How do we create lists of lists?


#1

Can we make a list of lists by nesting the <ul> (<ol>) element in a <ul>(<ol>) element? If yes, then should we add it using <li> tags?


#2

In HTML, lists within lists must be contained in an LI in the parent list…

<ul>
  <li>Ordered List A
    <ol>
      <li>a</li>
      <li>b</li>
      <li>c</li>
    </ol>
  </li>
  <li>Ordered List B
    <ol>
      <li>d</li>
      <li>e</li>
      <li>f</li>
    </ol>
  </li>
  <li>End of list</li>
</ul>

which will render as,

  • Ordered List A
    1. a
    2. b
    3. c
  • Ordered List 2
    1. d
    2. e
    3. f
  • End of list

#3

Thank you very much!:smile:


#4

A silent rule to keep in mind is that and OL or UL can only contain LI, and nothing else, including UL or OL.

<ul>
  <ul>

…is invalid.

<ul><li>
  <ul><li>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </li></ul>
</li></ul>

That is, the only allowed direct children of a list container are list items.


#5

Thanks, it was really nice of you to tell me more than I asked:]