[html] Is div inside list allowed?

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?

This question is related to html validation xhtml html-lists

The answer is


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).


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 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'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!


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.


Examples related to html

Embed ruby within URL : Middleman Blog Please help me convert this script to a simple image slider Generating a list of pages (not posts) without the index file Why there is this "clear" class before footer? Is it possible to change the content HTML5 alert messages? Getting all files in directory with ajax DevTools failed to load SourceMap: Could not load content for chrome-extension How to set width of mat-table column in angular? How to open a link in new tab using angular? ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment

Examples related to validation

Rails 2.3.4 Persisting Model on Validation Failure Input type number "only numeric value" validation How can I manually set an Angular form field as invalid? Laravel Password & Password_Confirmation Validation Reactjs - Form input validation Get all validation errors from Angular 2 FormGroup Min / Max Validator in Angular 2 Final How to validate white spaces/empty spaces? [Angular 2] How to Validate on Max File Size in Laravel? WebForms UnobtrusiveValidationMode requires a ScriptResourceMapping for jquery

Examples related to xhtml

How to refresh table contents in div using jquery/ajax Uses for the '&quot;' entity in HTML The entity name must immediately follow the '&' in the entity reference Can I save input from form to .txt in HTML, using JAVASCRIPT/jQuery, and then use it? How to vertically align a html radio button to it's label? Image height and width not working? Removing border from table cells Enable & Disable a Div and its elements in Javascript how to remove the bold from a headline? How to make div occupy remaining height?

Examples related to html-lists

How to markdown nested list items in Bitbucket? how do I get the bullet points of a <ul> to center with the text? Is there a way to make numbers in an ordered list bold? How to center an unordered list? How do I set vertical space between list items? Removing "bullets" from unordered list <ul> jQuery load first 3 elements, click "load more" to display next 5 elements How can I disable a specific LI element inside a UL? UL has margin on the left How to display an unordered list in two columns?