<link>
- 25 января 2023
Что делает тег
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.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023