{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 ゆ 、 Hurt° 的问题《Is div inside list allowed? [duplicate]》','https://www.manongdao.com/q-1175863.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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?
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.
As an addendum: Before HTML 5 while a div inside a li is valid, a div inside a dl, dd, or dt is not!
Yes it is valid according to
xhtml1-strict.dtd. The following XHTML passes the validation: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!
If you look at xhtml1-strict.dtd, you'll see
Thus
div,petc. can be insideli(according to XHTML 1.0 Strict DTD from w3.org).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.