HTML атрибут: rel

Атрибут rel определяет отношение между связанным ресурсом и текущим документом. Допустим для <link>, <a>, <area> и <form>, поддерживаемые значения зависят от элемента, в котором используется этот атрибут.

Тип отношений задаётся значением атрибута rel, которое, если присутствует, должно содержать набор уникальных ключевых слов, разделённых пробелами. В отличие от имени class, которое не выражает семантики, атрибут rel должен содержать токены, имеющие семантическое значение как для машин, так и для людей. Текущие реестры возможных значений атрибута rel — реестр IANA для отношений ссылок, стандарт HTML Living Standard и свободно редактируемая страница existing-rel-values в вики-проекте microformats, как предложено стандартом Living Standard. Если используется атрибут rel, отсутствующий в одном из трёх перечисленных источников, некоторые валидаторы HTML (например, служба валидации разметки W3C) выведут предупреждение.

В следующей таблице перечислены некоторые из наиболее важных существующих ключевых слов. Каждое ключевое слово в значении, разделённом пробелами, должно быть уникальным.

Значение атрибута `rel`	Описание	`<link>`	`<a>` и `<area>`	`<form>`
`alternate`	Альтернативные представления текущего документа.	Ссылка	Ссылка	Не разрешено
`author`	Автор текущего документа или статьи.	Ссылка	Ссылка	Не разрешено
`bookmark`	Постоянная ссылка на ближайший секционный предок.	Не разрешено	Ссылка	Не разрешено
`canonical`	Предпочитаемый URL для текущего документа.	Ссылка	Не разрешено	Не разрешено
`dns-prefetch`	Указывает браузеру выполнить предварительный DNS-разрешение для источника целевого ресурса.	Внешний ресурс	Не разрешено	Не разрешено
`external`	Ссылаемый документ не является частью того же сайта, что и текущий документ.	Не разрешено	Аннотация	Аннотация
`expect`	Позволяет странице быть заблокированной от рендеринга до тех пор, пока не будут обработаны необходимые части документа, чтобы обеспечить согласованный рендеринг.	Ссылка	Не разрешено	Не разрешено
`help`	Ссылка на контекстно-зависимую справку.	Ссылка	Ссылка	Ссылка
`icon`	Иконка, представляющая текущий документ.	Внешний ресурс	Не разрешено	Не разрешено
`license`	Указывает, что основное содержимое текущего документа регулируется лицензией авторских прав, описанной в ссылаемом документе.	Ссылка	Ссылка	Ссылка
`manifest`	Манифест веб-приложения.	Ссылка	Не разрешено	Не разрешено
`me`	Указывает, что текущий документ представляет владельца связанного содержимого.	Ссылка	Ссылка	Не разрешено
`modulepreload`	Указывает браузеру предварительно загрузить скрипт и сохранить его в карте модулей документа для дальнейшей оценки. Дополнительно, зависимости модуля также могут быть загружены.	Внешний ресурс	Не разрешено	Не разрешено
`next`	Указывает, что текущий документ является частью серии, и что следующий документ в серии — ссылаемый документ.	Ссылка	Ссылка	Ссылка
`nofollow`	Указывает, что оригинальный автор или издатель текущего документа не поддерживает ссылаемый документ.	Не разрешено	Аннотация	Аннотация
`noopener`	Создаёт контекст просмотра верхнего уровня, который не является вспомогательным контекстом просмотра, если гиперссылка изначально создаёт любой из них (т.е., имеет соответствующее значение атрибута `target`).	Не разрешено	Аннотация	Аннотация
`noreferrer`	Заголовок `Referer` не будет включён. Кроме того, имеет тот же эффект, что и `noopener`.	Не разрешено	Аннотация	Аннотация
`opener`	Создаёт вспомогательный контекст просмотра, если гиперссылка в противном случае создаёт контекст просмотра верхнего уровня, который не является вспомогательным контекстом просмотра (т.е., имеет "`_blank`" в качестве значения атрибута `target`).	Не разрешено	Аннотация	Аннотация
`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>, значение зависит от других атрибутов.

С ключевым словом stylesheet в <link>, создаёт альтернативный стилевой лист.

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="/fr/html/print"
  hreflang="fr"
  type="text/html"
  media="print"
  title="French HTML (for printing)" />
<link
  rel="alternate"
  href="/fr/pdf"
  hreflang="fr"
  type="application/pdf"
  title="French PDF" />
```

author

Указывает, что ссылаемый документ содержит дополнительную информацию об авторе текущего документа или статьи. Актуально для элементов <link>, <a> и <area>.

С <a> и <area> указывает, что связанный документ (или mailto:) содержит информацию об авторе ближайшего предка <article>, если он есть, в противном случае — всего документа.

С <link> указывает на автора всего документа.

Примечание: По историческим причинам, устаревшее значение атрибута rev="made" обрабатывается как rel="author".

