【发布时间】：2011-10-24 19:25:19
【问题描述】：
<h1><a ...> ... </a></h1> 和 <a ...><h1> ... </h1></a> 都是有效的 HTML，还是只有一个正确？如果它们都正确，它们的含义是否不同？
【问题讨论】：
【发布时间】：2011-10-24 19:25:19
【问题描述】：
两个版本都是正确的。它们之间最大的区别在于，对于<h1><a>..</a></h1>，只有标题中的文本是可点击的。
如果您将<a> 放在<h1> 周围并且css display 属性为block（默认情况下），则整个块（<h1> 的高度和宽度的 100% <h1> 所在的容器）将是可点击的。
从历史上看，您不能将块元素放在内联元素中，但 HTML5 不再是这种情况。我认为<h1><a>..</a></h1> 方法更传统。
如果您想在标题上放置锚点，比<a id="my-anchor"><h1>..</h1></a> 更好的方法是使用id 或name 属性，如下所示：<h1 id="my-anchor">..</h1> 或<h1 name="my-anchor">..</h1>
【讨论】：
-
..
听起来更适合 HTML 5，因为它为触摸设备用户提供了更大的点击目标，对吧？ -
当标题和副标题都链接到相同的内容时，将两者包装在相同的
<a>中以便它们共享悬停状态在视觉上更具吸引力：jsfiddle.net/jjyLemq2
<a><h1></h1></a> 不是 W3C 有效的......基本上，你不能把 block elements 放在 inline elements 里面
【讨论】：
-
是的.. 但不知何故，我觉得将块元素放在链接中有点草率（个人意见），就像不关闭标签（在 HTML5 中有效）.. 但是嘿！.. 也许它会影响搜索引擎优化
H1 元素是块级元素，锚点是内联元素。您可以在块级元素中包含内联元素，但反之则不行。当您考虑盒子模型和 HTML 规范时，这是有道理的。
总之，最好的方法是：
<h1><a href="#">Link</a></h1>
【讨论】：
-
“这是有道理的”，你神秘地说，没有任何解释，但是the behaviour of a block-level element within an inline element is specified。在内联元素中包含块级元素从来都不是错误的。更重要的是，HTML 5 规范和 HTML 生活标准完全可以在锚点中包含标题。这个答案是完全错误的。
您要使用超链接<a href="…">/a:link，还是要在标题中添加锚点？如果你想添加一个锚点，你可以简单地分配一个 id <h1 id="heading">。然后您可以将其链接为page.htm#heading。
如果您想让标题可点击（链接），请使用<h1><a></a></h1>/h1 > a - 先使用块级元素，再使用内联元素
【讨论】：
<h1><a>..</a></h1> 和 <a><h1>..</h1></a> 在样式表不影响呈现时的行为总是几乎相同。差不多，但不完全。如果您使用 Tab 键导航或以其他方式关注链接，则在大多数浏览器中，链接周围会出现一个“焦点矩形”。对于<h1><a>..</a></h1>，此矩形仅围绕链接文本。对于<a><h1>..</h1></a>，矩形延伸到可用的水平空间，因为标记使a 元素成为渲染中的块元素，默认占据100% 的宽度。
下面展示了一个焦点 <a href=foo><h1>link</h1></a> 是如何被 Chrome 渲染的：
这意味着如果您设置元素的样式，例如通过为链接设置背景颜色，效果以类似的方式有所不同。
从历史上看，<a><h1>..</h1></a> 在 HTML 2.0 中被宣布为无效，随后的 HTML 规范也随之而来，但 HTML5 改变了这一点并宣布它为有效。正式定义不影响浏览器，只影响验证器。然而，一些用户代理（可能不是普通浏览器，但例如专门的 HTML 渲染器、数据提取器、转换器等）可能无法正确处理 <a><h1>..</h1></a>，因为规范中不允许这样做。
很少有充分的理由将标题或标题中的文本设置为链接。 （这主要是不合逻辑的，并且不利于可用性。）但是在将标题（或标题中的文本）作为链接的潜在目的地时，经常会出现类似的问题，例如<h2><a name=foo>...</a></h2> 与 <a name=foo><h2>...</h2></a>。类似的考虑适用于此（两者都有效，可能存在差异，因为后者使 a 元素成为一个块，而在 HTML5 之前，只有前者被正式允许）。但此外，这两种方式都已过时，现在建议直接在标题元素上使用id 属性：<h2 id=foo>...</h2>。
【讨论】：
-
"There is seldom a good reason to make a heading or text in a heading a link"-> 我必须不同意那个。实际上有很多充分的理由将标题设置为链接。给出的示例：博客文章列表，其中每个标题也是一个链接。或者查看 SO 本身：首页上的所有问题都是h3元素，以及一个链接。无论如何，很好的解释；） -
@giorgio，例如您提到的 SO 链接不利于可用性：制作指向页面本身的链接毫无意义且令人困惑。
-
嗯，我的意思是主页上的 SO 链接，它将用户引导到另一个页面，特别是问题页面。是的，问题页面标题中的链接（并非完全）无用，但这并不一定对可用性不利。主要原因是搜索引擎优化（在问题页面上）。
-
那个 loopback h1 SEO 对可用性不利。为什么页面标题（h1）会让屏幕阅读器宣布指向其他地方的链接？这很令人困惑。出于同样的原因，在子标题中包含链接会让人感到困惑，因为某些内容应该是页面中某个部分的标题，同时也是另一个页面的标题。
此外，还有风格层次的差异。如果您将其设置为<h1><a href="#">Heading here</a></h1>，则锚的样式将覆盖 h1 元素的样式。示例：
a {color:red;font-size:30px;line-height:30px;}
将推翻
h1 {color:blue;font-size:40px;line-height:40px;}
【讨论】：
-
-1 因为这根本没有解决问题（哪个更正确）。
两者都是正确的。它们取决于您想要的锚标记的大小以及您希望网站的布局方式。
你可以做<h1><a href="example.com">Home Page</a></h1>，在这种情况下它会返回：
主页
但是有一个锚。或者您可以执行
<a href="example.com"><h1>Home Page</h1></a>，它会返回一个 H1 超链接，而不是仅仅将一个锚点指向 H1，如下所示：
首页
但是，大多数情况下，您不能在 H1 中添加链接，因为它只会将其呈现为 h1 上的锚点，而不是添加超链接。但是，我认为我的说法是正确的，您可以在不同的浏览器上看到此行为的差异。
但如果我错了，请纠正我。 :)
【讨论】：