Can I use div as a direct child of UL?

Question

I am having this code:

<ul>
    <div>
   </div>
</ul>

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

Answer 1

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

HTML 4:

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

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

HTML 5:

Content model: Zero or more li elements.

Answer 2

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

 <ul>
     <li>
         <div></div>
     </li>
 </ul>

Answer 3

For HTML 5 :

http://www.w3.org/TR/html-markup/ul.html

Permitted contents

Zero or more li elements

For HTML 4 :

http://www.w3.org/TR/html401/struct/lists.html#h-10.2

<!ELEMENT UL - - (LI)+

EDIT :

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

http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-ul-element

Answer 4

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

Answer 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

Answer 6

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">
   <ul>
     <li>item1</li>
     <li>item2</li>
     <li>item3</li>
   </ul>
 </li>
<ul>