bookmark

Актуально как значение атрибута rel для элементов <a> и <area>. Предоставляет постоянную ссылку на ближайшего предка <article>, если он есть. Если предок <article> отсутствует, предоставляет постоянную ссылку на раздел, к которому элемент ссылки наиболее тесно связан.

canonical

Действительно для <link>, определяет предпочтительный URL для текущего документа, что помогает поисковым системам уменьшить дублирование контента.

dns-prefetch

Актуально для элемента <link> как в элементе <body>, так и в <head>, сообщает браузеру выполнить предварительный DNS-разрешение для источника целевого ресурса. Полезно для ресурсов, которые пользователю, скорее всего, понадобятся, помогает уменьшить задержку и тем самым повысить производительность при доступе к ресурсам, так как браузер предварительно выполнил DNS-разрешение для источника указанного ресурса. См. dns-prefetch описанный в resource hints.

external

Актуально для <form>, <a> и <area>, указывает, что ссылаемый документ не является частью текущего сайта. Это можно использовать с селекторами атрибутов для стилизации внешних ссылок таким образом, чтобы пользователь понимал, что он покидает текущий сайт.

expect Экспериментально

Разрешает странице быть блокируемой для рендеринга до тех пор, пока не будут обработаны существенные части документа, чтобы он рендерился согласованно. Обратите внимание, что блокировка рендеринга происходит только при дополнении атрибутом blocking="render".

Примечание: См. Стабилизация состояния страницы для обеспечения согласованности междокументных переходов для получения дополнительной информации о его использовании.

help

Актуально для <form>, <link>, <a> и <area>, ключевое слово help указывает, что связанный контент предоставляет контекстно-зависимую справку, предоставляя информацию для родителя элемента, определяющего гиперссылку, и его потомков. При использовании в <link>, справка предназначена для всего документа. При включении с <a> и <area> и поддерживается, стандартный курсор cursor будет help вместо pointer.

icon

Действительно для <link>, ссылаемый ресурс представляет собой значок, ресурс для представления страницы в пользовательском интерфейсе для текущего документа.

Наиболее распространенное использование для значения icon — значок закладки:

html

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

Если есть несколько <link rel="icon">, браузер использует их атрибуты media, type и sizes для выбора наиболее подходящего значка. Если несколько значков одинаково подходят, используется последний. Если наиболее подходящий значок позже окажется неприемлемым, например, из-за использования неподдерживаемого формата, браузер переходит к следующему наиболее подходящему и так далее.

Примечание: Атрибут crossorigin не поддерживается для rel="icon" в браузерах на основе Chromium. См. открытую проблему Chromium.

Примечание: iOS от Apple не использует этот тип ссылки, а также атрибут 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

Десктопное приложение манифест. Требует использования протокола 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, который обрабатывает pingbacks текущего документа. См. спецификацию Pingback.

preconnect

Предоставляет подсказку браузеру о том, что ему следует открыть соединение с целевым веб-сайтом заранее, не раскрывая никакой конфиденциальной информации или не загружая никакого контента, чтобы при переходе по ссылке связанный контент мог быть получен быстрее.

prefetch

Указывает, что пользовательский агент должен предварительно получить и кэшировать целевой ресурс, так как он, вероятно, потребуется для последующей навигации. Смотрите prefetch для получения дополнительной информации.

preload

Указывает, что пользовательский агент должен предварительно получить и кэшировать целевой ресурс для текущей навигации в соответствии с потенциальным пунктом назначения, указанным атрибутом as (и приоритетом, связанным с соответствующим пунктом назначения). См. страницу со значением preload.

prerender Устаревший Нестандартный

Указывает, что пользовательский агент должен предварительно получить целевой ресурс и обработать его таким образом, чтобы в будущем обеспечить более быстрый ответ, например, получив его подресурсы или выполнив некоторое рендеринг.

prev

Аналогично ключевому слову next, относящемуся к <form>, <link>, <a> и <area>, значение prev указывает, что текущий документ является частью серии, а ссылка относится к предыдущему документу в серии.

Примечание: синоним previous неверен и не должен использоваться.

privacy-policy

Применимо к элементам <a>, <area> и <link>, значение privacy-policy указывает, что указанный документ является политикой конфиденциальности, описывающей практики сбора и использования данных текущим документом.

search

Относится к элементам <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>, указывает тег (определённый указанным адресом), который применяется к текущему документу. Значение тега обозначает, что ссылка ссылается на документ, описывающий тег, применимый к документу, на котором она расположена. Этот тип ссылки не предназначен для тегов в облаке тегов, так как эти теги относятся к группе страниц, в то время как значение атрибута tag атрибута rel относится к одному документу.

terms-of-service

Применимо к элементам <a>, <area> и <link>, значение terms-of-service указывает, что указанный документ является условиями использования, которые описывают соглашения между поставщиком текущего документа и пользователями, которые хотят использовать предоставляемый документ.

