HTML тег <link>

Значение и применение

Элемент <link> определяет связь между документом и внешним ресурсом, используется для ссылки на внешние таблицы стилей.

Обычно <link> размещают в <head>. Для некоторых типов отношений, разрешённых в теле документа, например stylesheet, стандарт допускает размещение в <body>. Это пустой элемент без закрывающего тега.

Поддержка браузерами

Спецификация: multipage

Поддерживается во всех основных браузерах с 2015 года.

Отдельные значения (14) поддерживаются не везде — смотрите таблицу.

Показать браузеры
Совместимостьhtml.elements.link
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
link✓1✓12✓1✓≤12.1✓≤4✓18✓4✓≤12.1✓≤3.2✓1.0✓4.4✓≤3.2
as✓50✓17✓56✓37✓10✓50✓56✓37✓10✓5.0✓50✓10
blocking✓105✓105×✓91✓18.2✓105×✓72✓18.2✓20.0✓105✓18.2
charset✓1✓12✓1✓≤12.1✓≤4✓18✓4✓≤12.1✓≤3.2✓1.0✓4.4✓≤3.2
crossorigin✓34✓17✓18✓21✓10✓34✓18✓21✓10✓2.0✓37✓10
disabled✓1✓12✓1✓≤12.1✓≤4✓18✓4✓≤12.1✓≤3.2✓1.0✓4.4✓≤3.2
fetchpriority✓101✓101✓132✓87✓17.2✓101✓132✓70✓17.2✓19.0✓101✓17.2
href✓1✓12✓1✓≤12.1✓≤4✓18✓4✓≤12.1✓≤3.2✓1.0✓4.4✓≤3.2
hreflang✓1✓12✓1✓≤12.1✓≤4✓18✓4✓≤12.1✓≤3.2✓1.0✓4.4✓≤3.2
imagesizes✓73✓79✓78✓60✓17.2✓73✓79✓52✓17.2✓11.0✓73✓17.2
imagesrcset✓73✓79✓78✓60✓17.2✓73✓79✓52✓17.2✓11.0✓73✓17.2
integrity✓45✓17✓43✓32✓11.1✓45✓43✓32✓11.3✓5.0✓45✓11.3
media✓1✓12✓1✓≤12.1✓≤4✓18✓4✓≤12.1✓≤3.2✓1.0✓4.4✓≤3.2
referrerpolicy✓51✓79✓50✓38✓14✓51✓50✓41✓14✓7.2✓51✓14
no-referrer-when-downgrade✓51✓79×✓38×✓51×✓41×✓7.2✓51×
origin-when-cross-origin✓51✓79×✓38×✓51×✓41×✓7.2✓51×
unsafe-url✓51✓79×✓38×✓51×✓41×✓7.2✓51×
rel✓1✓12✓1✓9✓1✓18✓4✓10.1✓1✓1.0✓4.4✓1
rel="alternate stylesheet"××✓3×××✓4×××××
compression-dictionary✓130✓130✓preview✓115×✓130×✓86×✓28.0✓130×
dns-prefetch✓46✓79✓127✓33✓5✓46✓127✓33✓26✓5.0✓46✓26
expect✓124✓124×✓110✓18.2✓124×✓82✓18.2✓27.0✓124✓18.2
icon✓4✓12✓2✓9✓3.1✓18✓4××✓4.0✓38×
manifest✓39✓79×✓26✓17✓39✓58✓26✓11.3✓4.0✓39✓11.3
modulepreload✓66✓79✓115✓53✓17✓66✓115✓47✓17✓9.0✓66✓17
as-json✓147✓147×✓131✓26.2✓147×✓98✓26.2×✓147✓26.2
as-script✓66✓79✓115✓53✓17✓66✓115✓47✓17✓9.0✓66✓17
as-style✓147✓147×✓131×✓147×✓98××✓147×
preconnect✓46✓79✓39✓33✓11.1✓46✓39✓33✓11.3✓4.0✓46✓11.3
prefetch✓8✓12✓2✓15◐13.1✓18✓4✓14◐13.4✓1.5✓4.4×
preload✓50✓79✓85✓37✓11.1✓50✓85✓37✓11.3✓5.0✓50✓11.3
as-fetch✓50✓79✓85✓37✓11.1✓50✓85✓37✓11.3✓5.0✓50✓11.3
as-font✓50✓79✓85✓37✓11.1✓50✓85✓37✓11.3✓5.0✓50✓11.3
as-image✓50✓79✓85✓37✓11.1✓50✓85✓37✓11.3✓5.0✓50✓11.3
as-script✓50✓79✓85✓37✓11.1✓50✓85✓37✓11.3✓5.0✓50✓11.3
as-style✓50✓79✓85✓37✓11.1✓50✓85✓37✓11.3✓5.0✓50✓11.3
as-track✓50✓79×✓37✓11.1✓50×✓37✓11.3✓5.0✓50✓11.3
prerender◐63◐79×◐50×◐63×◐46×✓1.5◐63×
rev✓1✓12✓1✓≤12.1✓≤4✓18✓4✓≤12.1✓≤3.2✓1.0✓4.4✓≤3.2
sizes✓15✓79✓31✓15✓6✓18✓31✓14✓6✓1.0✓4.4✓6
target✓1✓12✓1✓≤12.1✓≤4✓18✓4✓≤12.1✓≤3.2✓1.0✓4.4✓≤3.2
type✓1✓12✓1✓≤12.1✓≤4✓18✓4✓≤12.1✓≤3.2✓1.0✓4.4✓≤3.2

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Атрибуты

