html - 可以做成可点击的链接吗？

Question

将跨度变成可点击的链接。

我已将仅包含背景图像(作为 Gilder/Levin 图像替换技术的一部分)的跨度制作成可点击的链接，它似乎工作正常 - 但到目前为止，这只是我自己的台式电脑，以及 Chrome、Opera 和 IE 11。

这可行吗？

<div id="logo">
  <a href="[absolute url]"> 
    <span></span>
  </a>
  <h1>page name</h1>
</div>

它可以在我的电脑上使用 Chrome、IE11 和 Opera。它会通用吗？

Answer 1

虽然它在大多数浏览器中看起来没问题，但您使用的是 <a>元素不正确，因为它里面的内容应该是一个有意义的标签。正确的做法是包装整个 <h1>在链接中，或将 <a>在 <h1> 内(两者都是有效的 HTML5)。

<a href="[absolute url]"> 
  <span></span> <h1>page name</h1>
</a>

但是从您的评论来看，当您还在弄清楚语法时，现在开始担心图像替换技术和网络语义可能还为时过早。

---

图像替换技术有什么意义以及为什么使用空 <a>标签坏了？

Gilder/Levin 图像替换技术涉及向页面添加非语义元素(例如 <span> 元素)并使用 CSS 将它们替换为图标，以便屏幕阅读器忽略这些元素。毕竟，菜单按钮旁边的图标可能会让有视力的人更清楚地看到该按钮，但是当您是盲人并且使用屏幕阅读器时，该图标就变得多余了，无论如何都会大声朗读按钮的文本。这也可能使您的网站更容易被搜索引擎解析。

但是，在原始代码中，您没有在链接上放置任何标签(<a> 和 </a> 之间的实际文本)，因此屏幕阅读器和机器人尤其难以理解此链接是什么应该是。整个标题应在 <a> 范围内在这种情况下，允许单击整行以跟随链接。使用空的 <a> 绝对不是一个好习惯。元素，还有一个 <span> 的事实其中没有任何改变。

自从有了离开 <a> 的念头元素在语义上是荒谬的，我还没有找到任何可靠的地方来记录这种元素在浏览器中的行为。