时间戳

首页 > 解决方案 > 可以做成可点击的链接吗？

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

问题描述

将跨度制作成可点击的链接。

我已经将一个只包含背景图像（作为 Gilder/Levin 图像替换技术的一部分）的跨度变成了一个可点击的链接，它似乎工作正常——但到目前为止，这只是在我自己的台式电脑上，在 Chrome、Opera 和 IE 11 上。

这可行吗？

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

它适用于我的电脑，带有 Chrome、IE11 和 Opera。它会通用吗？

标签： htmlcss

解决方案

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

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

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

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

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

但是，在原始代码中，您没有在链接上放置任何标签（<a>和之间的实际文本</a>），因此对于屏幕阅读器和机器人来说，知道这个链接应该是什么特别令人困惑。在这种情况下，整个标题应该在<a>元素内，允许单击整行以跟随链接。使用空<a>元素绝对不是一个好习惯，并且其中存在 a 的事实<span>不会改变任何事情。

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

推荐阅读