什麼是標籤 <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屬性並沒有被瀏覽器廣泛支援，使用須謹慎）