<a>：超連結元素

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

<a> HTML 元素（或稱錨點元素），具有其 href 屬性，用於創建指向網頁、文件、電子郵件地址、同一頁面中的位置或任何其他 URL 可定位的東西。

每個 <a> 元素內的內容應該指示連結的目的地。如果存在 href 屬性，則在焦點位於 <a> 元素上時按下 Enter 鍵將激活它。

嘗試一下

<p>You can reach Michael at:</p>

<ul>
  <li><a href="https://example.com">Website</a></li>
  <li><a href="mailto:m.bluth@example.com">Email</a></li>
  <li><a href="tel:+123456789">Phone</a></li>
</ul>

li {
  margin-bottom: 0.5rem;
}

屬性

此元素的屬性包括全域屬性。

download

導致瀏覽器將連結的 URL 視為下載。可與或不與 filename 值一起使用：

沒有值時，瀏覽器將從各種來源生成的文件名/擴展名提供建議：
- Content-Disposition HTTP 標頭
- URL 路徑中的最終段落
- Content-Type 標頭中的媒體類型，以及 data: URL 的開頭，或是 blob: URL 的 Blob.type。
filename：定義值可建議作為文件名。/ 和 \ 字符將轉換為底線（_）。檔案系統可能禁止文件名中的其他字符，因此如果需要，瀏覽器將調整建議的名稱。

備註：

download 只適用於同源 URL，或者 blob: 和 data: 方案。
瀏覽器如何處理下載因瀏覽器、用戶設置和其他因素而異。用戶在下載開始之前可能會收到提示，文件可能會自動保存，或者它可能會自動打開，無論是在外部應用程序中還是在瀏覽器本身中。
如果 Content-Disposition 標頭與 download 屬性的信息不同，則結果行為可能不同：
- 如果標頭指定了 filename，則優先於 download 屬性中指定的文件名。
- 如果標頭指定了 inline 的配置，Chrome 和 Firefox 會將屬性視為下載並優先處理它。舊版 Firefox（82 版之前）會優先處理標頭並在內聯中顯示內容。

href

超連結指向的 URL。連結不限於基於 HTTP 的 URL——它們可以使用瀏覽器支持的任何 URL 方案：

具有文件片段的頁面部分
具有文字片段的特定文本部分
具有媒體片段的媒體文件部分
使用 tel: URL 的電話號碼
使用 mailto: URL 的電子郵件地址
使用 sms: URL 的短信文字消息
儘管網頁瀏覽器可能不支持其他 URL 方案，但網站可以使用 registerProtocolHandler() 進行設置

hreflang

指示連結 URL 的人類語言的提示。沒有內建功能。允許的值與全域 lang 屬性相同。

ping

URL 的空格分隔列表。當點擊連結時，瀏覽器將向這些 URL 發送 POST 請求，內容為 PING。通常用於跟蹤。

referrerpolicy

跟隨連結時發送的引用者的程度。

no-referrer：不發送 Referer 標頭。
no-referrer-when-downgrade：不發送 Referer 標頭至沒有 TLS（HTTPS）的來源。
origin：發送的引用者將僅限於引用頁面的來源：其協定、主機和通訊埠。
origin-when-cross-origin：發送給其他來源的引用者將僅限於協定、主機和端口。對同一來源的導航仍將包含路徑。
same-origin：對於同一來源，將發送引用者，但跨來源請求將不包含引用者信息。
strict-origin：僅在協定安全級別保持不變時（HTTPS→HTTPS）發送文件的源作為引用者，但不要將其發送給不太安全的目的地（HTTPS→HTTP）。
strict-origin-when-cross-origin（默認值）：對於同一來源請求，發送完整的 URL；僅在協定安全級別保持不變時（HTTPS→HTTPS）發送源；對於不太安全的目的地（HTTPS→HTTP），不發送標頭。
unsafe-url：引用者將包括來源和路徑（但不包括片段、密碼或用戶名）。此值不安全，因為它將來自 TLS 保護資源的來源和路徑洩露給不安全的來源。

rel

連結 URL 的關係，作為空格分隔的連結類型。

target

要在何處顯示連結 URL，作為瀏覽上下文（一個選項卡、窗口或 <iframe>）的名稱。以下關鍵字對於加載 URL 的位置具有特殊意義：

_self：當前瀏覽上下文。（默認）
_blank：通常是一個新選項卡，但用戶可以配置瀏覽器以打開新窗口。
_parent：當前瀏覽上下文的父級。如果沒有父級，則與 _self 行為相同。
_top：最上層的瀏覽上下文。具體來說，這意味著當前上下文的祖先中的「最高」上下文。如果沒有祖先，則與 _self 行為相同。
_unfencedTop：允許嵌入的有圍欄框架導航到最頂層框架（即超出有圍欄框架根的遍歷，與其他保留目標不同）。請注意，如果在有圍欄框架上下文之外使用此選項，則導航仍將成功，但它不會像保留關鍵字那樣運作。

