Can I use div as a direct child of UL?
HtmlCssHtml Problem Overview
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
Html Solutions
Solution 1 - Html
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 - Html
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 - Html
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 4 - Html
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 5 - Html
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 - Html
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