<link> - HTML-елемент зв'язку з зовнішніми ресурсами

HTML-елемент <link> визначає зв'язки між поточним документом та зовнішнім ресурсом. Цей елемент найчастіше використовується для підключення таблиць стилів, але також може використовуватися для встановлення іконок сайту (як "favicon"), канонічних URL-адрес, альтернативних версій сторінки та інших зв'язків.

Елемент <link> є порожнім елементом, що означає, що він не має закриваючого тега. Він розміщується всередині елемента <head>.

HTML
<link href="URL" rel="stylesheet">

Атрибути

Цей тег може мати глобальні атрибути.

href

URL-адреса пов’язаного ресурсу. Це може бути абсолютний або відносний шлях.

rel

Визначає відношення між поточним документом та пов’язаним ресурсом. Найпоширеніші значення:

  • stylesheet: Підключає таблицю стилів.
  • icon: Вказує на іконку сайту (favicon).
  • canonical: Вказує на бажану URL-адресу для сторінки (для SEO).
  • preload: Вказує браузеру заздалегідь завантажити ресурс.
  • alternate: Вказує на альтернативну версію документа (наприклад, іншою мовою або для іншого медіа).
type

Визначає MIME-тип пов’язаного ресурсу. Для таблиць стилів це зазвичай text/css.

as

Використовується з rel="preload" для вказівки типу контенту, що завантажується (наприклад, script, style, image, font).

blocking

Вказує, що певні операції повинні бути заблоковані до завантаження ресурсу. Використовується для оптимізації рендерингу.

crossorigin

Визначає, чи слід використовувати CORS при завантаженні ресурсу.

disabled

Булевий атрибут, який вимикає зв’язаний ресурс. Зазвичай використовується для вимкнення таблиць стилів за допомогою JavaScript.

fetchpriority

Вказує відносну пріоритетність завантаження ресурсу. Можливі значення: high, low, auto.

hreflang

Вказує мову пов’язаного ресурсу.

imagesizes

Використовується з rel="preload" та as="image" для вказівки розмірів зображення, допомагаючи браузеру вибрати відповідний ресурс з imagesrcset.

imagesrcset

Використовується з rel="preload" та as="image" для попереднього завантаження адаптивних зображень.

integrity

Містить хеш-код ресурсу для перевірки його цілісності (Subresource Integrity), що захищає від атак.

media

Визначає, для яких медіа-пристроїв призначений пов’язаний ресурс (наприклад, screen, print, (max-width: 600px)).

referrerpolicy

Визначає, яку інформацію про реферера надсилати під час завантаження ресурсу.

sizes

Визначає розміри іконки (використовується з rel="icon").

title

Використовується для визначення альтернативних таблиць стилів.

Технічне резюме

Категорія контенту

Метадані.

Дозволений вміст

Немає, це пустий елемент.

Пропуск тегів

Повинен мати початковий тег і не повинен мати кінцевого тегу.

Дозволені батьківські елементи

Елемент <head> або <noscript>, що є нащадком <head>.

Роль ARIA

link

DOM інтерфейс

HTMLLinkElement

Приклади використання

HTML
<!-- Підключення таблиці стилів -->
<link href="styles.css" rel="stylesheet">

<!-- Підключення іконки сайту -->
<link rel="icon" href="favicon.ico" type="image/x-icon">

<!-- Попереднє завантаження шрифту -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Підтримка браузерів

<link>
as
blocking
charset
crossorigin
disabled
fetchpriority
href
hreflang
imagesizes
imagesrcset
integrity
media
referrerpolicy
rel
rev
sizes
target
type

Останнє оновлення: