Тег <link> HTML подключение внешнего файла, ресурса

Рейтинг: 3 из 5, голосов 28

17 октября 2019 г.

Тег <link> в HTML используется для связи текущего документа (страницы) с внешним ресурсом.

Чаще всего HTML тег <link> используют для подключения каскадных таблиц стилей CSS.

Тег <link> должен быть расположен внутри тега <head>. Можно использовать неограниченное количество элементов link HTML на одной странице.

Синтаксис

<link rel="тип_связи" атрибуты>

Основные вариации тега link

Ниже представлены распространенные случаи использования тега <link>.

Подключение внешнего файла таблиц стилей CSS

Наиболее употребляемый вариант тега link - подключение к HTML документу файла стилей CSS. Для этого используются атрибуты rel="stylesheet" и type="text/css".

<link href="https://example.com/css/style.css" rel="stylesheet" type="text/css">

Подробнее о способах подключения таблиц стилей CSS читайте в статье: Подключение стилей CSS к HTML документу. Как подключить CSS файл.

Подключение иконки документа favicon

С помощью конструкции ниже, подключается иконка (favicon, фавикон), которая будет выведена в заголовке вкладки возле названия документа (страницы).

<link href="https://example.com/favicon.ico" rel="icon" type="image/x-icon">

Указание альтернативной версии HTML документа

Часто используется для указания иноязычной версии документа (версии страницы на другом языке). Для этого используется атрибут тега <link> rel="alternate" и hreflang="код_языка".

<link href="https://example.com/en/site_page.html" hreflang="en" rel="alternate">

Пример использования тега <link> в HTML коде

<!DOCTYPE html>
<html>
  <head>
    <title>Тег link в коде HTML страницы</title>
    <link href="https://example.com/css/style.css" rel="stylesheet" type="text/css"> <!-- подключение файла стилей CSS -->
    <link href="https://example.com/favicon.ico" rel="icon" type="image/x-icon"> <!-- подключение иконки favicon -->
    <link href="https://example.com/fr/page.html" hreflang="fr" rel="alternate"> <!-- альтернативная версия страницы -->
  </head>
  <body>
    <!-- контент страницы -->
  </body>
</html>

Поддержка браузерами

Тег
<link>	Да	Да	Да	Да	Да

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

Атрибут	Значение	Описание
crossorigin	anonymous use-credentials	Определяет как будут обрабатываться запросы, использующие CORS. anonymous - без отправки учетных данных; use-credentials - с отправкой учетных данных.
href	URL	URL адрес связанного ресурса.
hreflang	language_code	Язык связанного ресурса.
media	media_query	Определяет условия подключения ресурса (содержит требования к устройству пользователя). Если атрибут не указан, ресурс будет использован для любого устройства пользователя.
rel	alternate author dns-prefetch help icon license next pingback preconnect prefetch preload prerender prev search stylesheet	Обязательный атрибут. Определяет отношение текущего ресурса к прикрепленному (чем является прикрепленный ресурс для текущего). alternate - альтернативная версия документа. Например, страница на другом языке, версия страницы для печати, зеркало; author - ссылка на автора страницы; dns-prefetch - предварительная конвертация домена связанного файла в IP через DNS (ускоряет дальнейшую загрузку подключаемого файла); help - ссылка на справку; icon - подключение иконки документа. Иконка обычно выводится возле названия страницы в списке вкладок; license - ссылка на документ, содержащий правовую информацию о текущем документе; next - следующий документ (для документов, объединенных в последовательность); pingback - адрес ресурса, отвечающего за обработку pingback текущего документа; preconnect - предварительная установка TCP, TLS связи со связанным файлом (ускоряет дальнейшую загрузку подключаемого файла); prefetch - предварительная загрузка файла с дальнейшим кешированием с низким приоритетом. Позволяет не ждать загрузки файла в момент первого использования; preload - предварительная загрузка файла. Позволяет не ждать загрузки файла в момент первого использования файла; prerender - предварительная загрузка и рендер. Браузер предварительно загрузит страницу по ссылке и подключенные к ней файлы, построит DOM дерево. При дальнейшем переходе на эту страницу, она загрузится (будет доступна) моментально; prev - предыдущий документ (для документов, объединенных в последовательность); search - ссылка на ресурс, способный выполнить поиск по текущему документу; stylesheet - подключение каскадных таблиц стилей CSS.
sizes	ширинаxвысота	Указывает размер прикрепляемых иконок. Формат: значение ширины в пикселях, латинская буква "x" (большая или маленькая), значение высоты в пикселях. Можно указывать несколько размеров через пробел. Для масштабируемых иконок используется значение "any".
type	media_type	Определяет тип содержимого тега. Для подключения таблиц стилей используется значение: "text/css".

Тег <link> также поддерживает глобальные HTML атрибуты.

Устаревшие атрибуты

Атрибут	Значение	Описание
charset	кодировка	Указывает на кодировку связанного ресурса.
rev	alternate author dns-prefetch help icon license next pingback preconnect prefetch preload prerender prev search stylesheet	Определяет отношение прикрепленного ресурса к текущему (чем является текущий ресурс для прикрепленного). Смотрите расшифровку значений выше, в описании атрибута "rel".
target	_blank _parent _self _top имя фрейма	Определяет где будет открыт связанный ресурс: _blank - в новой вкладке или окне; _parent - в родительском окне; _self - в текущем окне (используется по умолчанию); _top - на весь экран.

Атрибут

Значение

Описание

charset

кодировка

Указывает на кодировку связанного ресурса.

rev

alternate
author
dns-prefetch
help
icon
license
next
pingback
preconnect
prefetch
preload
prerender
prev
search
stylesheet

Определяет отношение прикрепленного ресурса к текущему (чем является текущий ресурс для прикрепленного).

Смотрите расшифровку значений выше, в описании атрибута "rel".

target

_blank
_parent
_self
_top
имя фрейма