Empty UL inside LI element

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

---

<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:

What are all the valid self-closing elements in XHTML (as implemented by the major browsers)?

---

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.

---

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 />?