Does everything inside a have to be wrapped in an ?

Question

I need some guidance about nested lists in HTML.

I have a layout that I would like to be built like below. Is it a terrible thing to nest an element not wrapped by an <li>? I'm fairly sure that it is against standards, but don't know what ill effect it has.

<ul>
  <li>
    <h1>header 1</h1>
    <li>
       <ul>
         <li>nested</li>
         <li>list</li>
       </ul>
    </li>
  </li>
  <li>
    <h1>header 2</h1>
    <li>
       <ul>
         <li>nested</li>
         <li>list</li>
       </ul>
    </li>
  </li>
</ul>

Answer 1

LI is the only element allowed as child elements of UL. Here’s a snippet of the UL element definition:

<!ELEMENT UL - - (LI)+                 -- unordered list -->

And:

Both types of lists are made up of sequences of list items defined by the LI element (whose end tag may be omitted).

Answer 2

All immediate children of an <ul> or an <ol> must be <li>s. Likewise, the immediate parent of all <li>s must be an <ul> or an <ol>.

So, the <li>s in your example that are after the <h3>s shouldn't to be there. But otherwise, your example looks compliant.

When you have elements that aren't properly nested (breaking either of the above rules) there's no standard on how the browser will render it, so you greatly increase your chance of being majorly broken in some browsers.

Answer 3

As the people above have mentioned <li> is the only item that can be inside of a <ul> or <ol>. However, your example needs to be cleaned up also:

<ul>
  <li>
    <h1>header 1</h1>
    <!-- removed unneeded LI -->
    <ul>
      <li>nested</li>
      <li>list</li>
    </ul>
    <!-- removed unneeded closing LI -->
  </li>
  <li>
    <h1>header 2</h1>
    <!-- removed unneeded LI -->
    <ul>
      <li>nested</li>
      <li>list</li>
    </ul>
    <!-- removed unneeded closing LI -->
  </li>
</ul>

Answer 4

Yes, it's wrong. It's not valid HTML.

Answer 5

yes, they're required, as each list is a list of items (this relates directly to semantic HTML)

if you want headers between lists, you need to create seperate lists with the headers in between like this:

<div class="menu">
    <h1>menu 1</h1>
    <ul>
        <li>menu 1.1</li>
        <li>menu 1.2</li>
    </ul>
    <h1>menu 2</h1>
    <ul>
        <li>menu 2.1</li>
        <li>menu 2.2</li>
    </ul>
</div>

which'll lead to this:

menu 1

• menuitem 1.1
• menuitem 1.2

menu 2

• menuitem 2.1
• menuitem 2.2

then a thing about nested lists, a nested list is part of the list-item it belongs to. (have seen it done wrong way too many times.)

<ul>
    <li>menuitem 1
        <ul>
            <li>menuitem 1.1</li>
            <li>menuitem 1.2</li>
        </ul>
    </li>
    <li>menuitem 2
        <ul>
            <li>menuitem 2.1</li>
            <li>menuitem 2.2</li>
        </ul>
    </li>
</ul>

• menuitem 1
  • menuitem 1.1
  • menuitem 1.2
• menuitem 2
  • menuitem 2.1
  • menuitem 2.2

you can best compare it with the table of contents and the corresponding chapters in a book.

Answer 6

If you need a list element with a nested header, you can use

<dl>
 <dt>header</dt>
 <dd>Item 1</dd>
 <dd>Item 2</dd>
</dl>

This is nice as it keeps the code clean and semantic.

Just a thought.