Нестандартные значения

apple-touch-icon: Указывает значок веб-приложения на устройстве iOS.

Спецификации

Спецификация
Стандарт HTML # linkTypes
Стандарт HTML # attr-hyperlink-rel
Стандарт HTML # attr-form-rel

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`rel`	108	108	111	94	15.4	108	111	73	15.4	21.0	108

	Десктоп					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`rel`	16	12	30	15	5	18	30	14	4.2	1.0	4.4
`noopener`	49	79	52 До Firefox 63, `rel="noopener"` создавали окна со всеми отключенными по умолчанию функциями. Начиная с Firefox 63, эти окна имеют те же функции, включённые по умолчанию, что и любые другие окна.	36	10.1	49	52 До Firefox 63, `rel="noopener"` создавали окна со всеми отключенными по умолчанию функциями. Начиная с Firefox 63, эти окна имеют те же функции, включённые по умолчанию, что и любые другие окна.	36	10.3	5.0	49
`noreferrer`	16	13	33	15	5	18	33	14	4.2	1.5	4.4

	Десктоп					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`rel`	1	12	1	15	1	18	4	14	1	1.0	4.4
`noopener`	49	79	52 До Firefox 63, `rel="noopener"` создавали окна со всеми отключенными по умолчанию функциями. Начиная с Firefox 63, эти окна имеют те же функции, включённые по умолчанию, что и любые другие окна.	36	10.1	49	52 До Firefox 63, `rel="noopener"` создавали окна со всеми отключенными по умолчанию функциями. Начиная с Firefox 63, эти окна имеют те же функции, включённые по умолчанию, что и любые другие окна.	36	10.3	5.0	49
`noreferrer`	16	13	33	15	5	18	33	14	4.2	1.5	4.4

	Рабочий стол					Мобильный
	Хром	Эдж	Файрфокс	Опера	Сафари	Хром для Android	Файрфокс для Android	Опера для Android	Сафари на iOS	Samsung Internet	WebView Android
`rel`	1	12	1	9	1	18	4	10.1	1	1.0	4.4
`alternate_stylesheet`	1–48	Нет	3	15–35	Нет	18–48	4	14–35	Нет	1.0–5.0	4.4–48
`dns-prefetch`	46	≤79	3	33	5	46	4	33	4.2	5.0	46
`expect`	124	124	Нет	110	Нет	124	Нет	82	Нет	Нет	124
`icon`	4 Если доступны как ICO, так и PNG, будет использоваться ICO вместо PNG, если у ICO есть лучшие соответствующие размеры. (По caniuse.com.).	12 В версии 79 и более поздних (Edge на основе Blink), если доступны как ICO, так и PNG, будет использоваться ICO вместо PNG, если у ICO есть лучшие соответствующие размеры. (По caniuse.com.)	2 До Firefox 83 атрибут `crossorigin` не поддерживается для `rel="icon"`.	9 В версии 15 и более поздних (Opera на основе Blink), если доступны как ICO, так и PNG, будет использоваться ICO вместо PNG, если у ICO есть лучшие соответствующие размеры. (По caniuse.com.)	3.1 Если доступны как ICO, так и PNG, всегда будет использоваться файл ICO, независимо от установленных размеров. (По caniuse.com.)	18	4	Нет	Нет Совсем не использует favicons (но может иметь альтернативу для закладок и т.д.). (По caniuse.com.)	4.0	38
`manifest`	39	79	Нет	26	Нет	39	58	26	11.3	4.0	39
`modulepreload`	66	≤79	115	53	17	66	115	47	17	9.0	66
`preconnect`	46	79	39 До Firefox 41 не подчиняется атрибуту `crossorigin`.	33	11.1	46	39 До Firefox 41 не подчиняется атрибуту `crossorigin`.	33	11.3	4.0	46
`prefetch`	8 Требуется безопасный контекст	12 Требуется безопасный контекст	2 Требуется безопасный контекст	15 Требуется безопасный контекст	13.1	18 Требуется безопасный контекст	4 Требуется безопасный контекст	14 Требуется безопасный контекст	13.4	1.5 Требуется безопасный контекст	4.4 Требуется безопасный контекст
`preload`	50	≤79	85 56–57 Отключено из-за различных проблем совместимости с веб-страницами (например, ошибка 1405761).	37	11.1	50	85 56–57 Отключено из-за различных проблем совместимости с веб-страницами (например, ошибка 1405761).	37	11.3	5.0	50
`prerender`	13	79	Нет	15	Нет	18	Нет	14	Нет	1.5	4.4

html.elements.link.rel

Таблицы BCD загружаются только в браузере

html.elements.a.rel

Таблицы BCD загружаются только в браузере

html.elements.area.rel

Таблицы BCD загружаются только в браузере

html.elements.form.rel

Таблицы BCD загружаются только в браузере

См. также

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel