从语义上讲，哪个更正确：h2 中的 a，还是 a 中的 h2？

Posted 2023-02-24

【中文标题】从语义上讲，哪个更正确：h2 中的 a，还是 a 中的 h2？

【英文标题】：Semantically, which is more correct: a in h2, or h2 in a?

【发布时间】：2012-04-03 08:13:05

【问题描述】：

我一直在决定使用哪个，因为两者似乎都有效。

我应该将链接<a> 放在<h2> 元素内吗？

还是反过来？

什么是正确的标准？

【问题讨论】：

这是相当主观的，但我想说<a> 应该在<h2> 内，因为如果<h2> 的部分文本不是链接，这个是它必须的方式，但你很少有<h2>之外的链接跨度。

3 票结束。我可以问为什么吗？这怎么不是一个真正的问题？ @AndrewMarshall：主观性如何？我以为已经发布了标准？

语义不是标准。因为你可以做任何一个（至少在 html5 中），没有技术上的理由来选择一个而不是另一个。

【参考方案1】：

如果您使用的是 HTML5，则只能将 <h2> 元素放在 <a> 元素中，其中 allows any other elements within <a> elements。以前的规范（或当前的规范，但您想查看它们）从未允许这样做。

通常的做法是将<a> 放在<h2> 中。这有效，一直有效，并且一直是 HTML5 之前唯一有效的方法，用于标题链接，因为链接指的是该标题中的文本。你很少需要将<h2> 放在<a> 中，除非<h2> 是一些更复杂的结构的一部分，它作为一个整体用作超链接。

【讨论】：

老兄...忘记迂腐意义上的“有效”...这完全与显示水平有关。如果 a 设置为 display:block 就可以了，html4, xhtml1, html5...随便。

@mikeyUX：你为什么告诉我而不是 OP 这个？

【参考方案2】：

W3C specs for h2 说它允许的父元素是任何可以包含流元素或 hgroup 的东西。 specs for a 允许可以包含短语或流元素的父元素。 h2 可以包含短语内容，a 可以包含短语或流程内容，因此根据规范，这两种内容似乎都是允许的。

由于您包含语义标签，我假设您也对哪个“似乎”更好感兴趣。就我而言，因为我想不出什么时候我想要一个锚点来跨越一个标题和其他内容，但是我可以想到很多时候标题应该包含一个锚点和其他内容，里面的 h2 似乎最佳路线。

【参考方案3】：

而且它的功能也不一样，有一个很大的不同。

如果您将<h2> 放入<a>，则标题的整个块（例如行）将像链接一样工作。

但是，如果您将<a> 放入<h2>，则只有可见文本才能用作链接。 （你可以用光标变化来测试它）

【讨论】：

什么是“标题具有更高的重要性”？

对不起，当我想得更多时，它没有任何意义。

因为额外的信息而投票赞成你的答案，尽管它并没有真正回答哪个在语义上更正确的问题。

【参考方案4】：

答案是取决于...

从 W3C 网站，更具体地说，在 HTML5 semantics page 中，很明显 h2 元素（与所有其他标题标签一样）具有“短语内容”作为内容模型。

现在，在Phrasing content link 之后，您会得到以下描述：

短语内容是文档的文本，以及 在段落内标记该文本。语句的运行 内容形式的段落。

在下面的列表中，您的短语内容包括：

a（如果它只包含短语内容）

因此，如果 a 标记仅包含短语内容，HTML5 允许将其包含在 h2 标记中。

反之亦然，text level semantics page 描述a 元素内容模型如下：

透明，但不能有交互式内容后代。

在Transparent link之后，在描述的末尾找到以下内容：

当一个透明元素没有父元素时，那么它的部分内容 “透明”的模型必须被视为接受任何 流动内容。

因为在h2 tag description中是这样说的：

可以使用此元素的上下文： 预期流内容的位置。

h2 标签可以被视为流内容。

所以，如果a标签没有父标签，在HTML5中它必须被视为接受任何流内容，包括h2标签。

【讨论】：

"那么，如果 a 标签没有父标签" - 没有父标签是什么？元素？另一个标题标签？

W3C网站的透明链接引用中报道的相同（dev.w3.org/html5/pf-summary/dom.html#transparent）......它是一个父元素

对不起，我应该把它和你上面的报价联系起来。

【参考方案5】：

HTML 允许 <a> 标签内的东西

我有这个……

<header>
  <a href="/home">
    <h1>Main heading</h1>
    <h2>Sub heading</h2>
  </a>
</header>

它对我有用。

包括副标题在内的整个标题文本都可以随意点击。我不知道用 html 5 有更好的方法。