HTML 屬性：rel

rel 屬性定義了連結資源與當前文件之間的關係。在 <link>、<a>、<area> 和 <form> 上有效，支援的值取決於該屬性所在的元素。

關係型別由 rel 屬性的值給出，如果存在，該值必須是一組唯一的以空格分隔的關鍵字的無序集合。與不表達語義的 class 名稱不同，rel 屬性必須表達對機器和人類都具有語義有效性的標記。rel 屬性可能值的當前登錄檔是 IANA 連結關係登錄檔、HTML 活躍標準 和微格式 wiki 中可自由編輯的 existing-rel-values 頁面，如活躍標準中所建議。如果使用了上述三個來源中都不存在的 rel 屬性，則某些 HTML 驗證器（例如 W3C 標記驗證服務）將生成警告。

下表列出了一些最重要的現有關鍵字。空格分隔的值中的每個關鍵字都應在該值中唯一。

rel 值 描述 <link> <a> 和 <area> <form>
alternate 當前文件的備用表示形式。 連結 連結 不允許
author 當前文件或文章的作者。 連結 連結 不允許
bookmark 最近祖先部分的永久連結。 不允許 連結 不允許
canonical 當前文件的首選 URL。 連結 不允許 不允許
dns-prefetch 告訴瀏覽器搶先為目標資源的來源執行 DNS 解析。 外部資源 不允許 不允許
external 引用的文件不屬於與當前文件相同的站點。 不允許 註釋 註釋
expect 允許頁面在解析文件的基本部分之前被 渲染阻塞，以便其一致地渲染。 連結 不允許 不允許
help 連結到上下文相關的幫助。 連結 連結 連結
icon 表示當前文件的圖示。 外部資源 不允許 不允許
license 指示當前文件的主要內容受引用的文件中描述的版權許可證的約束。 連結 連結 連結
manifest Web 應用清單。 連結 不允許 不允許
me 指示當前文件代表擁有連結內容的人。 連結 連結 不允許
modulepreload 告訴瀏覽器搶先獲取指令碼並將其儲存在文件的模組對映中以供以後評估。可選地，還可以獲取模組的依賴項。 外部資源 不允許 不允許
next 指示當前文件是系列的一部分，並且該系列中的下一個文件是引用的文件。 連結 連結 連結
nofollow 指示當前文件的原始作者或釋出者不認可引用的文件。 不允許 註釋 註釋
noopener 如果超連結最初會建立任何這些（即具有適當的 target 屬性值），則建立一個不是輔助瀏覽上下文的頂級瀏覽上下文。 不允許 註釋 註釋
noreferrer 不會包含 Referer 標頭。此外，具有與 noopener 相同的效果。 不允許 註釋 註釋
opener 如果超連結原本會建立不是輔助瀏覽上下文的頂級瀏覽上下文（即 target 屬性值為“_blank”），則建立一個輔助瀏覽上下文。 不允許 註釋 註釋
pingback 提供處理對當前文件的 pingback 的 pingback 伺服器的地址。 外部資源 不允許 不允許
preconnect 指定使用者代理應搶先連線到目標資源的來源。 外部資源 不允許 不允許
prefetch 指定使用者代理應搶先獲取並快取目標資源，因為它很可能需要後續導航。 外部資源 不允許 不允許
preload 指定使用者代理必須根據 as 屬性給出的潛在目標（以及與相應目標關聯的優先順序）搶先獲取並快取目標資源以進行當前導航。 外部資源 不允許 不允許
prerender 指定使用者代理應該搶先獲取目標資源並在未來幫助提供更快響應的方式下處理它。 外部資源 不允許 不允許
prev 指示當前文件是系列的一部分，並且該系列中的前一個文件是引用的文件。 連結 連結 連結
privacy-policy 提供指向有關適用於當前文件的資料收集和使用實踐的資訊的連結。 連結 連結 不允許
search 提供指向可用於搜尋當前文件及其相關頁面的資源的連結。 連結 連結 連結
stylesheet 匯入樣式表。 外部資源 不允許 不允許
tag 提供適用於當前文件的標籤（由給定地址標識）。 不允許 連結 不允許
terms-of-service 指向文件提供者與希望使用文件的使用者之間協議或服務條款的連結。 連結 連結 不允許

rel 屬性與 <link>、<a>、<area> 和 <form> 元素相關，但某些值僅與這些元素的子集相關。像所有 HTML 關鍵字屬性值一樣，這些值不區分大小寫。

rel 屬性沒有預設值。如果省略該屬性或該屬性中的任何值都不受支援，則文件與目標資源之間除了存在超連結之外沒有特定的關係。在這種情況下，在 <link> 和 <form> 上，如果 rel 屬性不存在、沒有關鍵字，或者不是上面一個或多個空格分隔的關鍵字，則該元素不會建立任何連結。<a> 和 <area> 仍將建立連結，但沒有定義的關係。

值

alternate

指示當前文件的替代表示形式。對於 <link>、<a> 和 <area> 有效，其含義取決於其他屬性的值。

  • 在 <link> 上使用 stylesheet 關鍵字時，它會建立一個 備用樣式表。
    html
    <!-- a persistent style sheet -->
