I know that it is not allowed to nest div in li in HTML5, although you can and it works. Does that mean I shoudn't use it? What is the standard about nesting divs in dls?
It is perfectly allowed to nest <div> elements in <li> and <dd> elements. <li> / <dd> elements may contain flow content, which <div> elements are.
div elements are allowed inside of dl elements? What? The spec defines it as follows: In order to annotate groups with microdata attributes, or other global attributes that apply to whole groups, or just for styling purposes, each group in a dl element can be wrapped in a div element.
<li> means an item in a list and that lets parsers (browsers, search engines, spiders) know that you're listing items. You can use DIV instead of LI but those parsers would never know that those items are being listed and DIV does not really describe anything except that it's a block.
Yes you can use a div inside a li and it will validate.
This information is incorrect - div
elements are regarded flow content
and are very well allowed inside li
elements. You might have confused it with ul
/ol
elements, which may only contain li
s accordingly.
What has changed in HTML5 is, that it does not have block-level and inline elements anymore. Instead there is a more complex distinction of the elements into several categories.
To see what is allowed inside an element according to HTML5, see the description of the specific tag where the section "Content model" tells you which content is allowed inside this particular element.
(according to HTML living standard as of 2019-07-30)
There are several types of lists - the most common ones are unordered (ul
), and ordered (ol
) lists. ul
and ol
are the "container" elements that only hold list item (li
) as child elements - no other elements are allowed*. The li
element itself can contain arbitrary flow content.
* (technically they are also allowed to hold "script-supporting" elements
<ol>
<li></li>
...more li elements
</ol>
<ul>
<li></li>
...more li elements
</ul>
For description lists (dl
) there used to be the same restriction that they can only contain their respective child elements dt
and dd
, but recent changes allow div
child elements as well, as long as those div
s themselves contain a dt
or dd
.
<dl>
<dt>term</dt><dd>description</dd>
</dl>
// the following is now valid as well:
<dl>
<div><dt>term</dt><dd>description</dd></div>
</dl>
As a mnemonic: Container elements should only contain their respective child elements and those child elements can contain any content you like.
It is perfectly allowed to nest <div>
elements in <li>
and <dd>
elements. <li>
/<dd>
elements may contain flow content, which <div>
elements are.
Specification: http://www.w3.org/TR/html5/grouping-content.html#the-li-element
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