備註： 將 target="_blank" 設置在 <a> 元素上，隱含提供了與設置 rel="noopener" 相同的 rel 行為，它不設置 window.opener。

type

提示連結 URL 的格式，使用 MIME 類型。沒有內建功能。

已棄用的屬性

charset 已棄用: 指示連結 URL 的 character encoding。

備註： 這個屬性已棄用，不應該被作者使用。請在連結的 URL 上使用 HTTP Content-Type 標頭。
coords 已棄用: 與 shape 屬性一起使用。逗號分隔的座標列表。
name 已棄用: 用於在頁面中定義可能的目標位置。在 HTML 4.01 中，id 和 name 都可以在 <a> 上使用，只要它們具有相同的值。

備註： 請改用全域屬性 id。
rev 已棄用: 指定反向連結；與形狀屬性相反。由於非常混亂而被棄用。
shape 已棄用: 圖像地圖中超連結區域的形狀。

備註： 請改用 <area> 元素代替圖像地圖。

範例

鏈接到絕對 URL

HTML

html

<a href="https://www.mozilla.com">Mozilla</a>

結果

鏈接到相對 URL

HTML

html

<a href="//example.com">Scheme-relative URL</a>
<a href="/zh-TW/docs/Web/HTML">Origin-relative URL</a>
<a href="./p">Directory-relative URL</a>

a {
  display: block;
  margin-bottom: 0.5em;
}

結果

鏈接到同一頁面上的元素

html

<!-- <a> element links to the section below -->
<p><a href="#Section_further_down">Jump to the heading below</a></p>

<!-- Heading to link to -->
<h2 id="Section_further_down">Section further down</h2>

結果

備註： 你可以使用 href="#top" 或空片段（href="#"）來鏈接到當前頁面的頂部，如 HTML 規範中所定義。

鏈接到電子郵件地址

要創建鏈接，讓用戶可以使用他們的電子郵件程序打開新消息，請使用 mailto: 方案：

html

<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>

結果

有關 mailto: URL 的詳細信息，例如包括主題或正文，請參見電子郵件鏈接或 RFC 6068。

鏈接到電話號碼

html

<a href="tel:+49.157.0156">+49 157 0156</a>
<a href="tel:+1(800)555-0123">(800) 555-0123</a>

結果

tel: 鏈接的行為因設備能力而異：

手機設備會自動撥打號碼。
大多數操作系統都有可以撥打電話的程序，如 Skype 或 FaceTime。
網站可以使用 registerProtocolHandler 來打電話，例如 web.skype.com。
其他行為包括將號碼保存到聯繫人中，或將號碼發送到另一個設備。

有關 tel: URL 方案的語法、其他功能和詳細信息，請參見 RFC 3966。

使用 download 屬性將 <canvas> 另存為 PNG

要將 <canvas> 元素的內容保存為圖像，你可以創建一個鏈接，其中 href 是使用 JavaScript 創建的 data: URL 的畫布數據，而 download 屬性提供下載的 PNG 文件的文件名：

具有處存鏈接的範例繪畫應用程式

HTML

html

<p>
  Paint by holding down the mouse button and moving it.
  <a href="" download="my_painting.png">Download my painting</a>
</p>

<canvas width="300" height="300"></canvas>

CSS

css

html {
  font-family: sans-serif;
}
canvas {
  background: #fff;
  border: 1px dashed;
}
a {
  display: inline-block;
  background: #69c;
  color: #fff;
  padding: 5px 10px;
}

JavaScript

const canvas = document.querySelector("canvas");
const c = canvas.getContext("2d");
c.fillStyle = "hotpink";
let isDrawing;

function draw(x, y) {
  if (isDrawing) {
    c.beginPath();
    c.arc(x, y, 10, 0, Math.PI * 2);
    c.closePath();
    c.fill();
  }
}

canvas.addEventListener("mousemove", (event) =>
  draw(event.offsetX, event.offsetY),
);
canvas.addEventListener("mousedown", () => (isDrawing = true));
canvas.addEventListener("mouseup", () => (isDrawing = false));

document
  .querySelector("a")
  .addEventListener(
    "click",
    (event) => (event.target.href = canvas.toDataURL()),
  );

無障礙性差的弱鏈接文字

一個常見的錯誤是只將「點擊此處」或「這裡」之類的詞作為鏈接：

html

<p>Learn more about our products <a href="/products">here</a>.</p>

結果

強鏈接文字

幸運的是，這是一個容易解決的問題，而且實際上比無法訪問的版本還要短！

html

<p>Learn more <a href="/products">about our products</a>.</p>

結果

輔助軟件有捷徑可以列出頁面上的所有鏈接。然而，強鏈接文字有益於所有用戶——「列出所有鏈接」的快捷方式模擬了視覺用戶快速掃描頁面的方式。

