链接 <h> 标签元素的标准答案

【问题标题】：The Standard For Linking <h> Tag Elements链接 <h> 标签元素的标准
【发布时间】：2010-09-23 10:17:19
【问题描述】：

是：

<a href="#"><h1>text here</h1></a>

或

<h1><a href="#">text here</a></h1>

“正确”。使用第一个有什么好处吗，对我来说似乎更合乎逻辑。也许从 SEO 的角度来看？

【问题讨论】：

标签： html

【解决方案1】：

<h1><a href="#">text here</a></h1>

是正确的，因为 HTML 不允许内联元素 (<a>) (src) 中包含块元素 (<h1>)。您的第一个示例将失败 validation。

通常，块级元素可能包含内联元素和其他块级元素。通常，内联元素可能只包含数据和其他内联元素。这种结构区别的内在想法是块元素创建比内联元素“更大”的结构。

【讨论】：

【解决方案2】：

您的第二个示例是唯一允许的结构。第一个将块级元素放在内联元素中，而 HTML 不允许这样做。浏览器可能允许它，但它不是有效的 HTML。

【讨论】：

【解决方案3】：

在这种特殊情况下并没有太大区别。不过有几点需要指出：

<h*> 是块元素，<a> 默认是内联元素。正如其他人指出的那样，XHTML 不允许块元素在内联元素中，所以如果你没有在 CSS 中重新定义它们的显示样式，<a><h1></h1></a> 是无效的。
<a href="#"><h1>text here</h1></a> 是一个可以有多个子节点的链接。在这种情况下，它只有一个 <h1> 子节点，但没有什么能阻止您添加更多。
另一方面，<h1><a href="#">text here</a></h1> 是可以嵌入多个节点的标头。您可以向其添加各种子节点，例如标签等。

所以这基本上是一个逻辑上的差异，在这种特殊情况下没有任何实际差异。

【讨论】：

【解决方案4】：

补充说明，虽然前一种情况有效，但纯粹是因为浏览器允许。您可以通过检查内部 dom 树发现

 <a><h1>foo</h1></a>

被闯入

 <a></a>
 <h1><a>foo</a></h1>
 <a></a>

这可以产生有趣的结果。 ;)

【讨论】：