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

95

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

是吗

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

要么

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

谢谢

html web-standards

— 艾哈迈德
source

143

根据网络标准，不允许将块元素放入内联元素。

如同h1block元素和ainline元素一样，正确的方法是：

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

这是一个链接，您可以了解更多信息：w3视觉格式化模型

然而，有一个例外，在HTML5它是有效的包装块级元素（如div，p或h*在锚标签）。在除锚之外的其他内联元素中包装块级元素仍然违反标准。

— 达科Z
source

19

在HTLM5中，这已更改。这两个示例都将验证-validator.w3.org。

— Atadj

好一个。这是一个容易犯的错误，尽管两者都会验证其逻辑，即内联元素自然应该是块级元素的后代。

— bigmadwolf 2014年

@pushplaybang-我想说的是，将标头包装在链接中会更加语义化，除非标头中只有一部分是可单击的（我想不到用例）。无论如何，很好的是html5都支持。

— aaaaaa

47

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

— f055
source

8

这个答案现在比接受的答案更相关

— 约什-达文波特

@JoshDavenport接受的答案已经被更新，以反映

— 丹klasson

2

据我了解，HTML5确实允许您将块级元素包装在链接标记中。但是，错误可能会在较旧的浏览器中显示。我在Firefox 3.6.18中遇到了此问题，并在代码中插入了moz-rs-heading =“”。因此，我的风格破裂了。如果您关心解决方法，则可以将链接标记包装在div中。以下内容对附加代码为何起作用的原因提供了更好的说明：http://oli.jp/2009/html5-block-level-links/

— 基普事迹
source

1

a > h1 将导致选择文本时遇到困难

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

— 阿比舍克
source