单个标题内的两个锚标记答案

【问题标题】：Two anchor tags inside a single heading单个标题内的两个锚标记
【发布时间】：2012-12-15 03:31:51
【问题描述】：

我现在正在处理一个新博客的设计和标记，我发现我很想在一个标题标签中嵌套两个锚标签：

<h3><a>Popular<a/>|<a>Recent</a></h3>

看起来像这样：

_{（来源：autochemky.com）}

这样做的目的（显然）是启用“POPULAR”作为显示热门文章的链接，并启用“RECENT”作为显示最近文章的链接。 . .单击一个或另一个只会更改侧边栏上的可见内容（文章列表），而不会链接到新页面（通过 ajax 或已加载它们并且其中一个是隐藏的 div）。

这样做是为了避免额外的可能不必要的代码涉及多个 h3 元素或多个可见的文章列表。

我想我的问题是（按重要性排序并假设为 HTML5）：

标记是否有效/可接受？

这会对 SEO 产生任何现实/明显的影响吗？

您希望以不同的方式获得相同的结果吗？

【问题讨论】：

【解决方案1】：

假设 HTML5 - 这是可以接受的，HTML5 引入了任何元素都可以在 <a> 标记内（非常确定）

HTML5 的变化尽管以前的 HTML 版本将 a 元素限制为仅包含短语内容（本质上，在以前的版本中称为“内联”内容），但 a 元素现在是透明的；也就是说，现在允许 a 元素的实例也包含流内容（本质上，在以前的版本中称为“块”内容）——如果该 a 元素实例的父元素是允许包含流内容。

对 SEO 没有显着影响，这是一个小细节，如果这是一个部分的标题，您可能应该使用 <h1> 标签，因为这是新 HTML5 语义的基础。

我肯定会坚持你所拥有的。

【讨论】：

您对 <a> 标签的事情是正确的（我已经研究过了），但这是相反的，因为在 1 个 <h3> 标签中有 2 个 <a> 标签。我知道一个锚点在标题中一直是可以接受的，我只是仔细检查一下是否有 2 个。
啊，是的，无论如何，2 与 1 相同（在这种情况下）

【解决方案2】：

嗯，是的，在标题中包含多个 a 元素是有效的（只要您不嵌套 a 元素）。

但我认为你的标题没有意义。它是要么“流行”或“最近”，而不是同时，对吧？所以你的标题失去了它的目的：描述它的部分的内容。

您应该使用不属于标题的内容切换器：

<section>
  <h1>Popular</h1>
  <nav>Or see <a href="#recent">recent content</a></nav>
  <ul>
    <li>…</li>
    <li>…</li>
  </ul>
</section>

（如果您愿意，您可以更改措辞和样式，使其看起来像您的示例，方法是将指向其他内容的链接放在标题旁边。）

点击“最近的内容”应将标题从“热门”更改为“最近”，并将链接更改为<a href="#popular">popular content</a>

如果你不使用 URL 锚点 + CSS 来隐藏/显示相应的内容，并且没有 JS 的用户/机器人的后备，你应该同时显示流行和最近的内容, 适用于禁用 JavaScript 的用户。

关于：

h3 是因为它是侧边栏中的部分之一，而我的侧边栏部分都以 h3 为首。我看过一些使用h2的网站和一些使用h3的网站，我选择了h3。

只是为了确定：您不能随意使用您喜欢的任何标题级别。您需要遵循文档大纲。 h3 的使用是否正确取决于您的整个页面结构。

【讨论】：

我理解你的观点，但我认为我的想法更多的是“流行和最近都代表文章，因此它们可以共享相同的标题，因为它们所描述的内容是有意义的”我想也许不是。至于标题。 . .你如何确定在你的侧边栏中使用什么标题？我把它放在侧边栏中，因为 h1 是为文章标题保留的，而 h2 是为文章的部分保留的，h3 是为小节保留的。我确定侧边栏内容在 h2 部分不太重要，但在范围上比 h3 小节更重要。听起来好吗？
关于标题级别：您的大纲可能是错误的（不过，我需要查看整个标记）。如果你给你的侧边栏内容一个h3，它将在文章的祖先h2（因此h1）的范围内，这是错误的。 –– 您需要以h1 开头用于整个页面（通常是网站标题），h2 用于文章标题和导航和侧边栏。或者你使用分割元素（section、article、nav、aside），那么你的大纲会自动正确（你可以随时使用h1或任何你喜欢的想要）。
请随意创建一个关于您的大纲的单独问题，例如在codereview.stackexchange.com 上（并在此处指向我）。