--- title: ': Элемент - ссылка на внешний ресурс' slug: Web/HTML/Element/link tags: - Ссылки - загрузка - метаданные - предзагрузка translation_of: Web/HTML/Element/link original_slug: Web/HTML/Element/ссылка ---
{{HTMLRef}}

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

{{EmbedInteractiveExample("pages/tabbed/link.html")}}

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

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

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

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

<link rel="icon" href="favicon.ico">

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

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

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

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

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

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

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

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

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

Атрибуты

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

{{HTMLAttrDef("as")}}
Этот атрибут используется только для элементов <link> с атрибутом rel="preload" или rel="prefetch". Он указывает тип контента, загружаемого <link>, который необходим для определения приоритетов контента, сравнения запросов, применения корректного content security policy, и установки корректного {{HTTPHeader("Accept")}} запрашиваемого заголовка.
{{HTMLAttrDef("crossorigin")}}
Этот перечисляемый атрибут указывает, должен ли {{Glossary("CORS")}} использоваться при загрузки ресурса. CORS-поддерживаемые изображения могут быть повторно использованы в элементе {{HTMLElement("canvas")}} не искажая их. Допустимы значения:
anonymous
Cross-origin запрос (т.е. с HTTP-заголовком {{HTTPHeader("Origin")}}) выполняется, но учётные данные не отправляются (т.е. нет cookie, сертификата X.509, или базовой аутентификации HTTP). Если сервер не передал учётные данные исходному сайту (нет настроенного HTTP-заголовка {{HTTPHeader("Access-Control-Allow-Origin")}}),  изображение будет искажено, а его использование ограничено.
use-credentials
Cross-origin запрос (т.е. с HTTP-заголовком Origin) выполняется вместе с отправкой учётных данных (т.е. выполняется аутентификация cookie, сертификата, и/или базового HTTP). Если сервер не передал учётные данные исходному сайту (через HTTP-заголовок {{HTTPHeader("Access-Control-Allow-Credentials")}}), ресурс будет искажён, а его использование ограничено.
Если атрибут отсутствует, ресурс загружается без запроса {{Glossary("CORS")}} (т.е. без отправки HTTP-заголовка Origin), предотвращая его незагрязненное использование. В случае невалидности, он обрабатывается как при использовании ключевого слова anonymous. Для получения дополнительной информации смотрите  CORS settings attributes.
{{HTMLAttrDef("href")}}
Этот атрибут определяет {{glossary("URL")}}, связываемого ресурса. URL может быть абсолютным или относительным.
{{HTMLAttrDef("hreflang")}}
Этот атрибут определяет язык, связываемого ресурса. Он является консультативным. Допустимые значения определяются BCP47. Используйте этот атрибут только если присутствуют атрибуты {{HTMLAttrxRef("href", "a")}}.
{{HTMLAttrDef("importance")}} {{Experimental_Inline}}
Указывает на относительную важность ресурса. Приоритетные подсказки передаются используя значения:

auto: указывает на отсутствие предпочтений. Браузер может использовать собственную эвристику для определения приоритетов ресурсов.

high: указывает браузеру, что ресурс находится в высоком приоритете.

low: указывает браузеру, что ресурс находится в низком приоритете.

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

{{HTMLAttrDef("integrity")}} {{Experimental_Inline}}
Содержит встроенные метаданные — криптографический хеш-код ресурса(файла) в кодировке base64, который вы сообщаете браузеру для загрузки. Браузер может использовать его для проверки, что загруженный ресурс был получен без неожиданных манипуляций. Смотрите Subresource Integrity.
{{HTMLAttrDef("media")}}
Этот атрибут указывает медиа, который применяет связываемый ресурс. Его значение должно быть типом медиа или медиавыражением. Этот атрибут, в основном, полезен при связывании с внешними таблицами стилей — он позволяет пользовательскому агенту выбрать наиболее подходящее устройство для запуска.

Примечания:

  • В HTML 4, это может быть только простой, разделённый пробелами, список литералов, описывающих медиа, т.е.  media типы и группы, которые определены и допустимы в качестве значений для этого атрибута, такие как print, screen, aural, braille. HTML5 распространил это на любые медиавыражения, которые являются расширенным набором допустимых значений HTML 4.
  • Браузеры, не поддерживающие медиавыражения, могут не распознать соответствующую ссылку; не забудьте установить резервные ссылки, ограниченные набором медиавыражений, определённым в HTML 4.
{{HTMLAttrDef("referrerpolicy")}} {{Experimental_Inline}}
Строка, указывающая какой реферер использовать при загрузки ресурсов:
{{HTMLAttrDef("rel")}}
Этот атрибут определяет отношения связываемого документа и текущего документа. Атрибут должен быть разделённым пробелами списком значений типов ссылки.
{{HTMLAttrDef("sizes")}}
Этот атрибут определяет размеры иконки для визуальных медиа, содержащихся в ресурсе. Он должен быть представлен только, если {{HTMLAttrxRef("rel", "link")}} содержит значение icon или нестандартный тип, например apple-touch-icon Apple. Может иметь следующие значения:

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

