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

<link href="style.css" rel="stylesheet" type="text/css">

Давайте разберем ключевые атрибуты. Атрибут href задает адрес нужного файла - он может быть как абсолютным, так и относительным (подробнее об этом вы можете узнать в соответствующей главе). Атрибут rel описывает природу связи: поскольку мы подключаем стили, значением выступает stylesheet. Наконец, атрибут type сообщает браузеру MIME-тип файла; для CSS это всегда "text/css".

<link href="style.css" rel="stylesheet">

href:

Определяет URL внешнего файла (путь может быть указан как полный адрес, так и относительный).

hreflang:

Задает двухбуквенный код языка документа, на который ведет ссылка. Работает только в связке с атрибутом href.

media:

Позволяет определить, для каких типов устройств или сред оптимизирован файл. Это особенно полезно для CSS-файлов, позволяя загружать разные стили под мобильные устройства и десктопы. Может принимать несколько значений через пробел.

rel:

Характеризует тип связи между текущим документом и целевым. Вот основные варианты:

• alternate - указывает на альтернативную версию страницы (например, для печати, перевод или зеркало).
• author - ведет на страницу об авторе или с его контактными данными.
• first - ссылка на первый документ в последовательности.
• help - отсылка к документации или справке.
• icon - задает путь к иконке (favicon), отображаемой в закладках браузера.
• last - ссылка на последний документ в серии.
• licence - ведет на страницу с информацией об авторских правах.
• next - указывает, что текущая страница часть серии, а ссылка ведет на следующую часть.
• prefetch - рекомендует браузеру заранее закэшировать указанный файл для ускорения загрузки в будущем.
• prev - указывает на предыдущий документ в серии.
• search - ссылка на страницу поиска по сайту.
• stylesheet - обозначает внешний файл, используемый как таблица стилей.

sizes:

Указывает размеры иконок. Используется строго с rel="icon". Возможные значения:

• ширинаXвысота - список размеров через пробел в формате "ширинаxвысота" (в пикселях). Пример:

  <link rel="icon" href="favicon.png" sizes="16x16 32x32" type="image/png">

• any - иконка способна масштабироваться до любых размеров.

type:

Задает MIME-тип (стандарт кодирования информации для передачи в интернете) целевого документа. Применяется совместно с href.

Помимо этого, тег link поддерживает глобальные атрибуты HTML.

<head> <link rel="stylesheet" href="style.css"></head>