<link rel="stylesheet" href="default.css" />
<!-- alternate style sheets -->
<link
  rel="alternate stylesheet"
  href="highcontrast.css"
  title="High contrast" />
  • 如果具有與文件語言不同的 hreflang 屬性，則表示翻譯。
  • 如果 type 屬性值為 "application/rss+xml" 或 "application/atom+xml"，則它會建立一個引用聯合供稿的超連結。
    html
    <link
  rel="alternate"
  type="application/atom+xml"
  href="posts.xml"
  title="Blog" />
  • 否則，它將建立一個引用當前文件的替代表示形式的超連結，其性質由 hreflang 和 type 屬性給出。
    • 如果 hreflang 與 alternate 一起給出，並且 hreflang 的值與當前文件的語言不同，則表示引用的文件是翻譯。
    • 如果 type 與 alternate 一起給出，則表示引用的文件是替代格式（例如 PDF）。
    • hreflang 和 type 屬性都可能與 alternate 一起給出。
    html
    <link
  rel="alternate"
  href="/en-US/html/print"
  hreflang="fr"
  type="text/html"
  media="print"
  title="French HTML (for printing)" />
<link
  rel="alternate"
  href="/en-US/pdf"
  hreflang="fr"
  type="application/pdf"
  title="French PDF" />
author

指示引用的文件提供有關當前文件或文章作者的更多資訊。與 <link>、<a> 和 <area> 元素相關。

對於 <a> 和 <area>，它表示如果存在最近的 <article> 祖先，則連結的文件（或 mailto:）提供有關該祖先的資訊，否則提供整個文件的資訊。

對於 <link>，它表示整個文件的作者。

注意：由於歷史原因，已棄用的屬性值 rev="made" 被視為 rel="author"。

bookmark

與 <a> 和 <area> 元素的 rel 屬性值相關。為最近的祖先 <article> 元素提供永久連結（如果存在）。如果沒有祖先 <article> 元素，則為連結元素最密切關聯的部分提供永久連結。

canonical

對於 <link> 有效，它定義了當前文件的首選 URL，這有助於搜尋引擎減少重複內容。

dns-prefetch

與 <link> 元素在 <body> 和 <head> 中的相關性，它告訴瀏覽器搶先對目標資源的來源執行 DNS 解析。對於使用者可能需要的資源很有用，它有助於減少延遲，從而在使用者訪問資源時提高效能，因為瀏覽器搶先對指定資源的來源執行了 DNS 解析。請參閱 dns-prefetch 在 資源提示 中的描述。

external

與 <form>、<a> 和 <area> 相關，它表示引用的文件不是當前站點的一部分。這可以與屬性選擇器一起使用，以一種向用戶指示他們將離開當前站點的方式來設定外部連結的樣式。

expect

允許頁面在解析文件的基本部分之前被 渲染阻止，以便它能夠一致地渲染。請注意，渲染阻止僅在與 blocking="render" 屬性一起使用時才會發生。

注意：有關其用法的更多資訊，請參閱 穩定頁面狀態以使跨文件轉換保持一致。

help

與 <form>、<link>、<a> 和 <area> 相關，help 關鍵字表示連結到的內容提供上下文相關的幫助，為定義超連結的元素的父級及其子級提供資訊。當在 <link> 中使用時，幫助針對整個文件。當與 <a> 和 <area> 一起使用並得到支援時，預設的 cursor 將為 help 而不是 pointer。

icon

在 <link> 中有效，連結的資源代表圖示，用於在使用者介面中表示當前文件的資源。

icon 值最常見的用途是 favicon。

html
<link rel="icon" href="favicon.ico" />

如果有多個 <link rel="icon">，則瀏覽器會使用它們的 media、type 和 sizes 屬性來選擇最合適的圖示。如果幾個圖示同樣合適，則使用最後一個圖示。如果發現最合適的圖示後來不合適，例如因為它使用了不受支援的格式，則瀏覽器將繼續使用下一個最合適的圖示，依此類推。

注意：Chromium 基於瀏覽器的 rel="icon" 不支援 crossorigin 屬性。請參閱 開啟的 Chromium 問題。

注意：Apple 的 iOS 不會像其他移動瀏覽器那樣使用此連結型別或 sizes 屬性來選擇網頁剪輯或啟動佔位符的網頁圖示。相反，它分別使用非標準的 apple-touch-icon 和 apple-touch-startup-image。

注意：shortcut 連結型別通常在 icon 之前出現，但此連結型別不符合規範，被忽略，並且**網頁作者不得再使用它**。

license

在 <a>、<area>、<form>、<link> 元素上有效，license 值表示超連結指向描述許可資訊的文件；當前文件的主要內容受引用的文件中描述的版權許可證的約束。如果不位於 <head> 元素內，則標準不會區分應用於文件特定部分或整個文件的超連結。只有頁面上的資料可以指示這一點。

html
<link rel="license" href="#license" />

注意：雖然已識別，但同義詞 copyright 是不正確的，必須避免。

manifest

Web 應用清單。需要使用 CORS 協議進行跨源獲取。

modulepreload

