rel атрибут HTML

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

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

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

Атрибут rel имеет значение для элементов <link>, <a>, <area> и <form>, однако некоторые значения применимы только к части этих элементов. Как и все значения ключевых слов в атрибутах HTML, эти значения не учитывают регистр.

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

Значение

alternate

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

• При использовании с ключевым словом stylesheet в <link> создаётся альтернативная таблица стилей.

  <!-- 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" создаётся гиперссылка на канал распространения контента.

  <link
    rel="alternate"
    type="application/atom+xml"
    href="posts.xml"
    title="Blog" />
  

• В противном случае создаётся гиперссылка на альтернативное представление текущего документа, тип которого задаётся атрибутами hreflang и type.

  • Если hreflang указан вместе с alternate, а значение hreflang отличается от языка текущего документа, это указывает на то, что связанный документ является переводом.
  • Если type указан вместе с alternate, это указывает на то, что связанный документ представлен в альтернативном формате (например, PDF).
  • Атрибуты hreflang и type могут быть указаны вместе с alternate.

  <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 текущего документа, помогая поисковым системам сократить количество дублирующегося контента.

compression-dictionary

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

dns-prefetch

Применяется к элементу <link> как в <body>, так и в <head>; сообщает браузеру, что нужно заранее выполнить DNS-разрешение для источника целевого ресурса. Это полезно для ресурсов, которые, вероятно, понадобятся пользователю: предварительное DNS-разрешение для источника указанного ресурса уменьшает задержку и, следовательно, повышает производительность при обращении пользователя к ресурсу. См. описание предварительного DNS-разрешения в разделе подсказок о ресурсах.

external

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

expect

Позволяет блокировать отрисовку страницы до тех пор, пока не будут разобраны основные части документа, чтобы обеспечить единообразную отрисовку. Обратите внимание: блокировка отрисовки происходит только при наличии атрибута blocking="render".

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

help

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

icon

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

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

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

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

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

Примечание: iOS от Apple не использует этот тип ссылки или атрибут sizes для выбора значка веб-страницы для Web Clip или заставки, как это делают другие мобильные браузеры. Вместо этого используются нестандартные атрибуты apple-touch-icon и apple-touch-startup-image соответственно.

Примечание: Тип ссылки shortcut часто встречается перед icon, однако этот тип ссылки не соответствует стандарту, игнорируется, и веб-разработчикам больше не следует его использовать.

license

Допустимо для элементов <a>, <area>, <form> и <link>. Значение license указывает, что гиперссылка ведёт на документ с описанием условий лицензии; основной контент текущего документа распространяется на условиях лицензии, описанной в связанном документе. Если ссылка находится не внутри элемента <head>, стандарт не различает гиперссылки, относящиеся к определённой части документа или ко всему документу. Это можно определить только по данным на странице.

<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

Создаёт вспомогательный контекст просмотра, если в противном случае гиперссылка создала бы контекст просмотра верхнего уровня, не являющийся вспомогательным (то есть если в качестве значения атрибута target указано "_blank"). По сути, это противоположно значению noopener.

pingback

Задаёт адрес сервера pingback, обрабатывающего pingback-запросы для текущего документа. См. спецификацию Pingback.

preconnect

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

prefetch

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

preload

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

prerender

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

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.elements.link.rel

html.elements.a.rel

html.elements.area.rel

html.elements.form.rel

См. также

• HTMLLinkElement.relList
• HTMLAnchorElement.relList
• HTMLAreaElement.relList