标签 <a> 的最佳实践

什么是标签 <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).

例子

我们先观察以下看起来没啥问题的例子:

1
2
3
4
5
6
<p>
<a href="https://www.self.com/report/sale.pdf">
点击链接
</a>
下载销售报告
</p>

探讨之前

在分析以上例子之前,我想先探讨一下我们的目的

前端的一个关键目的就是,尽可能满足不同用户的需求。这里的用户不光指人类,还包括各种搜索引擎,各种辅助设备(比如给视障人士的读屏器等)。

具体分析

那么我们试着从不同的“用户”角度来分析上面例子存在的问题

对于搜索引擎来说,会着重分析标签<a>中的content,也就是例子中的“点击链接”这个文本,很明显“点击链接”并没有包含对链接的描述,那么搜索引擎也就不明白这个链接的意义。

对于使用屏幕阅读器的用户来说,会偏向于在不看链接周围的上下文的情况下,在链接之间跳来跳去。也就是说,在大多数情况下,他们只关注标签<a>中的content,而忽略标签周围的上下文。在例子中,他们也很容易只看的到“点击链接”这个文本,不明白这个链接到底指向何处。

就算对于大多数正常使用浏览器的用户来说,人们也容易只被标签<a>中的内容吸引,而忽略上下文。

那么我们要注意的是:要尽量在标签content中放入有意义的关键字

第一次改善

1
2
3
4
5
<p>
<a href="https://www.self.com/report/sale.pdf">
点击链接下载销售报告
</a>
</p>

改善之后,将关键字都放到了标签<a>之内,解决了上面提出来的问题,那么我们再继续分析剩下的问题

改善后的问题在于标签<a>中的内容太多,用户通过标签<a>已经知道这是一个链接,所以就不要再出现“链接”之类的关键字。用户也知道链接是用来点击的,所以也不需要“点击”这个关键字。总之,保持标签<a>中的关键字简洁是非常重要的。

第二次改善

1
2
3
4
5
<p>
<a href="https://www.self.com/report/sale.pdf">
销售报告
</a>
</p>

如上的例子中,精简了content,只剩下了“销售报告”四个字,貌似非常完美了。但是,我们知道通过点击链接之后,可能打开一个新的页面直接查看报告,也有可能是开始下载报告,有各种各样的可能性。 所以,我们在关键字中不能忽略掉点击链接之后的行为描述,告诉用户点击这个链接之后会发生的动作。

第三次改善

1
2
3
4
5
<p>
<a href="https://www.self.com/report/sale.pdf">
下载销售报告
</a>
</p>

改善后的链接已经相对不错了,但是还是存在问题。就是URL是绝对地址,我们应该将它改成相对地址

第四次改善

1
2
3
4
5
<p>
<a href="report/sale.pdf">
销售报告
</a>
</p>

采用相对地址有如下好处:

  1. 代码更加容易阅读
  2. 相对地址更加高效,如果采用绝对地址,浏览器会去查找DNS服务器,然后产生了一系列不必要的流程消耗。

最后,让我们再针对下载的链接,做一次优化,那就是添加 download 属性。

第五次改善

1
2
3
4
5
<p>
<a href="report/sale.pdf" download="销售报告.pdf">
销售报告
</a>
</p>

在这里,download属性指定了下载时的默认文件名。

总结

综上所述,标签<a>的最佳实践要注意以下几点:

  1. 在标签<a>的content中,写上清晰易懂的关键字描述
  2. 尽可能使用相对地址
  3. 对于点击链接后的动作,给出清晰的提示
  4. 对于下载链接,添加download属性

参考

HTML element referenc
Creating hyperlinks