對提高效能很有用，並且與文件中任何位置的 <link> 相關，設定 rel="modulepreload" 會告訴瀏覽器搶先獲取指令碼（和依賴項）並將其儲存在文件的模組對映中以供以後評估。modulepreload 連結可以確保在模組在模組對映中準備好（但未評估）之前完成網路獲取。另請參閱 modulepreload。

next

與 <form>、<link>、<a> 和 <area> 相關，next 值指示當前文件是系列的一部分，並且該系列中的下一個文件是引用的文件。當包含在 <link> 中時，瀏覽器可能會假設該文件將作為下一步獲取，並將其視為資源提示。

nofollow

與 <form>、<a> 和 <area> 相關，nofollow 關鍵字告訴搜尋引擎蜘蛛忽略連結關係。nofollow 關係可能表明當前文件的所有者不認可引用的文件。它通常由搜尋引擎最佳化人員包含在內，假裝他們的連結農場不是垃圾郵件頁面。

noopener

與 <form>、<a> 和 <area> 相關，如果超連結會建立其中任何一個（即，具有適當的 target 屬性值），則它會建立一個不是輔助瀏覽上下文的頂級瀏覽上下文。換句話說，它使連結的行為就像 window.opener 為 null 並且 target="_parent" 已設定一樣。

這與 opener 相反。

noreferrer

與 <form>、<a> 和 <area> 相關，包含此值會使推薦來源未知（不會包含 Referer 標頭），並建立頂級瀏覽上下文，就像 noopener 也已設定一樣。

opener

如果超連結原本會建立不是輔助瀏覽上下文的頂級瀏覽上下文（即，具有“_blank”作為 target 屬性值），則會建立輔助瀏覽上下文。實際上，與 noopener 相反。

pingback

提供處理對當前文件的 pingback 的 pingback 伺服器的地址。請參閱 Pingback 規範。

preconnect

向瀏覽器提供一個提示，建議它預先開啟與連結網站的連線，而無需洩露任何私人資訊或下載任何內容，以便在遵循連結時可以更快地獲取連結內容。

prefetch

指定使用者代理應該搶先獲取並快取目標資源，因為它很可能需要後續導航。有關更多資訊，請參閱 prefetch。

preload

指定使用者代理必須根據 as 屬性給出的潛在目標（以及與相應目標關聯的優先順序）搶先獲取並快取目標資源，以進行當前導航。請參閱 preload 值的頁面。

prerender

指定使用者代理應該搶先獲取目標資源並以有助於將來提供更快響應的方式處理它，例如透過獲取其子資源或執行一些渲染。

prev

類似於 next 關鍵字，與 <form>、<link>、<a> 和 <area> 相關，prev 值指示當前文件是系列的一部分，並且該連結引用該系列中的前一個文件是引用的文件。

注意：同義詞 previous 是不正確的，不應使用。

privacy-policy

對於 <a>、<area> 和 <link> 元素有效，privacy-policy 值表示引用的文件是隱私政策，其中描述了當前文件的資料收集和使用實踐。

與 <form>、<link>、<a> 和 <area> 元素相關，search 關鍵字表示超連結引用一個其介面專門設計用於在當前文件、站點和相關資源中搜索的文件，提供指向可用於搜尋的資源的連結。

如果 type 屬性設定為 application/opensearchdescription+xml，則該資源是 OpenSearch 外掛，可以輕鬆新增到 Firefox 的介面中。

stylesheet

對於 <link> 元素有效，它匯入外部資源用作樣式表。type 屬性如果為 text/css 樣式表則不需要，因為這是預設值。如果不是型別為 text/css 的樣式表，最好宣告型別。

雖然此屬性將連結定義為樣式表，但與其他屬性以及 rel 值內的其他關鍵術語的互動會影響是否下載和/或使用樣式表。

當與alternate 關鍵字一起使用時，它定義了一個備用樣式表。在這種情況下，請包含一個非空的title。

如果媒體與media 屬性的值不匹配，則外部樣式表將不會被使用甚至下載。

需要使用 CORS 協議進行跨源獲取。

tag

適用於<a> 和 <area> 元素，它提供了一個標籤（由給定的地址標識），該標籤應用於當前文件。標籤值表示連結指向描述應用於其所在文件的標籤的文件。此連結型別不適用於標籤雲中的標籤，因為這些標籤應用於一組頁面，而rel 屬性的tag 值則用於單個文件。

terms-of-service

適用於 <a>、<area> 和 <link> 元素，terms-of-service 值表示引用的文件是服務條款，描述了當前文件提供者與希望使用所提供文件的使用者之間的協議。

非標準值

apple-touch-icon

指定 iOS 裝置上 Web 應用的圖示。

規範

規範
HTML 標準
# linkTypes
HTML 標準
# attr-hyperlink-rel
HTML 標準
# attr-form-rel

瀏覽器相容性

html.elements.link.rel

BCD 表格僅在瀏覽器中載入

html.elements.a.rel

BCD 表格僅在瀏覽器中載入

html.elements.area.rel

BCD 表格僅在瀏覽器中載入

html.elements.form.rel

BCD 表格僅在瀏覽器中載入

另請參閱