哪个更正确：<h1><a>...</a></h1> 或 <a><h1>...</h1></a>

Question

<h1><a ...> ... </a></h1> 和 <a ...><h1> ... </h1></a> 有效的 HTML，还是只有一个正确？如果它们都正确，它们的含义是否不同？

原文由 knokio 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

两个版本都是正确的。它们之间最大的区别在于 <h1><a>..</a></h1> 只有标题中的文本可以点击。

If you put the <a> around the <h1> and the css display property is block (which it is by default) the entire block ( <h1> 的高度和 <h1> 所在容器宽度的 100%）将是可点击的。

过去，您不能将块元素放入内联元素中，但 HTML5 不再如此。我认为 <h1><a>..</a></h1> 方法更传统。

如果您想在标题上放置锚点，比 <a id="my-anchor"><h1>..</h1></a> 更好的方法是使用 id 或 name 属性: <h1 id="my-anchor">..</h1> 或 <h1 name="my-anchor">..</h1>

原文由 Marco 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

在 HTML 5 之前的这个

<a><h1>..</h1></a>

不会验证。您可以在 HTML 5 中使用它。但是，我会使用它：

 <h1><a>..</a></h1>

除非你需要在 中添加多个

原文由 vaidas 发布，翻译遵循 CC BY-SA 3.0 许可协议