链接<h>标记元素的标准</h>

Question

是：

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

或

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

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

Answer 1

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

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

  

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

Answer 2

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

Answer 3

在这种特殊情况下没有太大区别。有一些事情需要指出：

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

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

Answer 4

另外注意，虽然前一种情况有效，但纯粹是因为浏览器是允许的。您可以通过检查

的内部dom树找到

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

进入

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

这可以创建有趣的结果。 ;）