哪一个更正确：< h1>< a> ...< / a>< / h1> OR< a>< h1> ...< / h1>< / a> [英] Which is more correct: <h1><a>...</a></h1> OR <a><h1>...</h1></a>

问题描述

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

解决方案

我更新这个答案，因为旧的有点不正确。

正确答案是两个版本都是正确的。它们之间最大的区别在于，在< h1>< a> ..< / a>< / h1> 的情况下，只有标题中的文字将可点击。

如果您将< a> 放在< h1> code>和css display 属性是 block （默认情况下）整个块（ < h1> 的高度以及< h1> 的容器宽度的100％将可点击。

从历史上看，您不能将块元素放入内联元素中，但HTML5不再是这种情况。我认为< h1>< a> ..< / a>< / h1>< / code>方法更传统。



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

Are both <h1><a ...> ... </a></h1> and <a ...><h1> ... </h1></a> valid HTML, or is only one correct? If they are both correct, do they differ in meaning?

解决方案

I'm updating this answer since the old one was a bit incorrect.

The correct answer is that both versions are correct. The biggest difference between them is that in the case of <h1><a>..</a></h1> only the text in the title will be clickable.

If you put the <a> around the <h1> and the css display property is block (which it is by default) the entire block (the height of the <h1> and 100% of the width of the container the <h1> resides in) will be clickable.

Historically you could not put a block element inside of an inline element, but this is no longer the case with HTML5. I would think that the <h1><a>..</a></h1> approach is more conventional though.

In the case where you want to put an anchor on the header, a better approach than <a id="my-anchor"><h1>..</h1></a> would be to use either the id or the name attribute like this: <h1 id="my-anchor">..</h1> or <h1 name="my-anchor">..</h1>

这篇关于哪一个更正确：< h1>< a> ...< / a>< / h1> OR< a>< h1> ...< / h1>< / a>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！