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

Which is more correct: <h1><a>...</a></h1> OR <a><h1>...</h1></a>

提问by knokio

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?

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

采纳答案by Marco

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.

两个版本都是正确的。它们之间最大的区别是在<h1><a>..</a></h1>只有标题中的文本的情况下才会被点击。

If you put the <a>around the <h1>and the css displayproperty 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.

如果你把css属性放在<a>周围（默认情况下是这样），整个块（它的高度和所在容器的宽度的 100% ）将是可点击的。<h1>displayblock<h1><h1>

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.

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

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 idor the nameattribute like this: <h1 id="my-anchor">..</h1>or <h1 name="my-anchor">..</h1>

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

回答by vaidas

In pre HTML 5 this one

在 HTML 5 之前的这个

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

will not validate. You can use it in HTML 5. However, i would use this:

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

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

unless you need to add more than < h1 > inside the < a >

除非你需要在<a>里面添加多个<h1>

回答by pleasedontbelong

<a><h1></h1></a>is not W3C valid... Basically, you can't put block elementsinside inline elements

<a><h1></h1></a>不是 W3C 有效的......基本上，你不能将块元素放在内联元素中

回答by Jukka K. Korpela

<h1><a>..</a></h1>and <a><h1>..</h1></a>have always behaved almost the same, when style sheets do not affect the rendering. Almost, but not quite. If you navigate using the tab key or otherwise focus on a link, a “focus rectangle” appears around the link in most browsers. For <h1><a>..</a></h1>, this rectangle is around the link text only. For <a><h1>..</h1></a>, the rectangle extends across the available horizontal space, since the markup makes the aelement a block element in rendering, occupying 100% width by default.

<h1><a>..</a></h1>并且<a><h1>..</h1></a>一直表现得几乎相同，当样式表不影响渲染时。差不多，但不完全。如果您使用 Tab 键导航或以其他方式关注链接，则在大多数浏览器中，链接周围会出现“焦点矩形”。对于<h1><a>..</a></h1>，此矩形仅围绕链接文本。对于<a><h1>..</h1></a>，矩形在可用的水平空间上延伸，因为标记使a元素在渲染中成为块元素，默认情况下占据 100% 的宽度。

The following shows how a focused <a href=foo><h1>link</h1></a>is rendered by Chrome:

下面显示了<a href=foo><h1>link</h1></a>Chrome 是如何呈现焦点的：

This implies that if you style elements e.g. by setting a background color for links, the effects differ in a similar manner.

这意味着如果您为元素设置样式，例如通过为链接设置背景颜色，效果也会以类似的方式不同。

Historically, <a><h1>..</h1></a>was declared invalid in HTML 2.0, and subsequent HTML specifications followed suit, but HTML5 changes this and declares it as valid. The formal definition has not affected browsers, only validators. However, it is remotely possible that some user agents (probably not normal browsers, but e.g. specialized HTML renderers, data extractors, converters, etc.) fail to handle <a><h1>..</h1></a>properly, since it has not been allowed in the specifications.

从历史上看，<a><h1>..</h1></a>它在 HTML 2.0 中被声明为无效，随后的 HTML 规范也随之效仿，但 HTML5 改变了这一点并将其声明为有效。正式定义没有影响浏览器，只影响验证器。然而，一些用户代理（可能不是普通浏览器，但例如专门的 HTML 渲染器、数据提取器、转换器等）很可能无法<a><h1>..</h1></a>正确处理 ，因为规范中不允许这样做。

There is seldom a good reason to make a heading or text in a heading a link. (It's mostly illogical and bad for usability.) But a similar question has often arised when making a heading (or text in a heading) a potential destinationfor a link, using e.g. <h2><a name=foo>...</a></h2>versus <a name=foo><h2>...</h2></a>. Similar considerations apply to this (both work, there may be a difference since the latter makes the aelement a block, and before HTML5, only the former is formally allowed). But in addition, both ways are outdated, and using the idattribute directly on the heading element is now recommended: <h2 id=foo>...</h2>.

很少有充分的理由将标题或标题中的文本作为链接。（这通常是不合逻辑的，而且不利于可用性。）但是，当使用例如vs 将标题（或标题中的文本）作为链接的潜在目的地时，经常会出现类似的问题。类似的考虑适用于此（两者都有效，可能存在差异，因为后者使元素成为块，而在 HTML5 之前，仅正式允许前者）。但是另外，这两种方式都已经过时了，现在推荐直接在heading元素上使用属性：.<h2><a name=foo>...</a></h2><a name=foo><h2>...</h2></a>aid<h2 id=foo>...</h2>

回答by Sam152

H1 elements are block level elements, and anchors are inline elements. You are allowed to have an inline element within a block level element but not the other way around. When you consider the box model and the HTML spec this makes sense.

H1 元素是块级元素，锚点是行内元素。您可以在块级元素中包含内联元素，但反过来不行。当您考虑盒模型和 HTML 规范时，这是有道理的。

So in conclusion the best way is:

所以总而言之，最好的方法是：

<h1><a href="#">Link</a></h1>

回答by knittl

do you want to use a hyperlink <a href="…">/a:link, or do you want to add an anchor to your heading? if you want to add an anchor, you can simply assign an id <h1 id="heading">. you can then link it as page.htm#heading.

您要使用超链接<a href="…">/ a:link，还是要在标题中添加锚点？如果你想添加一个锚点，你可以简单地分配一个 id <h1 id="heading">。然后您可以将其链接为page.htm#heading.

if you want to make the heading clickable (a link), use <h1><a></a></h1>/h1 > a– blocklevel elements first, and inline elements inside

如果要使标题可点击（链接），请先使用<h1><a></a></h1>/ h1 > a– 块级元素，然后使用内联元素

回答by Vim Bonsu

Also, there is style hierarchy differences. If you have it as <h1><a href="#">Heading here</a></h1>, The styles of the anchor will overrule the styles of the h1 element. Example:

此外，还有风格层次差异。如果你把它作为<h1><a href="#">Heading here</a></h1>，锚的样式将否决 h1 元素的样式。例子：

a {color:red;font-size:30px;line-height:30px;}

WILL OVERRULE

将否决

h1 {color:blue;font-size:40px;line-height:40px;}