标签 <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）.

例子

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

<p>
  <a href="https://www.self.com/report/sale.pdf">
    点击链接
  </a>
  下载销售报告
</p>复制代码

探讨之前

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

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

具体分析

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

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

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

就算对于大多数正常使用浏览器的用户来说，人们也容易只被标签<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>复制代码

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

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

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

第五次改善

<p>
  <a href="report/sale.pdf" download="销售报告.pdf">
    下载销售报告
  </a>
</p>复制代码

在这里，download属性指定了下载时的默认文件名。（注：download属性属于HTML5，而且并未普遍支持）

总结

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

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

参考

HTML element referenc
Creating hyperlinks

作者博客