HTML-тег <link>

Тег <link> определяет связь между текущим документом и внешним ресурсом. Чаще всего он используется для подключения внешней таблицы стилей CSS, однако с его помощью также добавляют фавикон, объявляют переведённые версии страницы и сообщают браузеру, какие ресурсы следует загрузить заранее для повышения производительности.

На этой странице рассмотрены синтаксис тега <link>, все поддерживаемые атрибуты и практические примеры для наиболее востребованных значений rel: stylesheet, icon, preload и alternate. Также объясняются подсказки ресурсов (preload, prefetch, preconnect, dns-prefetch) и атрибуты безопасности crossorigin / integrity.

Обратите внимание: <link> не загружает скрипты — это задача тега <script>. Единственное исключение — rel="modulepreload", который только предварительно загружает JavaScript-модуль, чтобы он был готов к моменту, когда его запросит тег <script>.

HTML-документ может содержать несколько элементов <link> для разных типов ресурсов: таблиц стилей, иконок и предзагружаемого контента. Все они должны находиться в разделе <head> документа, как правило перед закрывающим тегом </head>.

Синтаксис

Тег <link> является пустым, то есть закрывающий тег не требуется. Он содержит только атрибуты. Однако в XHTML тег <link> должен быть закрыт (<link/>).

Пример HTML-тега `<link>`:

HTML-тег <link>

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>The appearance of the header is determined by the CSS styles specified in the external file.</h1>
    <p>The appearance of the paragraph is determined by the CSS styles specified in the external file.</p>
  </body>
</html>

Попробуйте сами »

В этом примере у страницы нет собственных стилей. Все правила, определяющие внешний вид заголовка и абзаца, находятся во внешнем файле style.css, который подключается элементом <link>. Откройте живой редактор выше и отредактируйте файл style.css, чтобы увидеть изменения в разметке.

Подключение фавикона

Фавикон — это небольшой значок, отображаемый на вкладке браузера и в закладках. Он объявляется с помощью rel="icon". Атрибут type сообщает браузеру формат изображения, а sizes позволяет предложить несколько разрешений, чтобы браузер выбрал наиболее подходящее.

<head>
  <!-- A standard favicon -->
  <link rel="icon" href="/favicon.ico" sizes="any" />

  <!-- A modern SVG icon (scales to any resolution) -->
  <link rel="icon" type="image/svg+xml" href="/icon.svg" />

  <!-- A PNG at a specific size -->
  <link rel="icon" type="image/png" sizes="32x32" href="/icon-32.png" />

  <!-- Icon used when the page is added to an iOS home screen -->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
</head>

sizes="any" обозначает масштабируемый значок (например, .ico или .svg); в противном случае используйте формат WIDTHxHEIGHT (например, 32x32) для каждого файла.

Предзагрузка ресурсов с помощью `rel="preload"`

rel="preload" указывает браузеру загрузить ресурс заранее с высоким приоритетом, ещё до того, как парсер обнаружит его в обычном порядке. При этом ресурс не применяется — он только скачивается, чтобы файл уже был в кеше к моменту, когда понадобится.

При использовании preload атрибут as является обязательным. Он сообщает браузеру тип ресурса, чтобы тот мог установить правильный приоритет, задать нужный заголовок Accept и выполнить соответствующие проверки CORS и Content-Security-Policy.

<head>
  <!-- Preload a stylesheet -->
  <link rel="preload" href="/main.css" as="style" />

  <!-- Preload a font (fonts are always fetched with CORS, so crossorigin is required) -->
  <link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin />

  <!-- Preload an image that is the page's largest element -->
  <link rel="preload" href="/hero.jpg" as="image" />
</head>

Предзагруженная таблица стилей всё равно требует обычной ссылки rel="stylesheet" (или <style>/@import), чтобы реально примениться к странице — preload только скачивает её.

Подсказки ресурсов: preload, prefetch, preconnect и dns-prefetch

Все четыре значения rel улучшают производительность, но решают разные задачи и не являются взаимозаменяемыми:

Значение `rel`	Что делает	Для чего использовать
`preload`	Загружает ресурс, который нужен текущей странице в ближайшее время, с высоким приоритетом.	Критический CSS, шрифты, LCP-изображение — файлы, которые иначе были бы обнаружены слишком поздно.
`prefetch`	Загружает ресурс, который может понадобиться при следующей навигации, с низким приоритетом.	Ресурсы для следующей страницы, которую пользователь, вероятно, откроет.
`preconnect`	Заблаговременно открывает соединение (DNS + TCP + TLS-рукопожатие) с другим источником.	Источники, к которым вы точно скоро обратитесь, например хост шрифтов или API.
`dns-prefetch`	Разрешает только DNS для источника. Дешевле `preconnect` и служит хорошим запасным вариантом.	Источники, которые вы можете использовать, или в дополнение к `preconnect` для старых браузеров.

