HTML 超連結 a：href、target 與安全性寫法
用於指向網頁、文件、電子郵件地址、同一頁面中的位置或任何其他 URL 可定位的功能。href 決定去哪裡、target 決定開在哪裡；開新分頁記得補上 rel，連結文字也要能描述目的地，不要只寫「這裡」。
href
連結的到達位置，可以是 id、網址、檔案、email。
內部連結
網站內，各網頁之間的連結。
<a href="./about.html">關於我們</a>外部連結
連結至站台以外的地方。
<a href="https://docs.incode.tw">關於我們</a>小提醒
- 外部連結要加上前綴詞
https://。
錨點連結
若該網頁的內容太多而造成網頁過高的情況發生，加入此種連結可方便跳至對應的 id 位置。
<a href="#Product">商品介紹</a>
...
<div id="Product">...</div>檔案連結
連結至檔案資源。
<a href="./resource/products.docs">檔案下載</a>加上 download 可以讓瀏覽器直接下載而不是開啟，還能指定下載後的檔名：
<a href="./resource/products.pdf" download="產品目錄.pdf">檔案下載</a>空連結
沒有目標的連結。通常用在專案過程中，沒有明確的目標，但需要做出連結的效果（手指）。
<a href="#">下一張</a>
<a href="javascript:;">下一張</a>小提醒
這個元素其實不是連結、只是要觸發某個動作時，正確做法是改用 按鈕 <button>。它天生就能用鍵盤操作，語意也正確。
電子郵件連結
配合預設的信件軟體進行發送。（Windows 預設為 outlook）
<a href="mailto:service@ooxx.com.tw">聯絡我們</a>小提醒
- 電子郵件連結要加上前綴詞
mailto:。
電話連結
行動裝置上點擊後會直接撥號：
<a href="tel:+886227000000">02-2700-0000</a>target
連結的開啟位置。
| 值 | 說明 |
|---|---|
_self | 當前分頁。（預設） |
_blank | 開新分頁。 |
_parent | 開至父層頁框。若無父層，則與 _self 相同。 |
_top | 開至最外層頁框。若無最外層，則與 _self 相同。 |
開新分頁請加上 rel
<a href="https://docs.incode.tw" target="_blank" rel="noopener noreferrer">前端文件</a>| 值 | 說明 |
|---|---|
noopener | 切斷新分頁對原頁面的存取，避免安全風險 |
noreferrer | 不傳送來源網址 |
nofollow | 告訴搜尋引擎不要追蹤這個連結 |
連結文字要能描述目的地
<!-- ❌ 看不出要去哪 -->
想了解更多請<a href="/html/what-is-html">點這裡</a>
<!-- ✅ 文字本身就說明了目的地 -->
想了解更多請看 <a href="/html/what-is-html">什麼是 HTML</a>螢幕閱讀器的使用者常會把整頁的連結列成清單瀏覽，滿頁的 點這裡 完全無法辨識。搜尋引擎同樣會參考連結文字來判斷目標頁面的主題，這也是 內部連結與錨點文字 能替 SEO 加分的原因。
常見問題
開新分頁為什麼要加 rel 屬性？
用 target="_blank" 開新分頁時，新頁面可以透過 window.opener 影響原本的頁面，形成安全風險。加上 noopener 就能切斷這個關聯。現代瀏覽器多半已預設處理，但明確寫出來比較保險。
連結文字寫成 點這裡 有什麼問題？
螢幕閱讀器的使用者常會把頁面上的連結列成清單，滿頁的 點這裡 完全看不出要去哪。搜尋引擎也會參考連結文字判斷目標頁面的主題，因此請用能描述目的地的文字。
空連結該怎麼寫？
若這個元素其實不是連結、只是要觸發某個動作，正確做法是改用 <button> 元素。真的需要暫時佔位時可以用 #，但別留在正式版本裡。
怎麼讓連結直接下載檔案而不是開啟？
加上 download 屬性即可，還能指定下載後的檔名。要注意它只對同源的檔案有效。
