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

"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. — Rocky Singh, Aug 01 '12 at 08:51
@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." — , Aug 01 '12 at 08:51
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 `

score 56 · Accepted Answer · answered Aug 01 '12 at 08:44

56

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.

answered Aug 01 '12 at 08:44

Quentin

914,110
126
1,211
1,335

"Zero or more li elements." By this you mean to say "li"'s 0 or more elements and NOT other tags. – Rocky Singh Aug 01 '12 at 08:48
5

@RockySingh That's implied, it would otherwise mention the other valid children. – Aug 01 '12 at 08:51
It's been updated to **"Zero or more `li` and [script-supporting](https://html.spec.whatwg.org/multipage/dom.html#script-supporting-elements-2) elements"**, where script-supporting elements means ` – user56reinstatemonica8 Jun 01 '22 at 10:53

score 8 · Answer 2 · answered Aug 01 '12 at 08:45

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

jitendra varshney · Answer 3 · 2017-09-16T04:54:47.097

5

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>

edited Sep 16 '17 at 04:54

answered Feb 24 '17 at 12:28

jitendra varshney

3,484
1
21
31

score 5 · Answer 4 · answered Apr 04 '17 at 05:11

5

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>

answered Apr 04 '17 at 05:11

RaBz

135
1
5

you can also nest
inside the

– RaBz May 24 '17 at 06:19

score 3 · Answer 5 · answered Aug 01 '12 at 08:44

3

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

answered Aug 01 '12 at 08:44

Andy

14,427
3
52
76

score 1 · Answer 6 · answered Aug 01 '12 at 08:47

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

Can I use div as a direct child of UL?

6 Answers6

Linked