HTML-тег <link>

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

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

Базовый синтаксис HTML-тега <link>

Базовая структура тега <link> : 

<link rel="relationship" href="URL" />

Атрибут rel определяет связь между текущим документом и связанным ресурсом, а атрибут href определяет URL-адрес ресурса.

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

  • rel: определяет связь между текущим документом и связанным ресурсом. Возможные значения: <ul class="wp-block-list">
  • stylesheet : Связывает внешний файл CSS.
  • icon : Ссылается на фавикон.
  • alternate : Ссылки на альтернативную версию документа.
  • preload : Предварительно загружает ресурс для повышения производительности.
  • href: Указывает URL-адрес связанного ресурса.
  • тип: указывает тип MIME связанного ресурса(например, text/css для таблиц стилей).
  • media: указывает тип носителя для связанного ресурса(например, screen , print , all ).
  • размеры: определяет размер значков при ссылке на фавиконки.
  • crossorigin: указывает, как следует обрабатывать связанный ресурс в отношении запросов между источниками.

    • Связывание внешней таблицы стилей с помощью тега ссылки

    Тег <link> чаще всего используется для ссылки на внешний файл CSS: 

    <!DOCTYPE html>
<html>
    <head>
        <title>My Web Page</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <h1>Welcome to My Website</h1>
        <p>This page uses an external CSS file for styling.</p>
    </body>
</html>

    стили.css

    Копировать 
    body {
    background: #ffffaa;
}
h1 {
    color: green;
}
p {
    font-style: italic;
}
    Связывание внешней таблицы стилей с помощью тега ссылки

    Объяснение: Атрибут rel="stylesheet" указывает, что связанный ресурс является файлом CSS, а атрибут href предоставляет путь к таблице стилей.

    Ссылка на фавикон

    Вы можете использовать тег <link> для ссылки на значок вашего сайта: 

    <!DOCTYPE html>
<html>
    <head>
        <title>My Web Page</title>
        <link rel="icon" href="favicon.ico" type="image/x-icon">
    </head>
    <body>
        <h1>Welcome to My Website</h1>
    </body>
</html>

    Пояснение: Атрибут rel="icon" указывает, что связанный ресурс является значком веб-сайта.

    Предварительная загрузка ресурсов

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

    <!DOCTYPE html>
<html>
    <head>
        <title>My Web Page</title>
        <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin="anonymous">
    </head>
    <body>
        <h1>Welcome to My Website</h1>
        <p>This page preloads a font for faster rendering.</p>
    </body>
</html>

    Объяснение: Атрибут rel="preload" указывает, что ресурс следует загружать заранее для повышения производительности.

    Оформление тега <link> с помощью CSS

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

    стили.css

    Копировать 
    body {
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    color: #333;
}

h1 {
    color: #007BFF;
}

    Результат: Связанный файл CSS стилизует HTML-документ, применяя семейство шрифтов, цвет фона и цвет текста.

    Практическое применение тега <link>

    • Привязка таблиц стилей: прикрепляйте внешние файлы CSS для стилизации своей веб-страницы.
    • Добавление значков: укажите значки для вкладок и закладок браузера.
    • Предварительная загрузка ресурсов: оптимизируйте производительность, предварительно загружая шрифты, скрипты или изображения.
    • Альтернативные таблицы стилей: предоставьте альтернативные таблицы стилей для настройки пользователем или тем.
    • Связи документов: установите ссылки на альтернативные версии, например, версии для печати или переводные версии.