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

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