HTML 超連結 <a> 標籤 (tag)

全世界的網頁或網路資源利用連結彼此互相引用互相鏈接，形成一個大互聯網，而 HTML <a> tag 就是用來建立超連結 (hyperlink) -- 通往其他頁面、檔案、Email 地址、或其他 URL 的超連結。

舉一個使用實例：

<a href="https://www.youtube.com/">這個連結</a>會連到 YouTube<br>
<a href="https://www.google.com/">這個連結</a>會連到 Google<br>
<a href="/html/image-img-tag.html">這個連結</a>會連到 Fooish 圖片標籤教學頁面

實際顯示在網頁上的結果如下：

這個連結會連到 YouTube
這個連結會連到 Google
這個連結會連到 Fooish 圖片標籤教學頁面

<a> 標籤的屬性 (attributes)

href

指定一個 URL 看連結要連到哪邊。

target

指定在什麼地方打開連結。

target 有下面這些屬性值：

  • _self: 預設值，在當前視窗開啟
  • _blank: 在新視窗開啟
  • _parent: 在上一層父視窗開啟
  • _top: 在最頂層父視窗開啟
  • framename: 指定在哪個框架中開啟

舉例：

<a href="https://www.fooish.com/" target="_blank">Fooish 技術教學</a>

上面這例子的結果：

Fooish 技術教學

rel

指定當前頁面和連結目標彼此之間的關係。

rel 有下面這些屬性值：

  • nofollow: 禁止搜尋引擎 (Google) 將該連結與你的網頁關聯在一起，或禁止從你的網頁索引連結網頁
  • noreferrer: 如果有使用者點擊該連結，不要送出 Referer: header 資訊給連結網站
  • noopener: 如果用 target="_blank" 開啟另一個頁面時，不要給連結頁面設置 window.opener (一個 JavaScript 變數) 權限。設定 noopener 的好處是提高安全性，同時避免讓連結頁面影響到當前頁面的效能。
  • prev: 指定彼此是上一個的關係 (例如屬於同樣主題文章的上一篇)
  • next: 指定彼此是下一個的關係 (例如屬於同樣主題文章的下一篇)

你可以用空白分隔開 (space-separated) 多個值。

舉個例子：

<a rel="nofollow noopener" href="https://examples.com/">外站連結</a>

download

download 用來指示瀏覽器當使用者點擊連結時，直接下載連結指向的資源，download 的屬性值可以設定下載檔案的檔名 (file name)，如果省略屬性值則會使用原始檔名。

舉個例子：

<a href="/assets/img/fooish.jpg" download="myphoto.jpg">下載圖片</a>

結果如下：

下載圖片
download 功能遵循 same-origin policy 的限制，只有同樣 origin 的來源才可以直接下載。

ping

ping 用來做連結點擊的監控或追蹤 (tracking)，當有人點連接時，會發送一個 HTTP POST 通知 ping 所指定的位址 (URL)，如果有多個 URL 則用空白分隔開。

使用例子：

<a href="https://www.fooish.com/html/" ping="https://www.fooish.com/trackpings">

使用者點擊連結時，瀏覽器會在背景 (background) 送出 ping 給指定的 server 追蹤連結點擊。

referrerpolicy

指定發出請求 (request) 時，瀏覽器應該要送出什麼 referrer (請求來源位址)。

referrerpolicy 有這些屬性值：

  • no-referrer: 不送出 Referer: header
  • no-referrer-when-downgrade: 這是預設的行為，如果當連接的協議有降級 (即 HTTPS 連往非 HTTPS 資源)，則不送出 Referer: header
  • origin: 送出 origin 當作 referrer。所謂的 origin 是指 URL 中的 protocol + host + port 的部分，不包含路徑或網址參數訊息，舉個例子 origin 像是 https://www.fooish.com
  • origin-when-cross-origin: 如果連往不同的 origin，則只送出 origin (protocol + host + port) 作為 referrer，只有連往同樣 origin 的頁面或資源，才送出完整資訊的 referrer (包含路徑和網址參數)
  • unsafe-url: 這個是最寬鬆的策略，不管任何情況都送出 referrer

各類型的超連結語法範例

錨定連結

跳往同頁面不同區塊的位置。

使用方法：

<a href="#some-section-id">連結文字</a>

上面的連結點擊後會跳去 id="some-section-id" 的 HTML 元素區塊。

例如跳到這邊：

<div id="some-section-id">
  hello
</div>

圖片連結

<a> 可以包住其他 HTML 元素，讓它們可以也是一個連結。

例如建立一個圖片連結：

<a href="https://example.com/" target="_blank">
  <img src="https://source.unsplash.com/WLUHO9A_xik/600x400">
</a>

實際顯示結果如下：

電子郵件超連結 mailto:

<a href="mailto:電子郵件信箱">連絡信箱</a>

如果瀏覽器有支援的話，點了連結會開啟郵件編輯器寫信。

使用範例：

<a href="mailto:contact@fooish.com">Fooish 連絡信箱</a>

實際顯示結果如下：

Fooish 連絡信箱

電話號碼連結 tel:

<a href="tel:電話號碼">連結文字</a>

其中電話號碼是遵循 RFC 3966 標準格式。

舉個例子：

<a href="tel:+491570156">+49 157 0156</a>

實際呈現結果如下：

+49 157 0156

如果你的裝置支持，例如是手機，點連結就可以直接撥打電話。

FTP 超連結 ftp:

<a href="ftp://someftpserver.com/">瀏覽 FTP server</a>