<a>：超連結元素

嘗試一下

<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

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

結果

鏈接到相對 URL

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;
}

結果

鏈接到同一頁面上的元素

<!-- <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>

結果

鏈接到電子郵件地址

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

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

結果

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

鏈接到電話號碼

<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

<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

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()),
  );

結果

安全性和隱私

<a> 元素可能對用戶的安全性和隱私造成影響。有關信息，請參見 Referer 標頭：隱私和安全問題。

在不使用 rel="noreferrer" 和 rel="noopener" 的情況下使用 target="_blank" 會使網站容易受到 window.opener API 攻擊，但請注意，在新版瀏覽器中，設置 target="_blank" 隱含地提供了與設置 rel="noopener" 相同的保護機制。詳細信息請參見瀏覽器相容性。

無障礙議題

強鏈接文字

鏈接內容應指示鏈接的目的地，即使是在上下文之外。

無障礙性差的弱鏈接文字

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

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

結果

強鏈接文字

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

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

結果

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

點擊事件

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

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

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

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

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

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

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

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

結果

鏈接到非 HTML 資源

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

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

<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>

結果

• WebAIM: 鏈接和超文本——超文本鏈接
• MDN / 了解 WCAG，指導方針 3.2
• G200: 僅在必要時從鏈接中打開新窗口和新標籤
• G201: 在打開新窗口時給予用戶高級警告

跳轉鏈接

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

<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>

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

結果

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

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

• WebAIM：「跳轉導航」鏈接
• 如何使用跳過導航鏈接
• MDN / 了解 WCAG，指導方針 2.4 說明
• 理解成功標準 2.4.1

尺寸與相近性

尺寸

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

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

• 理解成功標準 2.5.5：目標尺寸
• 目標尺寸和 2.5.5
• 快速測試：大觸摸目標

相近性

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

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

• 手抖和大按鈕問題

技術摘要

規範

瀏覽器相容性

參見

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