将跨度变成可点击的链接。
我已将仅包含背景图像(作为 Gilder/Levin 图像替换技术的一部分)的跨度制作成可点击的链接,它似乎工作正常 - 但到目前为止,这只是我自己的台式电脑,以及 Chrome、Opera 和 IE 11。
这可行吗?
<div id="logo">
<a href="[absolute url]">
<span></span>
</a>
<h1>page name</h1>
</div>
它可以在我的电脑上使用 Chrome、IE11 和 Opera。它会通用吗?
最佳答案
虽然它在大多数浏览器中看起来没问题,但您使用的是 <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>
的念头元素在语义上是荒谬的,我还没有找到任何可靠的地方来记录这种元素在浏览器中的行为。
关于html - <span> 可以做成可点击的链接吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57915180/