I'm having this code:


I feel no issue in my browser rendering it. I have read this too somewhere that li should only be used as direct child of ul.

Is this correct? Can't I use div as a direct child of UL? Is there any documentation for the above confusion?

Edit: This link says I can http://css-tricks.com/forums/discussion/11593/divs-inside-uls/p1

Solution 1

No. The only element that may be a child of <ul> is <li>.


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

(See also how to read a content model definition in a DTD)


Content model: Zero or more li elements.

Solution 2

For HTML 5 :


Permitted contents

Zero or more li elements

For HTML 4 :


<!ELEMENT UL - - (LI)+


I forget the other HTML5 :D (which have the same specification on this than the W3C's one)


Solution 3

No the div cannot be nested inside the element, only < li> can be used as child element. instead of wrapping div inside ul element. you can do something like this

<ul class="class1">
 <li class="child1">

Solution 4

you can use div tag under like this ul-> li -> div because you can only use li tag after the ul tag ,your code will be run fine but there would be validation error

so you can use like this


Solution 5

No. If you want valid markup a div should never be inside a , sorry. Some modern browsers will "autoclose" the ul tag before you open the div so watch out for that

Solution 6

The HTML unordered list element <ul> represents an unordered list of items, namely a collection of items that do not have a numerical ordering, and their order in the list is meaningless. Typically, unordered-list items are displayed with a bullet, which can be of several forms, like a dot, a circle or a squared. The bullet style is not defined in the HTML description of the page, but in its associated CSS, using the list-style-type property.

Permitted content:

zero or more <li> elements