Атрибут Значение Описание
charset char_encoding Не поддерживается в HTML5.
Определяет кодировку, связанного документа.
crossorigin anonymous
use-credentials 		Настраивает CORS-запрос. anonymous не передаёт учётные данные другому источнику; use-credentials включает их и требует явного разрешения сервера. Пустое или недопустимое значение означает anonymous. Поведение без атрибута зависит от типа ресурса и rel.
href URL Определяет местоположение связанного документа.
hreflang language_code Определяет язык текста связанного документа.
media media_query Условие применения ресурса, например print или (width <= 40rem); не адаптирует содержимое файла автоматически.
rel stylesheet | alternate | icon | manifest | preload | modulepreload | preconnect | dns-prefetch | prefetch | canonical | author | help | license | next | prev | search Отношение к ресурсу; определяет, как браузер обрабатывает link. В таблице перечислены распространённые значения, не все возможные расширения.
rev reversed relationship Не поддерживается в HTML5.
Указывает отношение между текущим документом и связанным документом (на который ведёт ссылка).
sizes Height x Width
any 		Определяет размер связанной иконки. Только для rel = "icon").
target _blank
_parent
_self
_top
framename 		Не поддерживается в HTML5.
Указывает, где будет загружен документ (окно/фрейм).
type media_type Указывает MIME-тип документа на который осуществляется переход.
as Тип назначения Для preload задаёт вид ресурса, например style, script, font или image; влияет на запрос и применение политик.
imagesrcset Список источников Адаптивные варианты изображения при rel="preload" as="image".
imagesizes Размеры и условия Ожидаемая ширина изображения для imagesrcset с дескрипторами w.
referrerpolicy Политика Referer Определяет, какую информацию об адресе страницы передавать при запросе.
integrity Хеши ресурса Проверка целостности загружаемого ресурса (SRI); при несоответствии он не используется. Для другого источника требуется корректный CORS.
blocking render Запрашивает блокировку рендеринга для поддерживаемых видов link в head; применимость зависит от отношения rel.
color Цвет CSS Цвет, используемый при оформлении соответствующей иконки, например маски; не перекрашивает произвольное изображение.
disabled Логический атрибут Отключает таблицу стилей, подключаемую через rel="stylesheet".
fetchpriority auto | high | low Подсказка приоритета запроса, а не гарантия порядка загрузки.

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

Создайте рядом theme.css, например с правилом p { color: blue; }. Предпросмотр не загружает внешние таблицы стилей.

Исходный код для изучения. Запуск на этой странице недоступен.

index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="theme.css" />
    <title>Внешние стили</title>
  </head>
  <body>
    <h1>Моя страница</h1>
    <p>Содержимое документа.</p>
  </body>
</html>

Отличия HTML 4.01 от HTML 5

В HTML5 добалено два новых атрибута и три удалено.

Значение CSS по умолчанию

CSS
link {
display: none;
}

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".