什么是标签 <a>
官方定义是这样的:
The HTML
<a>
element (or anchor element) creates a hyperlink to other web pages, files, locations within the same page, email addresses, or any other URL.
也就是 <a></a>
, 我们需要关注的就是<a>
中的属性,以及标签之间的内容(content).
例子
我们先观察以下看起来没啥问题的例子:
<p>
<a href="https://www.self.com/report/sale.pdf">
点击链接
</a>
下载销售报告
</p>
探讨之前
在分析以上例子之前,我想先探讨一下我们的目的
前端的一个关键目的就是,尽可能满足不同用户的需求。这里的用户不光指人类,还包括各种搜索引擎,各种辅助设备(比如给视障人士的读屏器等)。
具体分析
那么我们试着从不同的“用户”角度来分析上面例子存在的问题
对于搜索引擎来说,会着重分析标签<a>
中的content,也就是例子1中的“点击链接”这个文本,和明显“点击链接”并没有包含对链接的描述,那么搜索引擎也就不明白这个链接的意义。
对于使用屏幕阅读器的用户来说,会偏向于在不看链接周围的上下文的情况下,在链接之间跳来跳去。也就是说,在大多数情况下,他们只关注标签<a>
中的content,而忽略标签周围的上下文。在例子1中,他们也很容易只看的到“点击链接”这个文本,不明白这个链接到底指向何处。
就算对于大多数正常使用浏览器的用户来说,人们也容易只被标签<a>
中的内容吸引,而忽略上下文。
那么我们要注意的是:要尽量在标签content中放入有意义的关键字
第一次改善
<p>
<a href="https://www.self.com/report/sale.pdf">
点击链接下载销售报告
</a>
</p>
改善之后,将关键字都放到了标签<a>
之内,解决了上面提出来的问题,那么我们再继续分析剩下的问题
改善后的问题在于标签<a>
中的内容太多,用户通过标签<a>
已经知道这是一个链接,所以就不要再出现“链接”之类的关键字。用户也知道链接是用来点击的,所以也不需要“点击”这个关键字。总之,保持标签<a>
中的关键字简洁是非常重要的。
第二次改善
<p>
<a href="https://www.self.com/report/sale.pdf">
销售报告
</a>
</p>
如上的例子中,精简了content,只剩下了“销售报告”四个字,貌似非常完美了。但是,我们知道通过点击链接之后,可能打开一个新的页面直接查看报告,也有可能是开始下载报告,有各种各样的可能性。 所以,我们在关键字中不能忽略掉点击链接之后的行为描述,告诉用户点击这个链接之后会发生的动作。
第三次改善
<p>
<a href="https://www.self.com/report/sale.pdf">
下载销售报告
</a>
</p>
改善后的链接已经相对不错了,但是还是存在问题。就是URL是绝对地址,我们应该将它改成相对地址
第四次改善
<p>
<a href="report/sale.pdf">
下载销售报告
</a>
</p>
采用相对地址有如下好处:
- 代码更加容易阅读
- 相对地址更加高效,如果采用绝对地址,浏览器会去查找DNS服务器,然后产生了一系列不必要的流程消耗。
最后,让我们再针对下载的链接,做一次优化,那就是添加 download
属性。
第五次改善
<p>
<a href="report/sale.pdf" download="销售报告.pdf">
下载销售报告
</a>
</p>
在这里,download
属性指定了下载时的默认文件名。
总结
综上所述,标签<a>
的最佳实践要注意以下几点:
- 在标签
<a>
的content中,写上清晰易懂的关键字描述 - 尽可能使用相对地址
- 对于点击链接后的动作,给出清晰的提示
- 对于下载链接,添加
download
属性 (PS:download
属性并没有被浏览器广泛支持,使用須谨慎)