<link>

Что делает тег

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

Синтаксис тега <link>

<link rel="stylesheet" type="text/css" href="styles.css">

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

Тег является частью спецификации HTML Living Standard.

Семантический или нет

Тег <link> считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.

Примеры использования

Ссылка на таблицу стилей:

<link rel="stylesheet" type="text/css" href="styles.css">

Ссылка на иконку:

<link rel="icon" type="image/png" href="favicon.png">

Ссылка на скрипт:

<link rel="preload" as="script" href="script.js">

Ссылка на таблицу стилей для устройств с определённой шириной:

<link rel="stylesheet" type="text/css" href="mobile.css" media="only screen and (max-width: 600px)">

Для чего использовать тег <link>

• Для ссылки на таблицу стилей.
• Для ссылки на иконку, которая будет отображаться в адресной строке браузера или на странице.
• Для ссылки на RSS-канал.
• Для ссылки на канонический URL, чтобы избежать проблем с дублированием контента.

Атрибуты тега <link>

href — адрес гиперссылки.

rel — указывает связь между текущим документом и связанным ресурсом.

as — тип ресурса, на который вы ссылаетесь.

type — MIME-тип связанного ресурса.

media — медиазапрос, для которого предназначен связанный ресурс.

sizes — размер иконок в ссылке rel="icon".

integrity — ожидаемое криптографическое хеш-значение связанного ресурса.

crossorigin — как элемент будет обрабатывать CORS-запросы.

Глобальные атрибуты

Тег поддерживает все глобальные атрибуты HTML.

Ограничения

Тег <link> может использоваться только для ссылки на внешние ресурсы. Его нельзя использовать для определения внутренних стилей или скриптов.

Нюансы

• Если атрибут rel имеет значение stylesheet, атрибут type может быть опущен, так как по умолчанию используется значение text/css.
• Если атрибут rel имеет значение icon, атрибут type должен иметь значение image/png.
• Атрибут as используется только для запросов предварительной загрузки.

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

Тег поддерживается всеми современными браузерами. Актуальная информация — на сaniuse.

Альтернативные теги

Прямых альтернатив для <link> не существует, но некоторые его функции можно реализовать с помощью других тегов, таких как <style> для инлайн-стилей или <script> для вставки скриптов.

Чем заменить тег

Замены тегу не существует, но его функциональность может быть реализована с помощью альтернативных тегов, упомянутых выше.

Актуальность

Тег не устарел, можете использовать его в веб-разработке.

Хотите узнать больше об HTML-тегах?

Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.