<link>: Элемент - ссылка на внешний ресурс
==========================================

**Элемент HTML - Ссылка на Внешний Ресурс (`<link>`)** определяет отношения между текущим документом и внешним ресурсом. Этот элемент чаще всего используется для ссылки на stylesheets, а также для создания иконок сайта (как для иконок в стиле "favicon", так и для иконок домашних экранов и приложений мобильных устройств) среди прочего.

Интерактивный пример
--------------------

Чтобы подключить таблицу стилей, вы должны включить элемент `<link>` внутри вашего `<head>` следующим образом:


```html
<link href="main.css" rel="stylesheet" />
```


В этом простом примере указывается путь к таблице стилей внутри атрибута `href` и атрибут `rel` со значением `stylesheet`. `rel` означает "отношения (relationship)", и, вероятно, является одной из ключевых особенностей элемента `<link>` — значение сообщает как указанный элемент связан с содержащим его документом. Как вы увидите в нашем справочнике типы ссылок (en-US), есть много различных видов отношений.

Существует ряд других распространённых типов, с которыми вы столкнётесь. Например, ссылка на сайт иконок:


```html
<link rel="icon" href="favicon.ico" />
```


Есть ряд других значений `rel` для иконок, в основном, используемых для обозначения специальных типов иконок для использования на различных мобильных платформах, например:


```html
<link
 rel="apple-touch-icon-precomposed"
 sizes="114x114"
 href="apple-icon-114.png"
 type="image/png" />
```


Атрибут `sizes` определяет размер иконки, когда `type` содержит тип MIME связанного ресурса. Они предоставляют советы, позволяющие браузеру выбрать наиболее подходящую иконку.

Вы можете, также, указать медиа тип или запрос внутри атрибута `media`; этот ресурс будет загружен только в том случае, если media состояние равно true. Например:


```html
<link href="print.css" rel="stylesheet" media="print" />
<link
 href="mobile.css"
 rel="stylesheet"
 media="screen and (max-width: 600px)" />
```


В элемент `<link>` также были добавлены некоторые новые интересные возможности производительности и безопасности, к примеру:


```html
<link
 rel="preload"
 href="myFont.woff2"
 as="font"
 type="font/woff2"
 crossorigin="anonymous" />
```


Значение `rel` - `preload` указывает, что браузер должен предварительно загрузить этот ресурс (смотрите Предварительная загрузка контента при помощи rel="preload" (en-US) для более подробной информации), атрибут `as` указывает на определённый класс загружаемого контента. Атрибут `crossorigin` указывает должен ли ресурс загружаться с помощью запроса CORS.

Другие замечания по использованию:

* Элемент `<link>` может присутствовать в элементах `<head>` или `<body>`, в зависимости от того, имеет ли он тип ссылки, являющейся **body-ok**. Например, ссылка типа `stylesheet` является body-ok,и, поэтому, `<link rel="stylesheet">` допускается в body. Однако, это не очень хорошая практика использования; более осмысленно отделять ваши `<link>` от содержимого body, помещая их в `<head>`.
* При использовании `<link>` для установки favicon сайта, и когда ваш сайт использует Политику Безопасности Контента (CSP) для повышения безопасности, политика применяется к favicon. Если вы столкнулись с проблемой при загрузке favicon, проверьте, что `img-src` директива (en-US) заголовка `Content-Security-Policy` (en-US) не препятствует доступу к ней.
* Спецификации HTML и XHTML определяют обработчики событий для элемента `<link>`, но не указывают как они будут использоваться.
* В XHTML 1.0, пустые элементы, такие как `<link>`, требуют слеш: `<link />`.
* WebTV поддерживает использование значения `next` для `rel` в качестве предварительной загрузки следующей страницы в серии документов.
Атрибуты
--------

Этот элемент включает в себя глобальные атрибуты.

`as`

Этот атрибут используется только для элементов `<link>` с атрибутом `rel="preload"` или `rel="prefetch"`. Он указывает тип контента, загружаемого `<link>`, который необходим для определения приоритетов контента, сравнения запросов, применения корректного content security policy, и установки корректного `Accept` запрашиваемого заголовка.

`crossorigin`

