HTML тег <link>

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

Описание

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

<link href="style.css" rel="stylesheet" type="text/css">

Первый атрибут href определяет адрес документа, который может быть как абсолютным так и относительным. Второй атрибут rel указывает связь между HTML файлом и тем, на что вы ссылаетесь, в данном случае мы ссылаемся на таблицу стилей, поэтому используется значение stylesheet. Атрибут type сообщает браузеру MIME тип документа, для таблиц стилей значением всегда будет "text/css".

Примечание: по стандарту HTML5, при подключении к документу внешнего файла CSS, атрибут type указывать не требуется:

<link href="style.css" rel="stylesheet">

Предварительная загрузка страниц

Обычно, когда вы кликаете по ссылке на другую страницу приходится ждать несколько секунд пока она загрузится. Однако, вы можете настроить вашу веб-страницу таким образом, чтобы определённые страницы загружались заранее в кэш браузера в то время пока вы находитесь на текущей странице. Это означает, что когда вы кликнете по ссылке для перехода на другую веб-страницу, то она откроется сразу и не надо будет ждать, пока она загрузится. Это называется "предварительное получение страницы". Чтобы сделать это, используется тег <link> с атрибутом rel="prefetch", а также указывается целевая страница, которая будет заранее загружена на компьютер.

<link rel="prefetch" href="httр://www.puzzleweb/html/tag_p.php">

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

Примечание: вместо адреса на HTML-документ можно указать путь к файлу другого типа (картинку, видео и тд.).

Атрибуты

href:

Указывает месторасположение (URL) внешнего файла (путь к файлу может быть указан с помощью абсолютного или относительного адреса).

hreflang:

Указывает двухбуквенный код языка, определяющий язык документа, на который ведет ссылка. Атрибут hreflang используется только совместно с атрибутом href.

media:

Определяет под какие устройства оптимизирован файл. Главным образом он используется с файлами таблиц стилей, для определения различных стилей под разные типы носителей. Атрибут media может принимать сразу несколько значений, разделяемых между собой пробелами.

rel:

Указывает связь между текущим документом и документом, на который ведет ссылка.

alternate - ссылка на альтернативную версию документа (то есть страницы для печати, перевод или зеркало).
author - определяет ссылку страницу об авторе документа или на страницу с контактными данными автора.
canonical - позволяет пометить страницы с дублирующимся контентом, это значит что все страницы, имеющие одинаковое содержимое должны содержать тег <link> с атрибутом rel="canonical".

Атрибут href, в этом случае, должен содержать ссылку на страницу с идентичным содержимым, которую поисковые системы должны считать основной:
```
<link rel="canonical" href="httр://www.puzzleweb/html/tag_p.php">
```
first - указывает ссылку, ведущую на первый документ из последовательности документов.
help - ссылка на документ со справкой.
icon - определяет путь к иконке, которая будет использована для текущего документа.
last - указывает ссылку, ведущую на последний документ в последовательности документов.
licence - ссылка на сведения об авторских правах для документа.
next - указывает, что этот документ является частью серии, и что ссылка будет вести на следующий документ в этой серии.
prefetch - указывает, что следует заранее кэшировать файл, на который ведет ссылка.
prev - указывает, что этот документ является частью серии, и что ссылка ведет на предыдущий документ в этой серии.
search - ссылка на поиск для документа.
stylesheet - определяет внешний файл, который будет использоваться в качестве таблицы стилей для данного документа.

sizes:

Указывает размер иконок для визуального отображения. Атрибут sizes используется только совместно с rel="icon", может принимать следующий значения:

ширинаXвысота - определяет список размеров, разделенных пробелами, каждый размер должен быть в формате - ширинаxвысота (размеры иконки определяются в пикселях), пример:
```
<link rel="icon" href="favicon.png" sizes="16x16 32x32" type="image/png">
```
any - иконка может масштабироваться до любого размера.

type:

Указывает MIME-тип (спецификация форматирования сообщений и кодирования информации для передачи по интернету) документа, на который ведет ссылка, используется только совместно с атрибутом href.

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

Стиль по умолчанию

link {
    display: none;
}

Пример

<head>
  <link rel="stylesheet" href="style.css">
</head>

Результат данного примера в окне браузера: