HTML тег <link>

HTML теги

Значение и применение

Элемент <link> определяет связь между документом и внешним ресурсом, используется для ссылки на внешние таблицы стилей.

Обращаю Ваше внимание, что элемент <link> размещается всегда внутри элемента <head> (как правило, перед его закрывающим тегом), при этом может быть использован любое количество раз. Элемент не требует закрывающего тега и содержит внутри себя только атрибуты.

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

ТегChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
<link>ДаДаДаДаДаДа

Атрибуты

АтрибутЗначениеОписание
charsetchar_encodingНе поддерживается в HTML5.
Определяет кодировку, связанного документа.
crossoriginhtml5anonymous
use-credentials
Атрибут определяет, используется ли CORS при загрузке.
У этого атрибута есть 2 допустимых значения:
anonymous
В этом случае перед загрузкой выполняется кросс-доменный запрос (Origin: HTTP header), при этом не передаются параметры доступа (такие как: cookie, сертификат X.509, логин/пароль для базовой аутентификации по HTTP). В ответе сервера должен присутствовать заголовок Access-Control-Allow-Origin: HTTP header.
use-credentials
Перед загрузкой выполняется кросс-доменный запрос (Origin: HTTP header) с указанием параметров доступа (в виде - cookie, сертификата или пары логин/пароль). В ответе сервера должен присутствовать заголовок Access-Control-Allow-Origin: HTTP header.
Если данный атрибут не задан, то CORS при загрузке не используется (отcутствует заголовок Origin: HTTP header). При неверном значении атрибута (содержится некорректное значение) используется значение anonymous.
hrefURLОпределяет местоположение связанного документа.
hreflanglanguage_codeОпределяет язык текста связанного документа.
mediamedia_queryУказывает, что файл адаптирован (оптимизирован) под определённые виды устройств. Атрибут может принимать несколько значений и используется, чтобы указать стиль для речевых или печатных устройств, для определенных моделей смартфонов и так далее.
relalternate
archives
author
bookmark
external
first
help
icon
last
license
next
nofollow
noreferrer
pingback
prefetch
prev
search
sidebar
stylesheet
tag
up
Указывает отношение между текущим документом и связанным документом (на который ведёт ссылка).Обязательный атрибут.
revreversed relationshipНе поддерживается в HTML5.
Указывает отношение между текущим документом и связанным документом (на который ведёт ссылка).
sizeshtml5Height x Width
any
Определяет размер связанной иконки. Только для rel = "icon").
target_blank
_parent
_self
_top
framename
Не поддерживается в HTML5.
Указывает, где будет загружен документ (окно/фрейм).
typemedia_typeУказывает MIME-тип документа на который осуществляется переход.

Пример использования

Самый распространенный метод добавления внешней таблицы стилей на страницу это использование тега <link>. Синтаксис следующий:
HTML 5 - <link rel = "stylesheet" href = "css/styles.css">
HTML 4.01 - <link rel = "stylesheet" type = "text/css" href = "css/styles.css">
XHTML - <link rel = "stylesheet" type = "text/css" href = "css/styles.css">

Для всех типов документов необходимы два атрибута:

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

Рассмотрим пример в котором установим определенные стили, которые браузер будет использовать при просмотре страниц, а другие при печати страниц (в нашем случае для экономии ресурса принтера - цвет всех элементов черный, а цвет заднего фона белый).

Для просмотра страниц пользователями мы установим следующие CSS стили (файл tag_link.css), которые свяжем с документом, используя элемент <link>:

h2 {color: brown;} /* устанавливаем цвет элемента - коричневый */
p {color: red;} /* устанавливаем цвет элемента - красный */
body {background-color: khaki;} /* устанавливаем цвет заднего фона - хаки */

Следующие CSS стили мы будем использовать при печати и предварительном просмотре страницы, вынесем их тоже в отдельный файл CSS (файл tag_link_print.css) и свяжем с документом, используя элемент <link>, а именно:

h2, p {color: #000;} /* групповой селектор устанавливает цвет элементов - черный */
body {background-color: #FFF; } /* устанавливаем цвет заднего фона - белый */

Теперь полный пример:

<!DOCTYPE html>
<html>
<head>
<title>Пример использования атрибута media HTML тега <style></title>
<link rel = "stylesheet" href = "../tag_link.css">
<link media = "print" rel = "stylesheet" href = "../tag_link_print.css">
</head>
<body>
	<h2>Утконос</h2>
	<p><b>Утконос (лат. Ornithorhynchus anatinus)</b> — водоплавающее млекопитающее отряда однопроходных, обитающее в Австралии. Это единственный современный представитель семейства утконосовых (Ornithorhynchidae); вместе с ехиднами образует отряд однопроходных (Monotremata) — млекопитающих, по ряду признаков близких к рептилиям. Это уникальное животное является одним из символов Австралии; оно изображено на реверсе австралийской монеты в 20 центов.</p>
</body>
</html>

Ниже показано как этот пример отображается в браузере, а на изображении как пример отображается в предварительном просмотре печати страницы (стили, которые мы установили для печати):

Пример использования атрибута media HTML тега link (таблицы стилей для конкретных типов устройств).
Пример использования атрибута media HTML тега link (таблицы стилей для конкретных типов устройств).

Отличия HTML 4.01 от HTML 5

В HTML5 добалено два новых атрибута и три удалено.

Значение CSS по умолчанию

link {
display: none;
}

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".

HTML теги