Empty UL inside LI element

Question

Can anyone explain me why <ul> elementa cannot be empty?

And why this HTML:

<ul>
    <li class="header">
        <a href="#">Work</a>
        <ul/>
    </li>
    <li class="header">
        <a href="#">New</a>
        <ul/>
    </li>
    <li class="header">
        <a href="#">Ungrouped</a>
        <ul/>
    </li>
    <li class="header">
        <a href="#">Offline</a>
        <ul/>
    </li>
</ul>

is rendered like this:

• Work
  • New
    • Ungrouped
      • Offline

Answer 1

Because browsers (usually) don't support self closing XML-style tags. This will work:

<ul>
    <li class="header">
        <a href="#">Work</a>
        <ul></ul>
    </li>
    <li class="header">
        <a href="#">New</a>
        <ul></ul>
    </li>
    <li class="header">
        <a href="#">Ungrouped</a>
        <ul></ul>
    </li>
    <li class="header">
        <a href="#">Offline</a>
        <ul></ul>
    </li>
</ul>

For more details see: Can a span be closed using <span />?

Answer 2

<ul> is not a valid self-closing tag, so browsers may treat it as though it has not been closed properly. You should always use a closing </ul> tag.

For a list of valid self-closing tags, see:

http://stackoverflow.com/questions/97522/what-are-all-the-valid-self-closing-tags-in-xhtml-as-implemented-by-the-major-br

Answer 3

What is the sound of one hand clapping?

A list with zero items in it doesn't make sense from a document point of view, and HTML is a document markup language.

The specification therefore defines a list as requiring at least one list item in it.

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

As for your second question, in HTML Compatible XHTML only elements which are defined as being EMPTY (i.e. those in which the end tag is forbidden in HTML) may (and must) use self-closing tag syntax.