Empty UL Inside LI Element

Question

Can someone explain to me why the element <ul>cannot be empty?

And why is 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>

displayed as follows:

• Job
  • New
    • ungrouped
      • Offline

Answer 1

<ul>is not a valid self-closing tag, so browsers can treat it as if it weren’t closed properly. You should always use a closing tag </ul>.

List of valid self-closing tags:

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

Answer 2

What will be the sound of one palm?

, HTML - .

, .

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

, HTML Compatible XHTML , EMPTY (.. , HTML) ( ) .

Answer 3

() XML-. :

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

.: <span />?