Can I use div as a direct child of UL?

HtmlCss

Html 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>.

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 - 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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionRocky SinghView Question on Stackoverflow
Solution 1 - HtmlQuentinView Answer on Stackoverflow
Solution 2 - HtmlShikiryuView Answer on Stackoverflow
Solution 3 - Htmljitendra varshneyView Answer on Stackoverflow
Solution 4 - HtmlRaBzView Answer on Stackoverflow
Solution 5 - HtmlAndyView Answer on Stackoverflow
Solution 6 - HtmlAhsan KhurshidView Answer on Stackoverflow