<head>
  <!-- Open the connection to the font host as early as possible -->
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <!-- Fallback DNS lookup for browsers that ignore preconnect -->
  <link rel="dns-prefetch" href="https://fonts.gstatic.com" />

  <!-- Warm up an asset the next page will need -->
  <link rel="prefetch" href="/next-page.js" as="script" />
</head>

Практическое правило: preload — для текущей страницы, prefetch — для следующей, preconnect / dns-prefetch — для прогрева соединений с другими источниками.

Альтернативные версии с `rel="alternate"`

rel="alternate" указывает на альтернативное представление текущего документа. В сочетании с hreflang он сообщает поисковым системам, какой URL обслуживает тот или иной язык или регион — это необходимо для многоязычных сайтов.

<head>
  <link rel="alternate" hreflang="en" href="https://example.com/en/" />
  <link rel="alternate" hreflang="de" href="https://example.com/de/" />
  <link rel="alternate" hreflang="fr" href="https://example.com/fr/" />
  <!-- Default fallback when no language matches -->
  <link rel="alternate" hreflang="x-default" href="https://example.com/" />
</head>

То же значение rel используется для объявления не-HTML-альтернатив, например RSS-ленты:

<link rel="alternate" type="application/rss+xml" title="RSS Feed" href="/feed.xml" />

`crossorigin` и `integrity`

Атрибут crossorigin управляет тем, выполняется ли межсайтовый запрос с использованием CORS и отправляются ли учётные данные (cookies):

crossorigin="anonymous" (или просто crossorigin) — CORS-запрос без учётных данных.
crossorigin="use-credentials" — CORS-запрос с учётными данными.

Атрибут crossorigin необходим, когда браузер должен прочитать ответ из другого источника: прежде всего для шрифтов (которые всегда загружаются в режиме CORS) и для любого ресурса, защищённого с помощью integrity.

Атрибут integrity включает Subresource Integrity (SRI). Вы указываете криптографический хеш файла; браузер загружает ресурс, вычисляет его хеш и отказывается применять его, если хеши не совпадают. Это защищает от компрометации CDN или подмены файла.

<link
  rel="stylesheet"
  href="https://cdn.example.com/bootstrap.min.css"
  integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
  crossorigin="anonymous"
/>

Формат хеша: <algorithm>-<base64-hash> (допустимые алгоритмы: sha256, sha384, sha512). Поскольку для проверки целостности браузеру нужно прочитать ответ, ссылка integrity на ресурс из другого источника также должна содержать crossorigin.

Атрибуты

Атрибут	Значение	Описание
as	content_type	Задаёт тип загружаемого контента. Обязателен при `rel="preload"`.
charset	char_encoding	Определяет кодировку связанного документа. Устарел в HTML5.
crossorigin	anonymous use-credentials	Настраивает параметры CORS для связанного ресурса.
href	URL	Задаёт URL внешнего файла.
hreflang	language_code	Задаёт язык текста связанного документа.
integrity	hash_value	Включает проверку целостности подресурсов для загружаемых ресурсов.
media	media_query	Задаёт устройство, для которого будут применяться стили.
rel	alternate author bookmark dns-prefetch first help icon last license next nofollow noreferrer pingback preload prefetch prev search stylesheet tag preconnect manifest modulepreload	Определяет отношение между текущим документом и связанным файлом. Основные значения: `stylesheet` (подключает CSS-файл), `icon` (подключает фавикон), `preload` (предзагружает ресурс), `alternate` (ссылается на альтернативную версию документа).
rev	reversed relationship	Определяет отношение между текущим и связанным документами. Устарел в HTML5.
sizes	Width x Height	Задаёт размер связанных иконок. Используется только с `rel="icon"`.
type	media_type	Задаёт MIME-тип (спецификацию для сетевой передачи различных типов файлов) связанного документа. Примечание: при подключении таблицы стилей атрибут `type="text/css"` является необязательным и по умолчанию соответствует CSS.

Тег <link> также поддерживает глобальные атрибуты и атрибуты событий.

Связанные ресурсы

HTML-тег <head> — место, где должен находиться каждый элемент <link>.
HTML-тег <script> — правильный способ загрузки JavaScript.
HTML-тег <style> — встроить CSS напрямую вместо подключения файла.
Введение в CSS — как работают подключаемые таблицы стилей.

Практика

Какой атрибут обязателен при использовании HTML-тега link с rel='preload'?

assrctargetdownload

Практика

Выберите все допустимые атрибуты HTML-тега link (правильных ответов несколько).

hrefrelmediasrctarget

Синтаксис

Пример HTML-тега <link>:

Подключение фавикона

Предзагрузка ресурсов с помощью rel="preload"

Подсказки ресурсов: preload, prefetch, preconnect и dns-prefetch

Альтернативные версии с rel="alternate"

crossorigin и integrity

Атрибуты

Связанные ресурсы

Практика

Пример HTML-тега `<link>`:

Предзагрузка ресурсов с помощью `rel="preload"`

Альтернативные версии с `rel="alternate"`

`crossorigin` и `integrity`