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

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

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

嘗試一下

屬性

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

download

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

  • 沒有值時,瀏覽器將從各種來源生成的文件名/擴展名提供建議:

  • 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 標頭至沒有 TLSHTTPS)的來源
  • 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 中,idname 都可以在 <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>

結果

鏈接到同一頁面上的元素

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
js
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" 相同的保護機制。詳細信息請參見瀏覽器相容性

無障礙議題

強鏈接文字

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

無障礙性差的弱鏈接文字

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

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 屬性時:

當不存在 href 屬性時:

  • 任何
DOM 介面 HTMLAnchorElement

規範

Specification
HTML Standard
# the-a-element

瀏覽器相容性

BCD tables only load in the browser

參見

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