<span> 可以做成可点击的链接吗？

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。它会通用吗？

原文由 Michael Maberly 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

是的，这是将 <span> 或 <img> （或任何你想成为链接的元素）放入 <a>

单击此处了解定义和用法

该标签定义了一个超链接，用于从一个页面链接到另一个页面。

该元素最重要的属性是 href 属性，它表示链接的目的地。

原文由 Mohammad Hossein 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

虽然它在大多数浏览器中看起来没问题，但您错误地使用了 <a> 元素，因为它里面的内容应该是一个有意义的标签。正确的做法是将整个 <h1> 包裹在链接中，或者将 <a> 放在 <h1> 都是有效的 HTML-（）中。

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

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

---

图像替换技术有什么意义，为什么使用空的 <a> 标签不好？

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

但是，在原始代码中，您没有在链接上放置任何标签（ <a> 和 </a> 之间的实际文本），因此屏幕阅读器和机器人尤其容易混淆知道这个链接应该是什么。在这种情况下，整个标题应位于 <a> 元素内，允许单击整行以访问链接。使用空的 <a> 元素绝对不是一个好习惯，而且其中有一个 <span> 的事实不会改变任何东西。

由于保留 <a> 元素的想法在语义上是荒谬的，我还没有找到任何可靠的地方来记录这种元素在浏览器中的行为。

原文由 Domino 发布，翻译遵循 CC BY-SA 4.0 许可协议