两种HTML嵌套列表写法的正确性与语义差异探究

写法一（合规示例） #

<ol>
  <li><p>List item 1.</p></li>
  <li>
    <p>List item 2.</p>
    <p>Paragraph 2.</p>
    <ul>
      <li><p>Nested-list item 1.</p></li>
      <li>
        <p>Nested list item 2.</p>
        <p>Paragraph 2.</p>
      </li>
    </ul>
  </li>
</ol>

写法二（不合规示例） #

<ol>
  <li><p>List item 1.</p></li>
  <li>
    <p>List item 2.</p>
    <p>Paragraph 2.</p>
  </li>
  <ul>
    <li><p>Nested-list item 1.</p></li>
    <li>
      <p>Nested list item 2.</p>
      <p>Paragraph 2.</p>
    </li>
  </ul>
</ol>

合规性判断 #

1. 写法一完全合规：
   HTML规范明确要求，<ol>/<ul>这类列表元素的直接子元素只能是<li>，而<li>内部可以包含任意块级内容（包括另一个列表）。这里的<ul>是第二个<li>的子元素，完全符合结构规则。

2. 写法二不合规：
   它将<ul>直接作为<ol>的子元素，违反了列表元素的结构约束——<ol>的直接子节点必须是<li>，不能是其他列表元素。虽然浏览器会自动修复这种错误（比如自动给<ul>包裹一个<li>），但原始代码属于无效HTML。

语义差异 #

• 写法一的语义：嵌套的<ul>是第二个列表项的从属内容，说明该子列表是对“List item 2”的补充、细分，二者存在明确的包含与被包含关系。
• 写法二的语义（修复后）：浏览器会自动生成一个<li>包裹<ul>，此时这个<ul>会变成<ol>的第三个列表项的子内容，和前两个列表项是同级关系，完全偏离了“子列表从属第二个列表项”的原始意图，语义上和写法一完全不同。

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