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>
"div's inside ul's are totally legit in html5 and you won't be hurting anything, its honestly that easy.
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.
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.
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">
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 li
s as their children. But li
s can have anything as their children.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With