W3C校验p结束标签无对应开放标签报错及块级元素嵌套规则咨询

你遇到的校验报错是HTML语法规则触发的，根源有两个：

1. <ol>有序列表的直接子元素只能是<li>列表项，不允许直接放置<p>元素
2. <p>段落是特殊块级元素，内部仅允许嵌套行内元素，不能嵌套<li>这类块级元素。浏览器解析到<li>标签时会自动隐式关闭前面未闭合的<p>，因此后续的</p>就找不到对应的开启标签，触发当前报错。

你提供的错误代码：

<ol>
<p>
    <li> <em> Markup </em>指的是具有特殊含义的文本，它会告知浏览器文本的展示样式和排布方式
</p> 此处提示该p闭合标签没有对应的开放标签
<p>
     <li> 没有内容的元素被称为"void elements"或"empty elements" 
</p>
</ol>

正确写法应该把<p>放到<li>内部，示例如下：

<ol>
    <li>
        <p><em> Markup </em>指的是具有特殊含义的文本，它会告知浏览器文本的展示样式和排布方式</p>
    </li>
    <li>
        <p>没有内容的元素被称为"void elements"或"empty elements"</p>
    </li>
</ol>

块级元素允许嵌套其他块级元素，但存在例外限制：

• 常规块级元素比如<div>、<section>、<article>、<ul>、<li>等，都可以嵌套其他块级元素，比如你可以在<div>里放置<p>、<ul>等结构
• 特殊块级元素仅允许嵌套行内元素，不能嵌套其他块级元素，最典型的就是<p>段落、<h1>~<h6>标题元素，这类元素内部如果出现块级标签，浏览器会自动隐式闭合该元素，进而引发语法错误

内容的提问来源于stack exchange，提问作者Programmer X