HTML :: Тег <link>

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

Синтаксис

<head>
  <link href="Адрес">	             			(закрывающий тег не требуется)
</head>

Атрибуты

href – задает путь к внешнему ресурсу. В качестве адреса ссылки могут использоваться как абсолютные, так и относительные адреса (подробнее здесь).
hreflang – данный атрибут является консультативным и сообщает язык подключаемого файла. Его следует использовать только совместно с атрибутом href. Ознакомиться с полным списком кодов языков можно на нашей странице здесь.
media – в качестве значения принимает допустимый медиа-запрос или тип устройства, для которого будет применяться подключаемая таблица стилей. Допустимы следующие значения типов устройств:
- all – все устройства (применяется по умолчанию);
- braille – устройства, использующиеся слепыми людьми (основаны на системе Брайля);
- embossed – принтеры, использующие для печати систему Брайля;
- handheld – смартфоны, планшеты и другие устройства с малой шириной экрана;
- print – принтер (так будет выглядеть страница на бумаге);
- screen – экран монитора;
- speech – речевые браузеры;
- projection – проектор;
- tty – терминалы и другие портативные устройства с ограниченными возможностями экрана;
- tv – телевизор.
Если одна и таже таблица стилей должна применяться сразу для нескольких устройств или разрешений экрана, то значения атрибута media следует перечислить через пробел.
rel – сообщает браузеру тип отношения между текущим документом и внешним ресурсом.
- alternate – внешний ресурс является альтернативной версией документа (например, представляет собой вариант страницы для печати или файл в формате XML);
- author – внешний ресурс содержит имя автора текущего документа или статьи;
- help – внешний ресурс является файлом справки;
- icon – внешний ресурс является файлом иконки сайта или документа;
- license – внешний ресурс содержит лицензию, по которой распространяется основное содержимое текущего документа;
- next – текущий документ является одним из последовательности, а внешний ресурс представляет собой следующий документ в этой последовательности;
- prev – текущий документ является одним из последовательности, а внешний ресурс представляет собой предыдущий документ в этой последовательности;
- search – внешний ресурс используется для поиска по сайту или отдельному документу;
- stylesheet – внешний ресурс является таблицей стилей (чаще всего CSS).
sizes – указывает размер иконок для визуального отображения и должен использоваться совместно с атрибутом rel="icon". Размер записывается в формате widthXheight или widthxheight и задается в пикселях. Если в файле хранится сразу несколько иконок разных размеров, то разрешается перечислять их размеры через пробел. Также в качестве значения разрешается использовать значение any, которое сообщает браузеру о том, что иконку можно масштабировать до любого размера (например, если она задана в векторном формате svg).
type – сообщает mime-тип подключаемого к странице файла. Ознакомиться с полным списком mime-типов можно на сайте Мозилы здесь или на Википедии здесь.
Также для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.

Ссылки

Официальный сайт W3C: https://html.spec.whatwg.org/multipage/semantics.html#the-link-element

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/HTML/Element/link

Примеры

HTML

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример №1</title>
	
	<!-- Зададим базовый адрес -->
	<base href="https://site.name/">

	<!-- Эта таблица будет использоваться всегда, пока не  -->
	<!-- будет переопределена нижними таблицами   -->
	<link href="css/style_1.css" media="all" rel="stylesheet" type="text/css">

	<!-- Если смартфон, то будет использоваться style_2.css -->
	<link href="css/style_2.css" media="handheld" rel="stylesheet" type="text/css">

	<!-- Если принтер, то будет использоваться style_3.css -->
	<link href="css/style_3.css" media="print" rel="stylesheet" type="text/css">

</head>
<body>
	...
	Тут расположена выводимая информация.
	...
</body>
</html>

Пример №1

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример №2</title>
	
	<!-- Зададим базовый адрес -->
	<base href="https://site.name/">

	<!-- Подключаем к странице иконку в формате ICO -->
	<link rel="icon" href="favicon.ico" type="image/x-icon">	

</head>
<body>
	<p>
		Если необходимо подключить иконки других форматов,<br>
		следует использовать следующие конструкции:
	</p>

	&lt;link rel="icon" href="favicon.jpeg" type="image/jpeg"&gt;<br>
	 
	&lt;link rel="icon" href="favicon.png" type="image/png"&gt;<br>
	 
	&lt;link rel="icon" href="favicon.gif" type="image/gif"&gt;
</body>
</html>

Пример №2