{{HTMLAttrDef("title")}}
Атрибут title имеет особое значение для элемента <link>. При использовании <link rel="stylesheet"> он определяет предпочтительную или альтернативную таблицу стилей. Неверное использование может стать причиной игнорирования таблицы стилей.
{{HTMLAttrDef("type")}}
Этот атрибут используется для определения типа связываемого контента. Значение атрибута должно быть типом MIME, такое как text/html, text/css и т.д. Обычно он используется для определения типа таблицы стилей, на которую делается ссылка (например, text/css), но, учитывая, что CSS является единственным языком таблиц стилей, используемым в сети, этот атрибут может быть пропущен, что является рекомендацией.  Он также используется для типов ссылок rel="preload", чтобы браузер загружал только те типы файлов, которые он поддерживает.

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

{{HTMLAttrDef("disabled")}} {{Non-standard_Inline}}
Этот атрибут используется для отключения отношения ссылки. В сочетании со скриптом, этот атрибут может использоваться для включения и выключения различных отношений таблицы стилей.

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

{{HTMLAttrDef("methods")}} {{Non-standard_Inline}}
Значение этого атрибута предоставляет информацию о функциях, которые могут выполняться над объектом. Значения обычно задаются протоколом HTTP, когда он используется, но может быть (аналогично атрибуту title) полезно заранее включить в ссылку консультативную информацию. Например, браузер может выбрать другое отображение ссылки в зависимости от указанных методов; то, что доступно для поиска может получить другую иконку, или внешняя ссылка может отображаться с указанием перехода с текущего сайта. Этот атрибут не совсем понятен и не поддерживается, даже определяющим браузером, Internet Explorer 4.
{{HTMLAttrDef("prefetch")}} {{Non-standard_Inline}} {{secureContext_inline}}
Этот атрибут идентифицирует ресурс, который может потребоваться при следующей навигации, и необходимость получить его пользовательским агентом. Это позволяет пользовательскому агенту быстрее реагировать, когда, в будущем, ресурс будет запрошен.
{{HTMLAttrDef("target")}} {{Non-standard_Inline}}
Определяет название фрейма или окна, которое определяет связывающие отношения, или, которое будет показывать рендеринг любого связываемого ресурса.

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

{{HTMLAttrDef("charset")}} {{Obsolete_Inline}}
Этот атрибут определяет кодировку символов связываемого ресурса. Значение представляет собой список наборов символов, разделённый пробелами и/или запятыми, как определено в  {{rfc(2045)}}. Значение по умолчанию iso-8859-1.
Примечание по использованию: Для получения эффекта использования данного устаревшего атрибута, используйте HTTP-заголовок {{HTTPHeader("Content-Type")}} на связываемый ресурс.
{{HTMLAttrDef("rev")}} {{Obsolete_Inline}}

Значение этого атрибута показывает отношение текущего документа к связываемому документу, как определено атрибутом {{HTMLAttrxRef("href", "link")}}. Этот атрибут, таким образом, определяет обратную связь по сравнению со значением атрибута rel. Значения типов ссылки для атрибута аналогичны возможным значениям для   {{HTMLAttrxRef("rel", "link")}}.

Примечание: Этот атрибут считается устаревшим жизненным стандартом WHATWG HTML (который является каноничной спецификацией MDN). Однако, стоит отметить, что rev не считается устаревшим в спецификации W3C. Стоит сказать, учитывая неопределённость, полагаться на rev не стоит.

Взамен, вы должны использовать атрибут {{HTMLAttrxRef("rel", "link")}} с противоположным значением типов ссылки. Например, чтобы установить обратную ссылку для made, укажите author.Также, этот атрибут не означает "ревизия" и не должен использоваться с номером версии, даже если многие сайты используют его в этих целях.

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

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

Примеры

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

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

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

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

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

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

<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 как подсказки.

<!-- 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. Например:

<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:

<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".

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

Каталоги контента Контент метаданных. Если есть itemprop: потоковый контент и фразовый контент.
Разрешённый контент Нет, это {{Glossary("empty element")}}.
Tag omission Так как это пустой элемент, присутствовать должен начальный тэг, конечный - отсутствует.
Разрешённые родители Любой элемент, принимающий элементы метаданных. Если есть itemprop: любой элемент, принимающий фразовый контент.
Разрешённые ARIA роли Нет
DOM интерфейс {{DOMxRef("HTMLLinkElement")}}

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

{{Specifications}}

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

{{Compat("html.elements.link", 3)}}

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