Этот перечисляемый атрибут указывает, должен ли CORS использоваться при загрузки ресурса. CORS-поддерживаемые изображения могут быть повторно использованы в элементе `<canvas>` не *искажая* их. Допустимы значения:

`anonymous`

Cross-origin запрос (т.е. с HTTP-заголовком `Origin`) выполняется, но учётные данные не отправляются (т.е. нет cookie, сертификата X.509, или базовой аутентификации HTTP). Если сервер не передал учётные данные исходному сайту (нет настроенного HTTP-заголовка `Access-Control-Allow-Origin`), изображение будет искажено, а его использование ограничено.

`use-credentials`

Cross-origin запрос (т.е. с HTTP-заголовком `Origin`) выполняется вместе с отправкой учётных данных (т.е. выполняется аутентификация cookie, сертификата, и/или базового HTTP). Если сервер не передал учётные данные исходному сайту (через HTTP-заголовок `Access-Control-Allow-Credentials` (en-US)), ресурс будет искажён, а его использование ограничено.Если атрибут отсутствует, ресурс загружается без запроса CORS (т.е. без отправки HTTP-заголовка `Origin)`, предотвращая его незагрязненное использование. В случае невалидности, он обрабатывается как при использовании ключевого слова **anonymous.** Для получения дополнительной информации смотрите CORS settings attributes.


`href`

Этот атрибут определяет URL, связываемого ресурса. URL может быть абсолютным или относительным.

`hreflang`

Этот атрибут определяет язык, связываемого ресурса. Он является консультативным. Допустимые значения определяются BCP47. Используйте этот атрибут только если присутствуют атрибуты `href`.

`importance` 
Экспериментальная возможность

Указывает на относительную важность ресурса. Приоритетные подсказки передаются используя значения:**`auto`**: указывает на **отсутствие предпочтений**. Браузер может использовать собственную эвристику для определения приоритетов ресурсов.**`high`**: указывает браузеру, что ресурс находится в **высоком** приоритете.**`low`**: указывает браузеру, что ресурс находится в **низком** приоритете.

> 
> \*\*Примечание:\*\*Атрибут `importance` можно использовать только для элементов `<link>` с атрибутами `rel="preload"` или `rel="prefetch"`.
> 
> 
> 

`integrity` 
Экспериментальная возможность

Содержит встроенные метаданные — криптографический хеш-код ресурса(файла) в кодировке base64, который вы сообщаете браузеру для загрузки. Браузер может использовать его для проверки, что загруженный ресурс был получен без неожиданных манипуляций. Смотрите Subresource Integrity (en-US).

`media`

Этот атрибут указывает медиа, который применяет связываемый ресурс. Его значение должно быть типом медиа или медиавыражением. Этот атрибут, в основном, полезен при связывании с внешними таблицами стилей — он позволяет пользовательскому агенту выбрать наиболее подходящее устройство для запуска.

**Примечание:**

* В HTML 4, это может быть только простой, разделённый пробелами, список литералов, описывающих медиа, т.е. media типы и группы, которые определены и допустимы в качестве значений для этого атрибута, такие как `print`, `screen`, `aural`, `braille`. HTML5 распространил это на любые медиавыражения, которые являются расширенным набором допустимых значений HTML 4.
* Браузеры, не поддерживающие медиавыражения, могут не распознать соответствующую ссылку; не забудьте установить резервные ссылки, ограниченные набором медиавыражений, определённым в HTML 4.

`referrerpolicy` 
Экспериментальная возможность

Строка, указывающая какой реферер использовать при загрузки ресурсов:

* `no-referrer` означает, что заголовок `Referer` не будет отправлен.
* `no-referrer-when-downgrade` означает, что заголовок `Referer` не будет отправлен при переходе к источнику без TLS (HTTPS). Это поведение пользовательского агента по умолчанию, если не указано иное.
* `origin` означает, что реферером будет источник, который соответствует схеме, хосту и порту.
* `origin-when-cross-origin` означает, что навигация к другим источникам будет ограничена схемой, хостом, портом, в то время как навигация по одному и тому же источнику будет включать путь реферер .
* `unsafe-url` означает, что в качестве источника ссылки будет указываться источник и путь (но не фрагмент, пароль или имя пользователя). Этот вариант небезопасен, потому что он может способствовать утечки источников и путей из TLS-защищённых ресурсов в незащищённые источники.

`rel`

Этот атрибут определяет отношения связываемого документа и текущего документа. Атрибут должен быть разделённым пробелами списком значений типов ссылки (en-US).

`sizes`

Этот атрибут определяет размеры иконки для визуальных медиа, содержащихся в ресурсе. Он должен быть представлен только, если `rel` содержит значение `icon` или нестандартный тип, например `apple-touch-icon` Apple. Может иметь следующие значения:

* `any`, означает, что иконка может быть масштабируема до любого размера, например в векторном формате `image/svg+xml`.
* пробелоразделенный список размеров, каждый в формате `<width in pixels>x<height in pixels>` или `<width in pixels>X<height in pixels>`. Каждый из этих размеров должен содержаться в ресурсе.

> 
> \*\*Примечание:\*\*Большинство форматов иконок могут хранить только одну иконку, поэтому чаще всего `sizes` содержит только одну запись. MS's ICO формат, как и Apple's ICNS. ICO более распространены; вы должны использовать их.
> 
> 
>

`title`

Атрибут `title` имеет особое значение для элемента `<link>`. При использовании `<link rel="stylesheet">` он определяет предпочтительную или альтернативную таблицу стилей (en-US). Неверное использование может стать причиной игнорирования таблицы стилей.

`type`

Этот атрибут используется для определения типа связываемого контента. Значение атрибута должно быть типом MIME, такое как **text/html**, **text/css и т.д**. Обычно он используется для определения типа таблицы стилей, на которую делается ссылка (например, **text/css**), но, учитывая, что CSS является единственным языком таблиц стилей, используемым в сети, этот атрибут может быть пропущен, что является рекомендацией. Он также используется для типов ссылок `rel="preload"`, чтобы браузер загружал только те типы файлов, которые он поддерживает.

### Нестандартные атрибуты

`disabled` 
Non-standard

Этот атрибут используется для отключения отношения ссылки. В сочетании со скриптом, этот атрибут может использоваться для включения и выключения различных отношений таблицы стилей.

> 
> \*\*Примечание:\*\*Хотя в стандарте HTML нет атрибута `disabled`, атрибут `disabled` есть в объекте DOM `HTMLLinkElement`.
> 
> 
> 

`methods` 
Non-standard

Значение этого атрибута предоставляет информацию о функциях, которые могут выполняться над объектом. Значения обычно задаются протоколом HTTP, когда он используется, но может быть (аналогично атрибуту **title**) полезно заранее включить в ссылку консультативную информацию. Например, браузер может выбрать другое отображение ссылки в зависимости от указанных методов; то, что доступно для поиска может получить другую иконку, или внешняя ссылка может отображаться с указанием перехода с текущего сайта. Этот атрибут не совсем понятен и не поддерживается, даже определяющим браузером, Internet Explorer 4.

`prefetch` 
Non-standard
 Secure context

Этот атрибут идентифицирует ресурс, который может потребоваться при следующей навигации, и необходимость получить его пользовательским агентом. Это позволяет пользовательскому агенту быстрее реагировать, когда, в будущем, ресурс будет запрошен.

`target` 
Non-standard

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

### Устаревшие атрибуты

`charset`

Этот атрибут определяет кодировку символов связываемого ресурса. Значение представляет собой список наборов символов, разделённый пробелами и/или запятыми, как определено в RFC 2045. Значение по умолчанию `iso-8859-1`.

**Примечание:** Для получения эффекта использования данного устаревшего атрибута, используйте HTTP-заголовок `Content-Type` на связываемый ресурс.

`rev`

Значение этого атрибута показывает отношение текущего документа к связываемому документу, как определено атрибутом `href`. Этот атрибут, таким образом, определяет обратную связь по сравнению со значением атрибута `rel`. Значения типов ссылки (en-US) для атрибута аналогичны возможным значениям для `rel`.

**Примечание:** Этот атрибут считается устаревшим жизненным стандартом WHATWG HTML (который является каноничной спецификацией MDN). Однако, стоит отметить, что `rev` *не* считается устаревшим в спецификации W3C. Стоит сказать, учитывая неопределённость, полагаться на `rev` не стоит.
 **Примечание:** Взамен, вы должны использовать атрибут `rel` с противоположным значением типов ссылки (en-US). Например, чтобы установить обратную ссылку для `made`, укажите `author`.Также, этот атрибут не означает "ревизия" и не должен использоваться с номером версии, даже если многие сайты используют его в этих целях.


Стилизация с CSS
----------------

Элемент `<link>` не имеет визуального представления в веб-документе, поэтому он не должен стилизоваться.

Примеры
-------

### Включение таблицы стилей

Включение таблицы стилей на страницы имеет следующий синтаксис:


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

### Предоставление альтернативных таблиц стилей

Вы можете указать альтернативные таблицы стилей (en-US).

Пользователь может выбрать, какую таблицу стилей использовать, выбрав её в меню Вид > Стиль страницы. Это позволяет пользователям видеть мультиверсию страницы.


```html
<link href="default.css" rel="stylesheet" title="Default Style" />
<link href="fancy.css" rel="alternate stylesheet" title="Fancy" />
<link href="basic.css" rel="alternate stylesheet" title="Basic" />
```

### Предоставление иконок для различных контекстов использования

Вы можете включить ссылки на несколько различных иконок на одной странице, и браузер выберет, какая из них лучше подходит для его конкретного контекста, используя значения `rel` и `sizes` как подсказки.


```html
<!-- third-generation iPad with high-resolution Retina display: -->
<link
 rel="apple-touch-icon-precomposed"
 sizes="144x144"
 href="favicon144.png" />
<!-- iPhone with high-resolution Retina display: -->
<link
 rel="apple-touch-icon-precomposed"
 sizes="114x114"
 href="favicon114.png" />
<!-- first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png" />
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="favicon57.png" />
<!-- basic favicon -->
<link rel="icon" href="favicon32.png" />
```

### Условная загрузка ресурсов с медиавыражениями

Вы можете предоставить тип медиа или запрос внутри атрибута `media`; этот ресурс будет загружен только в том случае, если условия медиа равно true. Например:


```html
<link href="print.css" rel="stylesheet" media="print" />
<link href="mobile.css" rel="stylesheet" media="all" />
<link
 href="desktop.css"
 rel="stylesheet"
 media="screen and (min-width: 600px)" />
<link
 href="highres.css"
 rel="stylesheet"
 media="screen and (min-resolution: 300dpi)" />
```

### События загрузки таблицы стилей

Вы можете определить, когда таблица стилей была загружена, наблюдая за событием `load`, запускающимся в нем; аналогично, вы можете обнаружить, произошла ли ошибка при обработки таблицы стилей, наблюдая за событием `error`:


```html
<script>
 var myStylesheet = document.querySelector("#my-stylesheet");

 myStylesheet.onload = function () {
 // Do something interesting; the sheet has been loaded
 };

 myStylesheet.onerror = function () {
 console.log("An error occurred loading the stylesheet!");
 };
</script>

<link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet" />
```


**Примечание:** Событие `load` запускается после загрузки и анализа таблицы стилей и всего импортируемого содержимого, непосредственно перед тем, как стили будут применены к содержимому.

### Preload примеры

Вы можете найти примеры `<link rel="preload">` в Preloading content with `rel="preload"` (en-US).

Техническое резюме
------------------

| Каталоги контента | Контент метаданных. Если есть itemprop (en-US): потоковый контент и фразовый контент. |
| --- | --- |
| Допустимое содержимое | Нет, это empty element. |
| Пропуск тегов | Так как это пустой элемент, присутствовать должен начальный тэг, конечный - отсутствует. |
| Допустимые родители | Любой элемент, принимающий элементы метаданных. Если есть itemprop (en-US): любой элемент, принимающий фразовый контент. |
| Допустимые ARIA-роли | Нет |
| DOM-интерфейс | `HTMLLinkElement` |

Спецификации
------------

| Specification |
| --- |
| HTML Standard # the-link-element |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `Link` (en-US) HTTP header
* Ryan Grove's <script> and <link> node event compatibility chart