<link> HTML-элемент ссылки на внешний ресурс

Элемент <link> HTML задаёт отношения между текущим документом и внешним ресурсом. Чаще всего этот элемент используется для подключения таблиц стилей, но также применяется для добавления значков сайта (как значков в стиле «favicon», так и значков для главного экрана и приложений на мобильных устройствах) и в других целях.

Попробуйте

<link href="/shared-assets/misc/link-element-example.css" rel="stylesheet" />

<p>This text will be red as defined in the external stylesheet.</p>
<p style="color: blue">
  The <code>style</code> attribute can override it, though.
</p>

Чтобы подключить внешнюю таблицу стилей, добавьте элемент <link> внутрь <head>, как показано ниже:

<link href="main.css" rel="stylesheet" />

В этом примере путь к таблице стилей указан в атрибуте href, а атрибуту rel присвоено значение stylesheet. rel означает «отношение» и является одной из ключевых особенностей элемента <link>: значение указывает, как связанный ресурс соотносится с содержащим его документом.

Вы встретите и другие распространённые типы. Например, ссылку на favicon сайта:

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

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

<link
  rel="apple-touch-icon"
  sizes="114x114"
  href="apple-icon-114.png"
  type="image/png" />

Атрибут sizes указывает размер значка, а type содержит MIME-тип связанного ресурса. Эти значения служат полезными подсказками, позволяя браузеру выбрать наиболее подходящий из доступных значков.

В атрибуте media также можно указать тип носителя или медиазапрос; в этом случае ресурс будет загружен, только если медиавыражение истинно. Например:

<link href="print.css" rel="stylesheet" media="print" />
<link href="mobile.css" rel="stylesheet" media="screen and (width <= 600px)" />

В элемент <link> также добавили несколько интересных новых возможностей для повышения производительности и безопасности. Рассмотрим этот пример:

<link
  rel="preload"
  href="myFont.woff2"
  as="font"
  type="font/woff2"
  crossorigin="anonymous" />

Значение preload атрибута rel указывает, что браузеру следует предварительно загрузить этот ресурс (подробности см. в разделе rel="preload"), а атрибут as указывает конкретный тип загружаемого содержимого. Атрибут crossorigin указывает, следует ли загружать ресурс с помощью запроса CORS.

Другие примечания по использованию:

• Элемент <link> может находиться либо в элементе <head>, либо в элементе <body> — в зависимости от того, имеет ли он тип ссылки со значением body-ok. Например, тип ссылки stylesheet допускается в body, поэтому <link rel="stylesheet"> разрешён в теле документа. Однако так делать не рекомендуется: логичнее отделять элементы <link> от содержимого body и размещать их в <head>.
• Если вы используете <link> для добавления favicon сайта, а сайт использует политику безопасности содержимого (CSP) для повышения безопасности, эта политика распространяется и на favicon. Если favicon не загружается, проверьте, не блокирует ли доступ к нему директива img-src заголовка Content-Security-Policy.
• В спецификациях HTML и XHTML определены обработчики событий для элемента <link>, однако неясно, как их можно использовать.
• В XHTML 1.0 для пустых элементов, таких как <link>, требуется завершающая косая черта: <link />.
• WebTV поддерживает использование значения next для rel с целью предварительной загрузки следующей страницы в серии документов.

Атрибуты

Этот элемент включает глобальные атрибуты.

as

Этот атрибут обязателен, если для элемента <link> задано значение rel="preload", необязателен, если задано значение rel="modulepreload", и в остальных случаях использовать его не следует. Он указывает тип содержимого, загружаемого элементом <link>. Это необходимо для сопоставления запросов, применения правильной политики безопасности содержимого и установки правильного заголовка запроса Accept.

Кроме того, rel="preload" использует это значение как подсказку для определения приоритета запроса. В таблице ниже перечислены допустимые значения этого атрибута, а также элементы и ресурсы, к которым они применяются.

