Is div inside list allowed?
HtmlValidationXhtmlHtml ListsHtml Problem Overview
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?
Html Solutions
Solution 1 - Html
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>
Solution 2 - 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!
Solution 3 - Html
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).
Solution 4 - Html
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.
Solution 5 - Html
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.
Solution 6 - Html
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!