I know that DIV inside LI isn't allowed, but I've seen it lately on many "big" websites like Smashing Magazine, Web Designer Wall... etc.
I tried to validate sites, and they have errors, but nothing about DIV in LI?!
So can I use it inside LI, and I need it to be valid?
Yes it is valid according to xhtml1-strict.dtd. The following XHTML passes the validation:
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
</head>
<body>
<ul>
<li><div>test</div></li>
</ul>
</body>
</html>
As an addendum: Before HTML 5 while a div inside a li is valid, a div inside a dl, dd, or dt is not!
If you look at xhtml1-strict.dtd, you'll see
<!ELEMENT li %Flow;>
<!ENTITY % Flow "(#PCDATA | %block; | form | %inline; | %misc;)*">
<!ENTITY % block
"p | %heading; | div | %lists; | %blocktext; | fieldset | table">
Thus div, p etc. can be inside li (according to XHTML 1.0 Strict DTD from w3.org).
If I recall correctly, a div inside a li used to be invalid.
@Flower @Superstringcheese Div should semantically define a section of a document, but it has already practically lost this role. Span should however contain text.
I see you would want to do this if you wanted to make, say, the whole box of a menu item clickable. I used to insert an 'li' tag in 'a' tags to do this but this seems more valid.
I'm starting in the webdesign universe and i used DIVs inside LIs with no problem with the semantics. I think that DIVs aren't allowed on lists, that means you can't put a DIV inside an UL, but it has no problem inserting it on a LI (because LI are just list items haha) The problem that i have been encountering is that sometimes the DIV behaves somewhat different from usual, but nothing that our good CSS can't handle haha. Anyway, sorry for my bad english and if my response wasn't helpful haha good luck!