значение As	значение Rel	Применяется к
audioworklet	modulepreload	модулям AudioWorklet
fetch	preload	fetch, XHR Примечание: Для этого значения также требуется, чтобы <link> содержал атрибут crossorigin; см. раздел Запросы fetch с поддержкой CORS.
font	preload	CSS @font-face Примечание: Для этого значения также требуется, чтобы <link> содержал атрибут crossorigin; см. раздел Запросы fetch с поддержкой CORS.
image	preload	элементы <img> и <picture> с атрибутами srcset или imageset, элементы SVG <image>, правила CSS *-image
json	modulepreload	Дополнительный файл JSON
paintworklet	modulepreload	модулям PaintWorklet
script	preload or modulepreload	элементы <script>, Worker importScripts и назначения modulepreload.
serviceworker	modulepreload	модулям ServiceWorker
sharedworker	modulepreload	SharedWorker
style	preload or modulepreload	элементы <link rel=stylesheet>, CSS @import и назначения modulepreload.
text	modulepreload	Дополнительный текстовый файл
track	preload	элементы <track> (WebVTT, MIME-тип text/vtt)
worker	modulepreload	модули Worker

blocking

Этот атрибут явно указывает, что определённые операции следует блокировать до выполнения заданных условий. Его можно использовать только в том случае, если атрибут rel содержит ключевые слова expect или stylesheet. Вместе с rel="expect" он указывает, что операции следует блокировать до разбора определённого узла DOM. Вместе с rel="stylesheet" он указывает, что операции следует блокировать до загрузки внешней таблицы стилей и её критически важных подресурсов и применения их к документу. Операции, которые необходимо блокировать, должны быть перечислены через пробел с помощью приведённых ниже токенов. Сейчас доступен только один токен:

• render: отображение содержимого на экране блокируется.

Примечание: Блокировать отображение могут только элементы link в <head> документа. По умолчанию элемент link с rel="stylesheet" в <head> блокирует отображение, когда браузер обнаруживает его во время разбора. Если такой элемент link добавляется динамически с помощью скрипта, для блокировки отображения необходимо также задать ему blocking = "render".

crossorigin

Этот перечисляемый атрибут указывает, нужно ли использовать CORS при загрузке ресурса. Изображения с поддержкой CORS можно повторно использовать в элементе <canvas>, не делая его загрязнённым. Допустимые значения:

anonymous

Выполняется междоменный запрос (то есть с заголовком HTTP Origin), но учётные данные не отправляются (то есть не передаются cookie, сертификат X.509 и данные аутентификации HTTP Basic). Если сервер не предоставляет учётные данные исходному сайту (не устанавливает заголовок HTTP Access-Control-Allow-Origin), ресурс будет считаться загрязнённым, а его использование будет ограничено.

use-credentials

Выполняется междоменный запрос (то есть с заголовком HTTP Origin) с отправкой учётных данных (то есть отправляется cookie или сертификат и/или выполняется аутентификация HTTP Basic). Если сервер не предоставляет учётные данные исходному сайту (через заголовок HTTP Access-Control-Allow-Credentials), ресурс будет загрязнённым, а его использование будет ограничено.

Если атрибут отсутствует, ресурс загружается без запроса CORS (то есть без отправки заголовка HTTP Origin), что исключает его использование без загрязнения. Если значение недопустимо, оно обрабатывается так, как если бы было указано перечисляемое ключевое слово anonymous. Дополнительную информацию см. в разделе Атрибуты настроек CORS.

disabled

Только для rel="stylesheet": логический атрибут disabled указывает, следует ли загружать описанную таблицу стилей и применять её к документу. Если при загрузке HTML указан disabled, таблица стилей не будет загружена при загрузке страницы. Вместо этого она загрузится по требованию, если и когда атрибут disabled будет изменён на false или удалён.

Установка свойства disabled в DOM приводит к удалению таблицы стилей из списка Document.styleSheets документа.

fetchpriority

Подсказывает относительный приоритет загрузки ресурса определённого типа. Допустимые значения:

high

Загрузить ресурс с высоким приоритетом относительно других ресурсов того же типа.

low

Загрузить ресурс с низким приоритетом относительно других ресурсов того же типа.

auto

Не задавать предпочтительный приоритет загрузки. Это значение используется по умолчанию, если значение не задано или недопустимо.

href

Этот атрибут задаёт URL связанного ресурса. URL может быть абсолютным или относительным.

hreflang

Этот атрибут указывает язык связанного ресурса. Он носит исключительно рекомендательный характер. Значения должны быть корректными языковыми тегами BCP 47. Используйте этот атрибут только при наличии атрибута href.

imagesizes

Только для rel="preload" и as="image": атрибут imagesizes имеет синтаксис и семантику, аналогичные атрибуту sizes, и указывает предварительно загрузить соответствующий ресурс, используемый элементом img с соответствующими значениями атрибутов srcset и sizes.

imagesrcset

