Тег <link>
Описание
Тег <link> устанавливает связь между текущим документом и внешним ресурсом. Это одиночный тег, который размещается в <head> и используется преимущественно для подключения CSS-файлов, иконок и других зависимостей.
<head>
<link rel="stylesheet" href="styles.css">
</head>
<head>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="icon.svg" type="image/svg+xml">
</head>
<head>
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="hero-image.webp" as="image">
<link rel="preconnect" href="https://fonts.googleapis.com">
</head>
<head>
<!-- Критический CSS -->
<link rel="stylesheet" href="critical.css">
<!-- Отложенная загрузка остальных стилей -->
<link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>
<!-- Предзагрузка шрифтов -->
<link rel="preload" href="font.woff2" as="font" crossorigin>
</head>
Тег <link> является важным инструментом для управления ресурсами веб-страницы, влияя на её производительность, внешний вид и SEO-оптимизацию.
Атрибуты
| as | Тип содержимого для предзагрузки |
| crossorigin | Настройки CORS для ресурса |
| href | URL связанного ресурса |
| hreflang | Язык связанного ресурса |
| imagesizes | Размеры изображений для srcset |
| imagesrcset | Набор изображений для разных разрешений |
| integrity | Контрольная сумма для проверки целостности |
| media | Тип устройства/медиа-запрос |
| referrerpolicy | Политика отправки referrer |
| rel | Тип отношения между документами |
| sizes | Размеры иконок |
| title | Название альтернативного ресурса |
| type | MIME-тип связанного ресурса |
| charset | Кодировка символов (устарел в HTML5) |
| rev | Обратное отношение (устарел в HTML5) |
Поддержка браузерами
 |
 |
 |
 |
 |
|---|---|---|---|---|
| 3.0 | 1.0 | 4.0 | 1.0 | 1.0 |