Can I use div as a direct child of UL?
I'm 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
Solution 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.
Solution 2:
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
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">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</li>
<ul>
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
<ul>
<li>
<div></div>
</li>
</ul>
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