Is Anything Except Li's Allowed in a Ul

Is anything except LI's allowed in a UL?

According to the HTML 4 specs, the XHTML 2 specs and the HTML 5 specs that code is invalid.

HTML 4

<!ELEMENT UL - - (LI)+

This means that inside a <ul> there can only be multiple <li> elements.

XHTML

Both types of lists (ul|ol) are made up of sequences of list items defined by the li element.

HTML 5

Content model:

Zero or more li and script-supporting elements.

Note that script-supporting elements are elements that are not rendered, and currently include only <script> and <template>.

Can we use any other TAG inside ul along with li ?

For your code to be valid you can't put any tag inside a <ul> other than an <li>.

You can however, put any block level element inside the <li>, like so:

<ul>
        <li>
            <h2>...</h2>
            <p>...</p>
            <p>...</p>
        </li>
</ul>

Could i use a in ul around li

Use CSS to make the link take up the entire list item, eg. display: block (and any other styling you might want).

Wrapping links around list items is invalid HTML.

HTML5 - Does li have to be inside of ul ?

Straight from the W3 HTML5 Spec (This is a candidate spec, I'd actually recommend
kazagistar's W3 link which includes the <menu> element too.):

4.5.7 The li element

Categories:
None. Contexts in which this element can be used:
Inside ol elements.
Inside ul elements.

The li element represents a list item. If its parent element is an ol, or ul, then the element is an item of the parent element's list, as defined for those elements. Otherwise, the list item has no defined list-related relationship to any other li element.

The W3 Spec shows that you should only use a list item element when it's inside an ordered or unordered list element or a menu element.

correct semantics for ul in ul

You must wrap every inner ULs with an LI, i.e.

<ul class="menu">
    <li>
        <a href="">Uutiset</a>
    </li>
    <li> <----
        <ul class="inside">
            <li><a href="">Fringilla Condimentum</a></li>
            <li><a href="">Lorem</a></li>
        </ul>
    </li> <----
 </ul>      

nesting other html tags inside ul except li

No

According to the spec, the ul element is:

The ul element represents a list of items, where the order of the items is not important — that is, where changing the order would not materially change the meaning of the document.

The items of the list are the li element child nodes of the ul element.

So the children of the UL element must be li elements.

More specifically, it says under the ul tag:

Content model:

   Zero or more li elements.

It is however, perfectly legal to do:

<ul class="site-title left">
   <li><span><h1>site-title</h1></span></li>
</ul>

---

Related Topics