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

Рейтинг: 5 из 5, голосов 2
+++++

Тег <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>

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

Тег Google Chrome Internet Explorer Mozilla FireFox Safari Opera
<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 - на весь экран.
Оцените, насколько полезна эта страница
+++++
Оставьте комментарий

Отправляя форму, я даю согласие на обработку персональных данных.