Тег <link> | Справочник HTML
http://belarusweb.net
Основы создания сайтов

Тег <link>

Описание

Тег <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-типов можно на сайте Мозилы здесь или на Википедии здесь.
  • Также для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.

Ссылки

Примеры

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

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

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

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

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

Пример №1

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример №2</title>
	
	<!-- Зададим базовый адрес -->
	<base href="http://belarusweb.net/">

	<!-- Подключаем к странице иконку в формате 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