如何在 Web 标准中混合链接（ <a> 标签）和标题（ <h1> 标签）？答案

【问题标题】：how to mix links ( <a> tag ) and headings ( <h1> tag ) in web standard?如何在 Web 标准中混合链接（ <a> 标签）和标题（ <h1> 标签）？
【发布时间】：2009-07-15 00:25:05
【问题描述】：

根据网络标准创建带有标题 1 的链接的正确代码是什么？

是吗

<h1><a href="http://stackoverflow.com"> stackoverflow </a></h1>

或

<a href="http://stackoverflow.com"><h1> stackoverflow </h1></a>

谢谢

【问题讨论】：

标签： html web-standards

【解决方案1】：

根据网络标准，您不得将块元素放入内联元素中。

由于h1 是块元素，a 是内联元素，所以正确的做法是：

<h1><a href="#">This is a title</a></h1>

这是一个链接，您可以了解更多信息：w3 Visual formatting model

但是，有一个例外，在 HTML5 中，在锚标记中包装块级元素（如 div、p 或 h*）是有效的。在锚点以外的内联元素中包装块级元素仍然违反标准。

【讨论】：

在 HTLM5 中这已经改变。这两个示例都将验证 - validator.w3.org。
不错的一个。这是一个容易犯的错误，虽然两者都将验证其逻辑性，即自然内联元素应该是块级元素的后代。
@pushplaybang - 我会说将标题包装在链接中更具语义，除非只有部分标题应该是可点击的（我想不出一个用例）。无论如何，html5 都支持这两种方式都很好。

【解决方案2】：

HTML5 更新了这个主题：现在可以用 A 包装块级元素，如另一个问题所述：https://stackoverflow.com/a/9782054/674965 和这里：http://davidwalsh.name/html5-elements-links

【讨论】：

这个答案现在比接受的答案更相关
@JoshDavenport 已接受的答案已更新以反映这一点

【解决方案3】：

a > h1会导致选择文字困难

由于两者在 HTML5 中都完全有效，最好使用h1 > a

【讨论】：

【解决方案4】：

据我了解，HTML5 确实允许您将块级元素包装在链接标签中。但是，错误可能会出现在较旧的浏览器中。我在 Firefox 3.6.18 中遇到了这个问题，并将 moz-rs-heading="" 插入到我的代码中。因此，我的风格打破了。如果您关心解决方法，则可以将链接标签包装在 div 中。下面提供了一个更好的解释为什么附加代码可以工作http://oli.jp/2009/html5-block-level-links/

【讨论】：