Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
625 views
in Technique[技术] by (71.8m points)

html - HTML5 standards of nesting div in li or dl

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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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

EDIT: addressing the confusion in the comments about list elements

(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 divs 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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...