Подключение ресурсов

Атрибут Описание
charset Задает кодировку символов подключенного документа
crossorigin Указывает, как элемент обрабатывает CORS-запросы
href Определяет местоположение связанного документа
hreflang Указывает язык текста в подключаемом документе
media Определяет на каком устройстве будет отображаться подключаемый документ, часто используется при выборе таблиц стилей на основе соответствующего устройства
rel Обязательный. Задает тип связи между текущим документом и связанным документом
rev Задает обратное rel отношение. Не рекомендуется.
sizes Задает размер связанного ресурса. Только если rel = "icon"
target Указывает, где должен быть загружен связанный документ
type Задает тип контента связанного документа, например text/html, text/css
integrity Задает хэш-код с кодировкой base64 (sha256, sha384 или sha512) подключаемого ресурса, чтобы можно проверить легитимность ресурса, защитить от подмены.

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

<script src="path/to.js"></script>

Стандартная практика заключается в размещении тегов JavaScript <script> непосредственно перед закрывающим тегом </body>. Загрузка скриптов после контента позволяет вначале загрузиться содержимому и визуальным эффектам вашего сайта, а также не разрешает JavaScript-коду работать с элементами, которые еще не загружены.

<script src="path/to.js" async></script>

Другой вариант, когда загружаемый Javascript-код не нужен для инициализации страницы, он может быть загружен асинхронно, что ускоряет загрузку страницы. Используя атрибут async, браузер будет загружать содержимое скрипта параллельно загрузке контента, и как только он будет полностью загружен, прервет разбор HTML, чтобы проанализировать файл Javascript.

<script src="path/to.js" defer></script>

Отложенные сценарии похожи на асинхронные, но выполнение скрипта откладываться до тех пор, пока вся страница не будет загружена полностью, т.е. синтаксический анализ будет выполняться только после полного анализа HTML. Отложенные сценарии гарантированно загружаются в порядке объявления, так же как и синхронные скрипты.

<noscript>JavaScript отключен</noscript>

Элемент <noscript> определяет контент, который будет отображаться, если пользователь отключил сценарии или браузер не поддерживает использование скриптов. Тег <noscript> может быть помещен либо в <head>, либо в <body>.

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

Стандартная практика заключается в размещении тегов <link> для CSS внутри тега <head> в верхней части HTML. Таким образом, код CSS загрузится первым и будет применяться к вашей странице по мере ее загрузки, вместо того, чтобы показывать HTML без форматирования до загрузки CSS. Атрибут type не обязателен в HTML5, т.к. по умолчанию он поддерживает CSS:

<link rel="stylesheet" href="path/to.css">

Другой, хотя и менее распространенной практикой, является использование оператора @import внутри кода CSS. Например:

<style type="text/css">
    @import("path/to.css")
</style>
<style>
    @import("path/to.css")
</style>

Favicon (англ. FAVorite ICON — «значок для избранного») — значок веб-сайта или веб-страницы. Отображается браузером во вкладке перед названием страницы, а также в качестве картинки рядом с закладкой.

<link rel="icon" type="image/png" href="/favicon.png">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

Используйте mime-type для файлов PNG - image/png и для файлов с иконкой (* .ico) - image /x-icon. Обсуждение разницы между данными форматами.
Файл с именем favicon.ico в корневом каталоге вашего сайта обычно загружается и применяется автоматически, без необходимости использовать тег <link>. Если этот файл меняется, то браузеры могут не сразу изменить его в своем кеше.

<link rel="alternate stylesheet" href="path/to/style.css" title="yourTitle">
```якорь
Некоторые браузеры позволяют применять альтернативные таблицы стилей, если они предлагаются. По умолчанию они не будут применяться, но обычно их можно изменить через настройки браузера:  
! Firefox позволяет пользователю выбирать таблицу стилей с помощью подменю «Вид» &gt; «Стиль страницы», 
! Internet Explorer также поддерживает эту функцию (начиная с IE 8), также доступную из меню 
! «Вид» &gt; «Стиль страницы» (по крайней мере, с IE 11), но для Chrome требуется расширение (начиная с версии 48). 
! Кроме того, веб-страница  может предоставить собственный пользовательский интерфейс, 
! чтобы пользователь мог переключать стили. [Источник](https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets).
## Предсказание ресурсов (Resource Hint)
Консорциум W3C добавил несколько новых функций в `link` как части спецификации [Resource Hints](https://www.w3.org/TR/resource-hints/), которые обеспечивают предварительную загрузку контента сайта, потенциально повышая скорость загрузки страницы на сайтах, на которых они используются. 
### Preconnect
Значение `preconnect` аналогично `dns-prefetch` в том, что оно разрешает DNS. Более того, оно выполняет рукопожатие TCP и дополнительное согласование TLS. Это экспериментальная функция.
 ```html
<link rel="preconnect" href="URL">

Сообщает браузеру разрешить DNS для URL-адреса, и что он должен проверить, знает ли он, как связаться с этим URL-адресом, пока остальная часть страницы будет отображаться.

<link rel="dns-prefetch" href="URL">

Сообщает браузеру, что данный ресурс должен быть предварительно загружен, чтобы его можно было загружать быстрее. Значение prefetch (предварительная выборка), предназначено для загрузки ресурса, который, скорее всего, будет использоваться в следующем переходе.

<link rel="prefetch" href="URL">

DNS-Prefetch разрешает только имя домена, тогда как prefetch загружает указанные ресурсы.

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

<link rel="prerender" href="URL">

<link rel="stylesheet" href="test.css" media="print">

Атрибут media указывает, какую таблицу стилей следует использовать для разных устройств. Так использование значения print будет отображать эту таблицу стилей для страниц только при печати. Значение этого атрибута может быть любым из значений медиатипов (аналогично медиа-запросам в формате CSS).

Например, если страница является частью серии статей, можно использовать значения prev и next для указания страниц, которые появляются до и после.

<link rel="prev" href="http://stackoverflow.com/documentation/java/topics">
<link rel="next" href="http://stackoverflow.com/documentation/css/topics">

Используйте атрибут rel = "alternate" для указания ссылки на файл в формате Atom/RSS для новостных лент.

<link rel="alternate" type="application/atom+xml" href="http://example.com/feed.xml" />
<link rel="alternate" type="application/rss+xml" href="http://example.com/feed.xml" />

См. документы MDN для RSS-каналов и Atomic RSS.