Только для rel="preload" и as="image": атрибут imagesrcset имеет синтаксис и семантику, аналогичные атрибуту srcset, и указывает предварительно загрузить соответствующий ресурс, используемый элементом img с соответствующими значениями атрибутов srcset и sizes.

integrity

Этот атрибут содержит один или несколько хешей ресурса. Он используется для проверки того, что содержимое ресурса соответствует ожиданиям разработчика и не было заменено вредоносной копией в результате атаки на цепочку поставок. Атрибут можно указывать только тогда, когда атрибут rel имеет значение stylesheet, preload или modulepreload. См. раздел Subresource Integrity.

media

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

referrerpolicy

Строка, указывающая, какой реферер использовать при загрузке ресурса. Подробные объяснения и примеры каждой политики см. в документации заголовка Referrer-Policy.

• no-referrer означает, что заголовок Referer отправляться не будет.
• no-referrer-when-downgrade означает, что заголовок Referer не будет отправляться при переходе к источнику без TLS (HTTPS). Это поведение пользовательского агента по умолчанию, если не указана другая политика.
• origin означает, что реферером будет источник страницы, то есть примерно схема, хост и порт.
• origin-when-cross-origin означает, что при переходе к другим источникам будут передаваться только схема, хост и порт, а при переходе в пределах того же источника будет включён путь реферера.
• same-origin означает, что реферер (источник, путь и строка запроса) отправляется для запросов к тому же источнику, а для междоменных запросов реферер не отправляется.
• strict-origin означает, что передаётся только источник, если уровень безопасности протокола не меняется (HTTPS→HTTPS). При переходе к менее защищённому адресу (HTTPS→HTTP) реферер не отправляется. Это важно для страниц HTTPS, поскольку предотвращает утечку сведений о реферере к незащищённым источникам.
• strict-origin-when-cross-origin означает, что полный реферер отправляется для запросов к тому же источнику. Для междоменных запросов передаётся только источник, если протокол не меняется (HTTPS→HTTPS), а при переходе на HTTP реферер не отправляется. Это значение используется по умолчанию и обеспечивает баланс между функциональностью, конфиденциальностью и безопасностью сайтов HTTPS.
• unsafe-url означает, что реферер будет содержать источник и путь (но не фрагмент, пароль или имя пользователя). Этот вариант небезопасен, поскольку может привести к утечке источников и путей защищённых TLS-ресурсов незащищённым источникам.

rel

Этот атрибут задаёт отношение связанного документа к текущему документу. Его значение должно представлять собой разделённый пробелами список значений типа ссылки.

sizes

Этот атрибут задаёт размеры значков для визуальных носителей, содержащихся в ресурсе. Он должен присутствовать только в том случае, если rel содержит значение icon или нестандартный тип, например apple-touch-icon от Apple. Допустимы следующие значения:

• any — значок можно масштабировать до любого размера, поскольку он представлен векторным форматом, например image/svg+xml.
• список размеров, разделённых пробелами, каждый из которых имеет формат <width in pixels>x<height in pixels> или <width in pixels>X<height in pixels>. Каждый из этих размеров должен присутствовать в ресурсе.

Примечание: Большинство форматов значков позволяют хранить только один значок, поэтому чаще всего атрибут sizes содержит лишь одну запись. Формат ICO от Microsoft и формат ICNS от Apple позволяют хранить несколько размеров значков в одном файле. ICO лучше поддерживается браузерами, поэтому, если важна кроссбраузерная совместимость, используйте этот формат.

title

Атрибут title имеет особую семантику для элемента <link>. При использовании с <link rel="stylesheet"> он определяет таблицу стилей по умолчанию или альтернативную таблицу стилей.

type

Этот атрибут задаёт тип связанного содержимого. Его значение должно быть MIME-типом, например text/html, text/css и т. д. Обычно этот атрибут используется для указания типа подключаемой таблицы стилей (например, text/css), но поскольку в вебе используется только язык таблиц стилей CSS, атрибут type можно не указывать и даже рекомендуется так поступать. Он также используется со ссылками типа rel="preload", чтобы браузер загружал только поддерживаемые им типы файлов.

Нестандартные атрибуты

target

Задаёт имя фрейма или окна, в котором установлена указанная связь либо будет отображаться связанный ресурс.

Устаревшие атрибуты

charset

Этот атрибут задаёт кодировку символов связанного ресурса. Значение представляет собой список наборов символов, разделённых пробелами и/или запятыми, как определено в RFC 2045. Значение по умолчанию — iso-8859-1.