點擊事件

常常將錨點元素誤用為假按鈕，將它們的 href 設置為 # 或 javascript:void(0) 以防止頁面刷新，然後監聽它們的 click 事件。

這些虛假的 href 值在複製/拖動鏈接、在新標籤/窗口中打開鏈接、書籤或當 JavaScript 加載、錯誤或禁用時會引起意外行為。它們也向輔助技術（如螢幕閱讀器）傳遞了不正確的語義。

請改用 <button>。一般來說，你應該僅將超鏈接用於導航到實際 URL。

外部鏈接和鏈接到非 HTML 資源

通過 target="_blank" 在新標籤/窗口中打開的鏈接，或者指向下載文件的鏈接應該指示當鏈接被點擊時會發生什麼。

視力受損的人、使用螢幕閱讀技術進行導航的人或存在認知問題的人，在新標籤、窗口或應用程序意外打開時可能會感到困惑。較舊的螢幕閱讀軟件甚至可能不會宣告這種行為。

在新標籤/窗口中打開的鏈接

html

<a target="_blank" href="https://www.wikipedia.org">
  Wikipedia (opens in new tab)
</a>

結果

鏈接到非 HTML 資源

html

<a href="2017-annual-report.ppt">2017 Annual Report (PowerPoint)</a>

如果使用圖標來表示鏈接行為，請確保它具有 alt 文本：

html

<a target="_blank" href="https://www.wikipedia.org">
  Wikipedia
  <img alt="(opens in new tab)" src="newtab.svg" />
</a>

<a href="2017-annual-report.ppt">
  2017 Annual Report
  <img alt="(PowerPoint file)" src="ppt-icon.svg" />
</a>

結果

跳轉鏈接

跳轉鏈接是一個盡可能放在 <body> 內容的最前面的鏈接，指向頁面主要內容的開頭。通常，CSS 將跳轉鏈接隱藏在螢幕之外，直到被聚焦為止。

html

<body>
  <a href="#content" class="skip-link">Skip to main content</a>

  <header>…</header>

  <!-- The skip link jumps to here -->
  <main id="content"></main>
</body>

css

.skip-link {
  position: absolute;
  top: -3em;
  background: #fff;
}
.skip-link:focus {
  top: 0;
}

結果

跳轉鏈接讓使用鍵盤的用戶可以跳過在多個頁面中重複出現的內容，例如頭部導航。

對於使用輔助技術，如切換控制、語音命令或口杖/頭桿進行導航的人來說，跳轉鏈接尤其有用，因為移動過程中重複鏈接的行為可能很費勁。

尺寸與相近性

尺寸

互動元素，例如連結，應該提供足夠大的區域，以便輕鬆地啟動它們。這有助於各種人，包括那些有運動控制問題的人以及使用不精確輸入（例如觸摸螢幕）的人。建議的最小尺寸為 44×44 CSS 像素。

在散文內容中僅包含文本的鏈接不受此要求的限制，但確保有足夠的文本被超鏈接以便輕鬆啟動仍然是一個好主意。

相近性

放置在視覺上相鄰的互動元素，例如連結，應該有空間將它們分開。間距有助於運動控制問題的人，否則他們可能會意外啟動錯誤的互動內容。

間距可以使用 CSS 屬性如 margin 創建。

手抖和大按鈕問題

技術摘要

內容類型	流內容、段落型內容、互動型內容、捫及內容。
允許的內容	透明內容模型，除了沒有子孫可以是互動型內容或一個 a 元素，並且沒有子孫可以具有指定的 tabindex 屬性。
標籤省略	不允許，開始和結束標籤都是必須的。
允許的父元素	任何接受流內容的元素，但不包括其他 `<a>` 元素。
隱含的 ARIA 角色	當存在 `href` 屬性時為 `link`，否則為 `generic`
允許的 ARIA 角色	當存在 `href` 屬性時： `button` `checkbox` `menuitem` `menuitemcheckbox` `menuitemradio` `option` `radio` `switch` `tab` `treeitem` 當不存在 `href` 屬性時：任何
DOM 介面	`HTMLAnchorElement`

規範

Specification
HTML # the-a-element

瀏覽器相容性

參見

<link> 類似於 <a>，但用於對用戶不可見的元數據超鏈接。
:link 是一個 CSS 虛擬類，將匹配 <a> 元素，其中 href 屬性中的 URL 尚未被用戶訪問過。
:visited 是一個 CSS 虛擬類，將匹配 <a> 元素，其中 href 屬性中的 URL 曾經被用戶訪問過。
:any-link 是一個 CSS 虛擬類，將匹配具有 href 屬性的 <a> 元素。
文字片段是添加到 URL 中的用戶代理指令，允許內容作者鏈接到頁面上的特定文本，而不需要 ID。