什么是标签 <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属性并没有被浏览器广泛支持，使用須谨慎）
参考
HTML element referenc
Creating hyperlinks
原文地址：https://www.cnblogs.com/homehtml/p/12200528.html