Can I use div as a direct child of UL?

Question

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

Socio

You should put your div tag inside an li tag – Matildamatilde

Regarding your edit: that link says you can't. – Bouffe

"div's inside ul's are totally legit in html5 and you won't be hurting anything, its honestly that easy. You can even wrap block elements in anchor tags, its craaaaazzzy awesome." I found this comment there. – Socio

@RockySingh From that same post: "edit: I jumped the gun with my endorsement, a div directly inside a ul is incorrect, but a div inside an li is completely valid. Thank wolfcry for clarification." – Bouffe

What you have to consider here is why you would want to do that. If the piece of content is a list item, put it in an <li> and let CSS handle how you want it; if it's not a list item, what is it doing in a list? Should it possibly come after or before the list? – Yare

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.

Cleasta

"Zero or more li elements." By this you mean to say "li"'s 0 or more elements and NOT other tags. – Socio

@RockySingh That's implied, it would otherwise mention the other valid children. – Bouffe

It's been updated to "Zero or more li and script-supporting elements", where script-supporting elements means <script> or <template>. So, yeah, if they're explicitly saying <script> is allowed, fair to say nothing else is allowed (I think the practical issues are things like consistency in how screen readers count the number of items in the list) – Newsom

Answer 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

Bor

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

Doscher

you can also nest <div> inside the <li> – Doscher

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

Aniseikonia

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

Themis

Answer 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

Foetus