Html 'ul' 元素永远不能是 'p' 元素的子元素

An 'ul' element can never be a child of a 'p' element

提问by RK Poddar

Why can we never have a ulelement as the child of a pelement?

为什么我们永远不能有一个ul元素作为元素的子p元素？

I made a web page with the following code

我用以下代码制作了一个网页

<p> some text
<ul>
<li>...</li>
<li>...</li>
.
.
.
</ul>
</p>

Here, the ulelement is a child of the p element. However, in all major browsers (Chrome, Firefox, and Internet Explorer - all latest versions), it gets interpreted as follows

这里，ul元素是 p 元素的子元素。但是，在所有主要浏览器（Chrome、Firefox 和 Internet Explorer - 所有最新版本）中，它的解释如下

<p> some text</p>
<ul>
<li>...</li>
<li>...</li>
.
.
.
</ul>
<p></p>

I checked it by right-clicking on the ulelement (in Chrome) and selecting the inspect element option. I saw it in Chrome, but the other two browsers also behaved in the same way (CSS selecter 'p ul' didn't work well).

我通过右键单击ul元素（在 Chrome 中）并选择检查元素选项来检查它。我在 Chrome 中看到了它，但其他两个浏览器的行为也相同（CSS 选择器 'p ul' 效果不佳）。

Why is it so? Is there a general case in which such changes by the browser takes place?

为什么会这样？是否存在浏览器发生此类更改的一般情况？

回答by kapa

Please check the HTML specification, which clearly states that putting lists in a paragraph element is forbidden, and also give some examples on what could be done:

请检查HTML 规范，其中明确指出禁止将列表放在段落元素中，并给出一些可以做什么的示例：

List elements (in particular, ol and ul elements) cannot be children of p elements. When a sentence contains a bulleted list, therefore, one might wonder how it should be marked up.

For instance, this fantastic sentence has bullets relating to

• wizards,
• faster-than-light travel, and
  
• telepathy,

and is further discussed below.

The solution is to realise that a paragraph, in HTML terms, is not a logical concept, but a structural one. In the fantastic example above, there are actually five paragraphs as defined by this speciication: one before the list, one for each bullet, and one after the list.

The markup for the above example could therefore be:

  <p>For instance, this fantastic sentence has bullets relating to</p> 
   <ul>
       <li>wizards,  
       <li>faster-than-light travel, and  
       <li>telepathy, 
   </ul>
   <p>and is further discussed below.</p>

Authors wishing to conveniently style such "logical" paragraphs consisting of multiple "structural" paragraphs can use the div element instead of the p element.

Thus for instance the above example could become the following:

   <div>For instance, this fantastic sentence has bullets relating to
   <ul>
     <li>wizards,  
     <li>faster-than-light travel, and  
     <li>telepathy,
   </ul> 
   and is further discussed below.</div> 

This example still has five structural paragraphs, but now the author can style just the div instead of having to consider each part of the example separately.

列表元素（特别是 ol 和 ul 元素）不能是 p 元素的子元素。因此，当一个句子包含一个项目符号列表时，人们可能想知道应该如何标记它。

例如，这个奇妙的句子有与

• 巫师，
• 超光速旅行，以及
  
• 心灵感应，

并在下面进一步讨论。

解决方案是认识到段落，在 HTML 术语中，不是一个逻辑概念，而是一个结构概念。在上面的奇妙示例中，本规范定义了五个段落：一个在列表之前，一个用于每个项目符号，一个在列表之后。

因此，上述示例的标记可能是：

  <p>For instance, this fantastic sentence has bullets relating to</p> 
   <ul>
       <li>wizards,  
       <li>faster-than-light travel, and  
       <li>telepathy, 
   </ul>
   <p>and is further discussed below.</p>

希望方便地设置由多个“结构”段落组成的“逻辑”段落的样式的作者可以使用 div 元素而不是 p 元素。

因此，例如上面的例子可能变成以下：

   <div>For instance, this fantastic sentence has bullets relating to
   <ul>
     <li>wizards,  
     <li>faster-than-light travel, and  
     <li>telepathy,
   </ul> 
   and is further discussed below.</div> 

这个例子仍然有五个结构段落，但现在作者可以只设置 div 的样式，而不必单独考虑例子的每个部分。

回答by Jukka K. Korpela

It has always been a rule in HTML that a pelement can contain only text and text-level markup, not a list for example. Therefore, browsers imply a closing </p>tag when a pelement is open and a start tag for a block level element, like <ul>, is encountered. In your example, the </p>tag after </ul>is homeless and normally ignored.

HTML 中一直有一条规则，即p元素只能包含文本和文本级别的标记，例如不能包含列表。因此，</p>当p元素处于打开状态并且<ul>遇到块级元素的开始标记（例如 ）时，浏览器会暗示结束标记。在你的例子中，</p>后面的标签</ul>是无家可归的，通常被忽略。

回答by Sirko

<p>can have only inline elements as childs and no block elements (see, e.g, at MDN). <ul>on the other hand is a block level element (MDN)!

<p>只能有内联元素作为子元素，不能有块元素（参见，例如，在MDN）。<ul>另一方面是块级元素（MDN）！

The reason why browser interpret your code as you have seen lies in the HTML5 parsing spec. The spec lists an example very much like your own: whatwg link.

浏览器解释您的代码的原因在于 HTML5 解析规范。规范列出了一个非常像您自己的示例：whatwg link。

Another interesting related question might be this: HTML: Include, or exclude, optional closing tags?

另一个有趣的相关问题可能是：HTML：包含或排除可选的结束标记？