创建有效的 XHTML 可点击块区域答案

【问题标题】：Creating Valid XHTML Clickable Block Region创建有效的 XHTML 可点击块区域
【发布时间】：2009-07-01 15:38:18
【问题描述】：

我正在尝试创建一个“可点击”区域。

<a
  style="display: block"
  href="http://stackoverflow.com">
  StackOverflow
</a>

A 是一个内联元素，但 CSS 将它变成了一个块。

如果以上有效，那么以下也应该有效：

<a
  style="display: block"
  href="http://stackoverflow.com">
  <div>Some DIV that links to StackOverflow</div>
</a>

但 validator.w3.org 不应该将其标记为无效（现在就是这样）。

如果它无效，那么使块元素“可点击”并重定向到任意页面的最正确方法是什么。我知道我可以使用 JS onclick 来实现此行为，但 Google 将如何看待这一点？

【问题讨论】：

我不确定 xhtml 验证与 SEO 有什么关系。首先，xhtml 不再被认为是一个好的规范，人们更喜欢 HTML 5。其次，没有任何迹象表明网站验证（或缺乏验证）对 SEO 有一点影响......
@Chris：我想让我的网站针对 XHTML 进行验证，并有一个良好的 SEO。我并不是说两者是相关的。 HTML5 有这种特性吗？我也期待 HTML5 标准在大约 5 年内被采纳？
我认为内联不能包含块元素的 (XHTML) 规则应该有一些例外，例如 <a> 元素。否则没有正常的做法。

标签： css xhtml seo

【解决方案1】：

验证器是正确的 - 你不能把 <div> 放在 <a> 里面，不管你之后用 CSS 做什么。

正确的做法是您在第一个代码块中所做的 - <a style="display: block;">

如果你想要里面的东西，你可以做<a style="display: block;"><span style="display: block;">

【讨论】：

+1，这是一种被广泛接受的解决方案，可以在很多应该表现为块状的内容周围使用锚点。

【解决方案2】：

不要混淆有效的 HTML 和有效的 CSS。使用 display css 属性使内联元素阻塞是有效的。将块 HTML 元素放在内联元素中是无效的。

【讨论】：

【解决方案3】：

这并不意味着一个有效意味着另一个必须是。 HTML 有嵌套规则，而 div-within-anchor 不适合它们，这就是为什么 validator.w3.org 给你带来困难。

如果你真的必须有一个可点击的 div，而不是文本、图像或<span style="display: block">s，那么是的，你将不得不使用 onclick 事件。 Google 不会理解或承认该链接的存在。（除了 onclick div 之外，您可以通过在可以应用锚点的东西上设置锚点来解决这个问题。）

【讨论】：

【解决方案4】：

我过去对此类问题所做的事情是调用父元素上的点击（我的示例使用jQuery）：

<div class="link">
  <a href="http://www.google.com" title="Google">Visit Google</a>
</div>

$(".link").click(function(){
  document.location = $(this).find("a:first").attr("href");
});

使用样式，您可以通过设置光标、翻转状态等使整个区域看起来像链接。

【讨论】：

我假设您需要引用 jQuery 才能使这段代码正常工作。

【解决方案5】：

首先你需要知道你是想使用严格的还是过渡的 XHTML（框架集在这里没有用处）。然后你查看DTD (link)，你会发现A里面不能有DIV。

【讨论】：

尽可能严格，一如既往。

【解决方案6】：

您为什么不为此使用area tag？它应该定义图像地图中的可点击区域。

【讨论】：

它可能不仅仅是一个图像，它应该可以用于任意块元素。

【解决方案7】：

Google 机器人现在遵循简单的 javascript 链接，因此在您的 div 的 onClick 事件上使用 JS 是一种选择。其他搜索引擎机器人不会这样做，但迟早会这样做。

更多信息in this article.

【讨论】：

谷歌支持这一点很好，但其他搜索引擎不支持（正如你提到的）。那些关闭了 JS 的人呢？还是不支持 JS 的神秘用户代理？使用 HTML+CSS 很容易解决，因此对基本链接使用 onclick 处理程序是一个糟糕的主意。
molf：好点。不是每个人都在使用 JS（尽管现在这个数字很小）。
您可能会发现在某些时候您想使用机器人类型的工具，例如 wget 或链接检查器。如果您使用 onclick 处理程序构建了一个站点，您会发现这些工具毫无用处。