Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can I use a div inside a list item?

Why is the following code valid when I am using a <div> inside a <li>?

<ul>     <li class="aschild">         <div class="nav">Test</div>     </li> </ul> 
like image 268
Manish Basdeo Avatar asked Jun 23 '11 05:06

Manish Basdeo


People also ask

Can I have a div inside a UL?

"div's inside ul's are totally legit in html5 and you won't be hurting anything, its honestly that easy.

Can you put a div inside a li tag?

There are a lot of people that say a division inside a list item is incorrect, but according to the W3C validator it is perfectly fine.

What elements can go inside a UL?

HTML ul element can reside within APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH.


2 Answers

Yes you can use a div inside a li and it will validate.

<!ELEMENT li %Flow;> <!ENTITY % Flow "(#PCDATA | %block; | form | %inline; | %misc;)*"> <!ENTITY % block     "p | %heading; | div | %lists; | %blocktext; | fieldset | table"> 
like image 101
Jawad Avatar answered Nov 08 '22 13:11

Jawad


Inside a <li> you can have anything you could naturally put inside a <div>. They are no different in this sense.

It should be valid in HTML4, XHTML and HTML5 as well.

This is NOT valid though (so the sources you found about "no divs in lists" could refer to this situation):

<ul>     <li></li>     <div></div>     <li></li> </ul> 

So: Lists (ul, ol) can only have lis as their children. But lis can have anything as their children.

like image 35
kapa Avatar answered Nov 08 '22 13:11

kapa