Примечание: Чтобы добиться того же результата, что и с этим устаревшим атрибутом, используйте HTTP-заголовок Content-Type связанного ресурса.

rev

Значение этого атрибута показывает отношение текущего документа к связанному документу, заданному атрибутом href. Таким образом, атрибут задаёт отношение, обратное указанному значением атрибута rel. Значения типа ссылки для этого атрибута аналогичны возможным значениям атрибута rel.

Примечание: Вместо rev следует использовать атрибут rel с противоположным значением типа ссылки. Например, чтобы задать обратную ссылку для made, укажите author. Кроме того, этот атрибут не означает «редакция» и не должен использоваться с номером версии, хотя многие сайты применяют его неправильно именно так.

Примеры

Подключение таблицы стилей

Чтобы подключить таблицу стилей к странице, используйте следующий синтаксис:

<link href="style.css" rel="stylesheet" />

Добавление альтернативных таблиц стилей

Также можно указать альтернативные таблицы стилей.

Пользователь может выбрать таблицу стилей в меню Вид > Стиль страницы. Благодаря этому пользователи могут просматривать несколько вариантов страницы.

<link href="default.css" rel="stylesheet" title="Default Style" />
<link href="fancy.css" rel="alternate stylesheet" title="Fancy" />
<link href="basic.css" rel="alternate stylesheet" title="Basic" />

Добавление значков для разных сценариев использования

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

<!-- iPad Pro with high-resolution Retina display: -->
<link
  rel="apple-touch-icon"
  sizes="167x167"
  href="/apple-touch-icon-167x167.png" />
<!-- 3x resolution iPhone: -->
<link
  rel="apple-touch-icon"
  sizes="180x180"
  href="/apple-touch-icon-180x180.png" />
<!-- non-Retina iPad, iPad mini, etc.: -->
<link
  rel="apple-touch-icon"
  sizes="152x152"
  href="/apple-touch-icon-152x152.png" />
<!-- 2x resolution iPhone and other devices: -->
<link rel="apple-touch-icon" href="/apple-touch-icon-120x120.png" />
<!-- basic favicon -->
<link rel="icon" href="/favicon.ico" />

Информацию о том, какое значение sizes выбрать для значков Apple, см. в документации Apple по настройке веб-приложений и упомянутых рекомендациях Apple по проектированию интерфейсов. Обычно достаточно предоставить большое изображение, например 192x192, и позволить браузеру при необходимости уменьшить его. Однако, как рекомендуют рекомендации Apple по дизайну, для разных размеров можно предоставить изображения с разным уровнем детализации. Значки меньшего размера для экранов с низким разрешением также позволяют сэкономить трафик.

Возможно, добавлять элементы <link> вообще не потребуется. Например, браузеры автоматически запрашивают /favicon.ico из корневого каталога сайта, а Apple автоматически запрашивает /apple-touch-icon-[size].png, /apple-touch-icon.png и т. д. Однако явные ссылки защитят вас от изменений этих соглашений.

Условная загрузка ресурсов с помощью медиазапросов

В атрибуте media можно указать тип носителя или запрос; в этом случае ресурс будет загружен, только если медиавыражение истинно. Например:

<link href="print.css" rel="stylesheet" media="print" />
<link href="mobile.css" rel="stylesheet" media="all" />
<link href="desktop.css" rel="stylesheet" media="screen and (width >= 600px)" />
<link
  href="highres.css"
  rel="stylesheet"
  media="screen and (resolution >= 300dpi)" />

События загрузки таблицы стилей

Чтобы определить, когда таблица стилей загрузилась, можно отслеживать срабатывание события load; аналогично, обнаружить ошибку при обработке таблицы стилей можно, отслеживая событие error:

<link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet" />

const stylesheet = document.getElementById("my-stylesheet");

stylesheet.onload = () => {
  // Do something interesting; the sheet has been loaded
};

stylesheet.onerror = () => {
  console.log("An error occurred loading the stylesheet!");
};

Примеры предварительной загрузки

Несколько примеров <link rel="preload"> приведены в разделе Предварительная загрузка содержимого с помощью rel="preload".

Блокировка отображения до загрузки ресурса

В атрибут blocking можно добавить токен render; отображение страницы будет заблокировано до загрузки ресурса и его критически важных подресурсов и применения их к документу. Например:

<link blocking="render" rel="stylesheet" href="example.css" crossorigin />

Техническая сводка

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

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

См. также

• Link заголовок HTTP
• Referrer-Policy заголовок HTTP