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

Is this HTML or XHTML? This is an area where they differ. – Donal Fellows May 20 '10 at 12:46 — Donal Fellows, May 20 '10 at 12:46

score 7 · Accepted Answer · edited May 23 '17 at 12:19

7

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

edited May 23 '17 at 12:19

Community

1
1

answered May 20 '10 at 12:42

Andy E

338,112
86
474
445

Actually, this will work:
. So, it can be empty, but not without the closing tag
– zorglub76 May 20 '10 at 12:57
1

Browsers do not seem to be bothered by empty ULs but the w3c validator will give a "Line n, Column n: end tag for "ul" which is not finished" error. – rob Oct 21 '13 at 08:03

score 3 · Answer 2 · answered May 20 '10 at 12:44

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.

That's because browsers are designed to cope with vast amounts of crap written by people who don't know HTML. — Quentin, May 20 '10 at 13:05

score 1 · Answer 3 · edited May 23 '17 at 12:01

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

edited May 23 '17 at 12:01

Community

1
1

answered May 20 '10 at 12:41

Kobi

135,331
41
252
292

1

In this case, "usually" means at least Firefox, Safari, Opera, Chrome and IE8... :) – zorglub76 May 20 '10 at 12:51
@zorglub76 - I never tested it, but the question I linked suggests it will work well with a different mime type: `text/xml` instead of `text/html` - which most servers serve. – Kobi May 20 '10 at 12:56

Empty UL inside LI element

3 Answers3