含address的锚点HTML正常，包裹<p>后失效的原因与合法性咨询

首先明确两个关键的HTML规范细节：

• <a> 标签在HTML5里是透明容器，只要内部不嵌套其他交互式元素（比如另一个<a>、<button>），完全可以容纳块级元素（包括<address>），所以你最初的代码是完全合法的。
• <p> 标签的内容模型是短语内容，只能放内联元素（比如<span>、<strong>这类），不管是直接还是间接嵌套块级元素，都是不符合规范的。

为什么加了<p>就出问题？ #

浏览器的HTML解析器有一套错误修正机制，当遇到不符合规范的嵌套时，会自动调整DOM结构来修复错误。你把包含<address>（块级元素）的<a>放进<p>里，<p>不允许内部存在块级元素，所以浏览器会直接把<address>移到<p>外面，同时提前闭合<p>和<a>，导致你在DevTools里看到的结构和手写的完全不一样。

换成内联元素后没问题，是因为内联元素符合<p>的内容要求，浏览器不需要做任何修正。

代码对比 #

合法的原始代码：

<a href="#">
  <span>label</span>
  <address>
    address detail
  </address>
</a>

不符合规范的包裹代码（会被浏览器修正）：

<p>
  <a href="#">
    <span>label</span>
    <address>
      address detail
    </address>
  </a>
</p>

浏览器最终生成的实际DOM结构大致是：

<p>
  <a href="#">
    <span>label</span>
  </a>
</p>
<address>
  address detail
</address>
<a href="#"></a>

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