<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 鍵將激活它。

嘗試一下

屬性

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

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
# the-a-element

瀏覽器相容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
a
attributionsourceid
Experimental
attributionsrc
Experimental
charset
Deprecated
coords
Deprecated
download
href
href = 'sms:'
href = '#top'
hreflang
hreftranslate
ExperimentalNon-standard
target="_blank" implies rel="noopener" behavior
name
Deprecated
ping
referrerpolicy
no-referrer-when-downgrade
origin-when-cross-origin
unsafe-url
rel
rel.noopener
rel.noreferrer
rev
Deprecated
shape
Deprecated
target
_unfencedTop value
Experimental
URL text fragments
type

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.
See implementation notes.
Has more compatibility info.

參見

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