Тег <link>

Тег <link> (укр. – “посилання”) в HTML використовується для підключення зовнішніх ресурсів, зокрема стилів CSS, до веб-сторінки. Це самозакриваючий тег, який дозволяє зв’язувати сторінку з іншими файлами, такими як стилі, шрифти або іконки. Тег <link> є важливим елементом для налаштування зовнішнього вигляду сторінки та взаємодії з іншими ресурсами.

Основне призначення тега <link> — це підключення зовнішніх файлів, зокрема для стилів (CSS), шрифтів та іконок, до HTML-документа. Тег <link> зазвичай розміщується в секції <head> документа для того, щоб ресурси завантажувались до рендерингу сторінки.

Атрибути

Специфічні атрибути

  • rel — визначає відношення між поточним документом і підключеним ресурсом. Для підключення стилів використовується значення stylesheet. Наприклад:
<link rel="stylesheet" href="styles.css">
  • href — вказує шлях до підключеного файлу. Це може бути локальний шлях до файлу або URL для підключення зовнішнього ресурсу. Наприклад:
<link rel="stylesheet" href="styles.css">
  • type — вказує MIME-тип підключеного файлу. Для CSS це зазвичай text/css. Наприклад:
<link rel="stylesheet" href="styles.css" type="text/css">
  • media — дозволяє визначити умови для підключення стилів, наприклад, лише для певних розмірів екрану або типів пристроїв. Наприклад:
<link rel="stylesheet" href="styles.css" media="screen">

Глобальні атрибути

Тег <link> підтримує всі глобальні атрибути HTML, включаючи:

  • id — унікальний ідентифікатор для елемента. Наприклад:
<link id="main-stylesheet" rel="stylesheet" href="styles.css">
  • class — дозволяє додавати CSS-класи для елемента. Наприклад:
<link class="styles-link" rel="stylesheet" href="styles.css">
  • style — інлайн-стилі для елемента. Наприклад:
<link style="display: none;" rel="stylesheet" href="styles.css">

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

1. Підключення зовнішнього CSS файлу

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Приклад використання тегу <link></title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Вітання!</h1>
    <p>Цей текст стилізований за допомогою зовнішнього CSS файлу.</p>
</body>
</html>

Пояснення: Тег <link> підключає зовнішній файл стилів styles.css для веб-сторінки.

2. Підключення шрифтів з Google Fonts

<head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
</head>

Пояснення: Тег <link> підключає шрифт Roboto з Google Fonts для використання на сторінці.

3. Підключення іконки для сторінки

<head>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>

Пояснення: Тег <link> вказує на іконку для веб-сторінки, яку буде використовувати браузер у вкладці.

4. Умовне підключення стилів для конкретних пристроїв

<head>
    <link rel="stylesheet" href="styles.css" media="screen and (max-width: 768px)">
</head>

Пояснення: Тег <link> підключає стилі тільки для екранів із шириною до 768 пікселів

Додаткові моменти

  • Тег <link> з атрибутом rel="stylesheet" є найбільш використовуваним для підключення зовнішніх файлів стилів CSS.
  • Завжди підключайте стилі в <head> для того, щоб вони завантажувались до рендерингу контенту сторінки, що дозволяє уникнути мерехтіння стилів.
  • Використання CSS-медіа запитів через атрибут media дозволяє забезпечити адаптивність сайту для різних пристроїв.