path: root/files/ru/web/html/element/link/index.html

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

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

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

<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>

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

<pre class="brush: html no-line-numbers notranslate">&lt;link href="main.css" rel="stylesheet"&gt;</pre>

<p>В этом простом примере указывается путь к таблице стилей внутри атрибута <code>href</code> и атрибут <code>rel</code> со значением <code>stylesheet</code>. <code>rel</code> означает "отношения (relationship)", и, вероятно, является одной из ключевых особенностей элемента <code>&lt;link&gt;</code>  — значение сообщает как указанный элемент связан с  содержащим его документом. Как вы увидите в нашем справочнике <a href="/en-US/docs/Web/HTML/Link_types">типы ссылок</a>, есть много различных видов отношений.</p>

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

<pre class="brush: html no-line-numbers notranslate">&lt;link rel="icon" href="favicon.ico"&gt;</pre>

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

<pre class="brush: html no-line-numbers notranslate">&lt;link rel="apple-touch-icon-precomposed" sizes="114x114"
      href="apple-icon-114.png" type="image/png"&gt;</pre>

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

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

<pre class="brush: html no-line-numbers notranslate">&lt;link href="print.css" rel="stylesheet" media="print"&gt;
&lt;link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)"&gt;</pre>

<p>В элемент <code>&lt;link&gt;</code> также были добавлены некоторые новые интересные возможности производительности и безопасности, к примеру:</p>

<pre class="brush: html no-line-numbers notranslate">&lt;link rel="preload" href="myFont.woff2" as="font"
      type="font/woff2" crossorigin="anonymous"&gt;</pre>

<p>Значение <code>rel</code> - <code>preload</code> указывает, что браузер должен предварительно загрузить этот ресурс (смотрите <a href="/en-US/docs/Web/HTML/Preloading_content">Предварительная загрузка контента при помощи rel="preload"</a> для более подробной информации), атрибут <code>as</code> указывает на определенный класс загружаемого контента. Атрибут <code>crossorigin</code> указывает должен ли ресурс загружаться с помощью запроса  {{Glossary("CORS")}}.</p>

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

<ul>
 <li>Элемент <code>&lt;link&gt;</code> может присутствовать в элементах {{HTMLElement("head")}} или {{HTMLElement("body")}}, в зависимости от того, имеет ли он <a href="https://html.spec.whatwg.org/multipage/links.html#body-ok">тип ссылки</a>, являющейся <strong>body-ok</strong>. Например, ссылка типа <code>stylesheet</code> является body-ok,и, поэтому,  <code>&lt;link rel="stylesheet"&gt;</code> допускается в body. Однако, это не очень хорошая практика использования; более осмысленно отделять ваши <code>&lt;link&gt;</code> от содержимого body, помещая их в <code>&lt;head&gt;</code>.</li>
 <li>При использовании <code>&lt;link&gt;</code> для установки favicon сайта, и когда ваш сайт использует Политику Безопасности Контента (CSP) для повышения безопасности, политика применяется к favicon. Если вы столкнулись с проблемой при загрузке favicon, проверьте, что <a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src"><code>img-src</code> директива</a> заголовка {{HTTPHeader("Content-Security-Policy")}} не препятствует доступу к ней.</li>
 <li>Спецификации HTML и XHTML определяют обработчики событий для элемента  <code>&lt;link&gt;</code>, но не указывают как они будут использоваться.</li>
 <li>В XHTML 1.0, пустые элементы, такие как <code>&lt;link&gt;</code>, требуют слеш: <code>&lt;link /&gt;</code>.</li>
 <li>WebTV поддерживает использование значения <code>next</code> для <code>rel</code> в качестве предварительной загрузки следующей страницы в серии документов.</li>
</ul>

<h2 id="Атрибуты">Атрибуты</h2>

<p>Этот элемент включает в себя <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</p>

<dl>
 <dt>{{HTMLAttrDef("as")}}</dt>
 <dd>Этот атрибут используется только для элементов <code>&lt;link&gt;</code> с атрибутом <code>rel="preload"</code> или <code>rel="prefetch"</code>. Он указывает тип контента, загружаемого <code>&lt;link&gt;</code>, который необходим для определения приоритетов контента, сравнения запросов, применения корректного <a href="/en-US/docs/Web/HTTP/CSP">content security policy</a>, и установки корректного {{HTTPHeader("Accept")}} запрашиваемого заголовка.</dd>
 <dt>{{HTMLAttrDef("crossorigin")}}</dt>
 <dd>Этот перечисляемый атрибут указывает, должен ли {{Glossary("CORS")}} использоваться при загрузки ресурса. <a href="/en-US/docs/Web/HTML/CORS_Enabled_Image">CORS-поддерживаемые изображения</a> могут быть повторно использованы в элементе {{HTMLElement("canvas")}} не <em>искажая </em>их. Допустимы значения:
 <dl>
  <dt><code>anonymous</code></dt>
  <dd>Cross-origin запрос (т.е. с HTTP-заголовком {{HTTPHeader("Origin")}}) выполняется, но учетные данные не отправляются (т.е. нет cookie, сертификата X.509, или базовой аутентификации HTTP). Если сервер не передал учетные данные исходному сайту (нет настроенного HTTP-заголовка {{HTTPHeader("Access-Control-Allow-Origin")}}),  изображение будет искажено, а его использование ограничено.</dd>
  <dt><code>use-credentials</code></dt>
  <dd>Cross-origin запрос (т.е. с HTTP-заголовком <code>Origin</code>) выполняется вместе с отправкой учетных данных (т.е. выполняется аутентификация cookie, сертификата, и/или базового HTTP). Если сервер не передал учетные данные исходному сайту (через HTTP-заголовок {{HTTPHeader("Access-Control-Allow-Credentials")}}), ресурс будет искажен, а его использование ограничено.</dd>
 </dl>
 Если атрибут отсутствует, ресурс загружается без запроса {{Glossary("CORS")}} (т.е. без отправки HTTP-заголовка <code>Origin)</code>, предотвращая его незагрязненное использование. В случае невалидности, он обрабатывается как при использовании ключевого слова <strong>anonymous.</strong> Для получения дополнительной информации смотрите  <a href="/en-US/docs/Web/HTML/CORS_settings_attributes">CORS settings attributes</a>.</dd>
 <dt>{{HTMLAttrDef("href")}}</dt>
 <dd>Этот атрибут определяет {{glossary("URL")}}, связываемого ресурса. URL может быть абсолютным или относительным.</dd>
 <dt>{{HTMLAttrDef("hreflang")}}</dt>
 <dd>Этот атрибут определяет язык, связываемого ресурса. Он является консультативным. Допустимые значения определяются <a href="https://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a>. Используйте этот атрибут только если присутствуют атрибуты {{HTMLAttrxRef("href", "a")}}.</dd>
 <dt id="name-attribute">{{HTMLAttrDef("importance")}} {{Experimental_Inline}}</dt>
 <dd>Указывает на относительную важность ресурса. Приоритетные подсказки передаются используя значения:</dd>
 <dd>
 <p><strong><code>auto</code></strong>: указывает на <strong>отсутствие предпочтений</strong>. Браузер может использовать собственную эвристику для определения приоритетов ресурсов.</p>

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

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

 <div class="blockIndicator note">
 <p><strong>Примечание: </strong>Атрибут <code>importance</code> можно использовать только для элементов <code>&lt;link&gt;</code> с атрибутами <code>rel="preload"</code> или <code>rel="prefetch"</code>.</p>
 </div>
 </dd>
 <dt>{{HTMLAttrDef("integrity")}} {{Experimental_Inline}}</dt>
 <dd>Содержит встроенные метаданные — криптографический хеш-код ресурса(файла) в кодировке base64, который вы сообщаете браузеру для загрузки. Браузер может использовать его для проверки, что загруженный ресурс был получен без неожиданных манипуляций. Смотрите <a href="/en-US/docs/Web/Security/Subresource_Integrity">Subresource Integrity</a>.</dd>
 <dt>{{HTMLAttrDef("media")}}</dt>
 <dd>Этот атрибут указывает медиа, который применяет связываемый ресурс. Его значение должно быть типом медиа или <a href="/en-US/docs/Web/CSS/Media_queries">медиавыражением</a>. Этот атрибут, в основном, полезен при связывании с внешними таблицами стилей — он позволяет пользовательскому агенту выбрать наиболее подходящее устройство для запуска.
 <div class="blockIndicator note">
 <p><strong>Примечания:</strong></p>

 <ul>
  <li>В HTML 4, это может быть только простой, разделенный пробелами, список литералов, описывающих медиа, т.е.  <a href="/en-US/docs/Web/CSS/@media">media типы и группы</a>, которые определены и допустимы в качестве значений для этого атрибута, такие как <code>print</code>, <code>screen</code>, <code>aural</code>, <code>braille</code>. HTML5 распространил это на любые <a href="/en-US/docs/Web/CSS/Media_queries">медиавыражения</a>, которые являются расширенным набором допустимых значений HTML 4.</li>
  <li>Браузеры, не поддерживающие <a href="/en-US/docs/Web/CSS/Media_queries">CSS3 Media Queries</a>, могут не распознать соответствующую ссылку; не забудьте установить резервные ссылки, ограниченные набором медиавыражений, определенным в HTML 4.</li>
 </ul>
 </div>
 </dd>
 <dt>{{HTMLAttrDef("referrerpolicy")}} {{Experimental_Inline}}</dt>
 <dd>Строка, указывающая какой реферер использовать при загрузки ресурсов:
 <ul>
  <li><code>no-referrer</code> означает, что заголовок {{HTTPHeader("Referer")}} не будет отправлен.</li>
  <li><code>no-referrer-when-downgrade</code> означает, что заголовок {{HTTPHeader("Referer")}} не будет отправлен при переходе к источнику без TLS (HTTPS). Это поведение пользовательского агента по умолчанию, если не указано иное.</li>
  <li><code>origin</code> означает, что реферером будет источник, который соответствует схеме, хосту и порту.</li>
  <li><code>origin-when-cross-origin</code> означает, что навигация к другим источникам будет ограничена схемой, хостом, портом, в то время как навигация по одному и тому же источнику будет включать путь реферер .</li>
  <li><code>unsafe-url</code> означает, что в качестве источника ссылки будет указываться источник и путь (но не фрагмент, пароль или имя пользователя). Этот вариант небезопасен, потому что он может способствовать утечки источников и путей из TLS-защищенных ресурсов в незащищенные источники.</li>
 </ul>
 </dd>
 <dt>{{HTMLAttrDef("rel")}}</dt>
 <dd>Этот атрибут определяет отношения связываемого документа и текущего документа. Атрибут должен быть разделенным пробелами списком <a href="/en-US/docs/Web/HTML/Link_types">значений типов ссылки</a>.</dd>
 <dt>{{HTMLAttrDef("sizes")}}</dt>
 <dd>Этот атрибут определяет размеры иконки для визуальных медиа, содержащихся в ресурсе. Он должен быть представлен только, если {{HTMLAttrxRef("rel", "link")}} содержит значение <code>icon</code> или нестандартный тип, например <code>apple-touch-icon</code> Apple. Может иметь следующие значения:
 <ul>
  <li><code>any</code>, означает, что иконка может быть масштабируема до любого размера, например в векторном формате <code>image/svg+xml</code>.</li>
  <li>пробелоразделенный список размеров, каждый в формате <code><em>&lt;width in pixels&gt;</em>x<em>&lt;height in pixels&gt;</em></code> или <code><em>&lt;width in pixels&gt;</em>X<em>&lt;height in pixels&gt;</em></code>. Каждый из этих размеров должен содержаться в ресурсе.</li>
 </ul>

 <div class="blockIndicator note">
 <p><strong>Примечание: </strong>Большинство форматов иконок могут хранить только одну иконку, поэтому чаще всего {{HTMLAttrxRef("sizes")}} содержит только одну запись. MS's ICO формат, как и Apple's ICNS. ICO более распространены; вы должны использовать их.</p>
 </div>
 </dd>
 <dt>{{HTMLAttrDef("title")}}</dt>
 <dd>Атрибут <code>title</code> имеет особое значение для элемента <code>&lt;link&gt;</code>. При использовании <code>&lt;link rel="stylesheet"&gt;</code> он определяет <a href="/en-US/docs/Web/CSS/Alternative_style_sheets">предпочтительную или альтернативную таблицу стилей</a>. Неверное использование может стать <a href="/en-US/docs/Correctly_Using_Titles_With_External_Stylesheets">причиной игнорирования таблицы стилей</a>.</dd>
 <dt>{{HTMLAttrDef("type")}}</dt>
 <dd>Этот атрибут используется для определения типа связываемого контента. Значение атрибута должно быть типом MIME, такое как <strong>text/html</strong>, <strong>text/css и т.д</strong>. Обычно он используется для определения типа таблицы стилей, на которую делается ссылка (например, <strong>text/css</strong>), но, учитывая, что CSS является единственным языком таблиц стилей, используемым в сети, этот атрибут может быть пропущен, что является рекомендацией.  Он также используется для типов ссылок <code>rel="preload"</code>, чтобы браузер загружал только те типы файлов, которые он поддерживает.</dd>
</dl>

<h3 id="Нестандартные_атрибуты">Нестандартные атрибуты</h3>

<dl>
 <dt>{{HTMLAttrDef("disabled")}} {{Non-standard_Inline}}</dt>
 <dd>Этот атрибут используется для отключения отношения ссылки. В сочетании со скриптом, этот атрибут может использоваться для включения и выключения различных отношений таблицы стилей.
 <div class="blockIndicator note">
 <p><strong>Примечание: </strong>Хотя в стандарте  HTML нет атрибута <code>disabled</code>, атрибут <code>disabled</code> есть в объекте DOM <code>HTMLLinkElement</code>.</p>
 </div>
 </dd>
 <dt>{{HTMLAttrDef("methods")}} {{Non-standard_Inline}}</dt>
 <dd>Значение этого атрибута предоставляет информацию о функциях, которые могут выполняться над объектом. Значения обычно задаются протоколом HTTP, когда он используется, но может быть (аналогично атрибуту <strong>title</strong>) полезно заранее включить в ссылку консультативную информацию. Например, браузер может выбрать другое отображение ссылки в зависимости от указанных методов; то, что доступно для поиска может получить другую иконку, или внешняя ссылка может отображаться с указанием перехода с текущего сайта. Этот атрибут не совсем понятен и не поддерживается, даже определяющим браузером, Internet Explorer 4.</dd>
 <dt>{{HTMLAttrDef("prefetch")}} {{Non-standard_Inline}} {{secureContext_inline}}</dt>
 <dd>Этот атрибут идентифицирует ресурс, который может потребоваться при следующей навигации, и необходимость получить его пользовательским агентом. Это позволяет пользовательскому агенту быстрее реагировать, когда, в будущем, ресурс будет запрошен.</dd>
 <dt>{{HTMLAttrDef("target")}} {{Non-standard_Inline}}</dt>
 <dd>Определяет название фрейма или окна, которое определяет связывающие отношения, или, которое будет показывать рендеринг любого связываемого ресурса.</dd>
</dl>

<h3 id="Устаревшие_атрибуты">Устаревшие атрибуты</h3>

<dl>
 <dt>{{HTMLAttrDef("charset")}} {{Obsolete_Inline}}</dt>
 <dd>Этот атрибут определяет кодировку символов связываемого ресурса. Значение представляет собой список наборов символов, разделенный пробелами и/или запятыми, как определено в  {{rfc(2045)}}. Значение по умолчанию <code>iso-8859-1</code>.
 <div class="note"><strong>Примечание по использованию:</strong> Для получения эффекта использования данного устаревшего атрибута, используйте HTTP-заголовок {{HTTPHeader("Content-Type")}} на связываемый ресурс.</div>
 </dd>
 <dt>{{HTMLAttrDef("rev")}} {{Obsolete_Inline}}</dt>
 <dd>
 <p><span lang="ru">Значение этого атрибута показывает отношение текущего документа к связываемому документу, как определено атрибутом</span> {{HTMLAttrxRef("href", "link")}}. <span lang="ru">Этот атрибут, таким образом, определяет обратную связь по сравнению со значением атрибута </span><code>rel</code><span lang="ru">. </span><a href="/en-US/docs/Web/HTML/Link_types">Значения типов ссылки </a><span lang="ru">для атрибута аналогичны возможным значениям для</span>   {{HTMLAttrxRef("rel", "link")}}.</p>

 <div class="blockIndicator note">
 <p><strong>Примечание:</strong> Этот атрибут считается устаревшим жизненным стандартом WHATWG HTML (который является каноничной спецификацией MDN). Однако, стоит отметить, что <code>rev</code> <em>не</em> считается устаревшим в спецификации W3C. Стоит сказать, учитывая неопределенность, полагаться на <code>rev</code> не стоит.</p>
 </div>
 </dd>
 <dd>
 <div class="blockIndicator note">
 <p>Взамен, вы должны использовать атрибут {{HTMLAttrxRef("rel", "link")}} с противоположным <a href="/en-US/docs/Web/HTML/Link_types">значением типов ссылки</a>. Например, чтобы установить обратную ссылку для <code>made</code>, укажите <code>author</code>.Также, этот атрибут не означает "ревизия" и не должен использоваться с номером версии, даже если многие сайты используют его в этих целях.</p>
 </div>
 </dd>
</dl>

<h2 id="Стилизация_с_CSS">Стилизация с CSS</h2>

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

<h2 id="Примеры">Примеры</h2>

<h3 id="Включение_таблицы_стилей">Включение таблицы стилей</h3>

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

<pre class="brush: html no-line-numbers notranslate">&lt;link href="style.css" rel="stylesheet"&gt;
</pre>

<h3 id="Предоставление_альтернативных_таблиц_стилей">Предоставление альтернативных таблиц стилей</h3>

<p>Вы можете указать <a href="/en-US/docs/Web/CSS/Alternative_style_sheets">альтернативные таблицы стилей</a>.</p>

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

<pre class="brush: html no-line-numbers notranslate">&lt;link href="default.css" rel="stylesheet" title="Default Style"&gt;
&lt;link href="fancy.css" rel="alternate stylesheet" title="Fancy"&gt;
&lt;link href="basic.css" rel="alternate stylesheet" title="Basic"&gt;
</pre>

<h3 id="Предоставление_иконок_для_различных_контекстов_использования">Предоставление иконок для различных контекстов использования</h3>

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

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

<h3 id="Условная_загрузка_ресурсов_с_медиавыражениями">Условная загрузка ресурсов с медиавыражениями</h3>

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

<pre class="brush: html no-line-numbers notranslate">&lt;link href="print.css" rel="stylesheet" media="print"&gt;
&lt;link href="mobile.css" rel="stylesheet" media="all"&gt;
&lt;link href="desktop.css" rel="stylesheet" media="screen and (min-width: 600px)"&gt;
&lt;link href="highres.css" rel="stylesheet" media="screen and (min-resolution: 300dpi)"&gt;
</pre>

<h3 id="События_загрузки_таблицы_стилей">События загрузки таблицы стилей</h3>

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

<pre class="brush: html notranslate">&lt;script&gt;
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!");
}
&lt;/script&gt;

&lt;link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet"&gt;
</pre>

<div class="blockIndicator note">
<p><strong>Примечание:</strong> Событие <code>load</code> запускается после загрузки и анализа таблицы стилей и всего импортируемого содержимого, непосредственно перед тем, как стили будут применены к содержимому.</p>
</div>

<h3 id="Preload_примеры">Preload примеры</h3>

<p>Вы можете найти примеры  <code>&lt;link rel="preload"&gt;</code> в <a href="/en-US/docs/Web/HTML/Preloading_content">Preloading content with <code>rel="preload"</code></a>.</p>

<h2 id="Техническое_резюме">Техническое резюме</h2>

<table class="properties">
 <tbody>
  <tr>
   <th><a href="/en-US/docs/Web/HTML/Content_categories">Каталоги контента</a></th>
   <td>Контент метаданных. Если есть <a href="/en-US/docs/Web/HTML/Global_attributes/itemprop">itemprop</a>: <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">потоковый контент</a> и <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</td>
  </tr>
  <tr>
   <th>Разрешенный контент</th>
   <td>Нет, это {{Glossary("empty element")}}.</td>
  </tr>
  <tr>
   <th>Tag omission</th>
   <td>Так как это пустой элемент, присутствовать должен начальный тэг, конечный - отсутствует.</td>
  </tr>
  <tr>
   <th>Разрешенные родители</th>
   <td>Любой элемент, принимающий элементы метаданных. Если есть <a href="/en-US/docs/Web/HTML/Global_attributes/itemprop">itemprop</a>: любой элемент, принимающий <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</td>
  </tr>
  <tr>
   <th scope="row">Разрешенные ARIA роли</th>
   <td>Нет</td>
  </tr>
  <tr>
   <th>DOM интерфейс</th>
   <td>{{DOMxRef("HTMLLinkElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Спецификации">Спецификации</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Спецификация</th>
   <th scope="col">Статус</th>
   <th scope="col">
    <p class="syntaxbox">Комментарий</p>
   </th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("Preload")}}</td>
   <td>{{Spec2("Preload")}}</td>
   <td>Определены <code>&lt;link rel="preload"&gt;</code>, и атрибут<code>as</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName("Subresource Integrity", "#HTMLLinkElement", "lt;link&gt;")}}</td>
   <td>{{Spec2("Subresource Integrity")}}</td>
   <td>Добавлен атрибут <code>integrit</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName("HTML WHATWG", "semantics.html#the-link-element", "&lt;link&gt;")}}</td>
   <td>{{Spec2("HTML WHATWG")}}</td>
   <td>Нет изменений, в сравнении с последней версией</td>
  </tr>
  <tr>
   <td>{{SpecName("HTML5 W3C", "document-metadata.html#the-link-elemen", "&lt;link&gt;")}}</td>
   <td>{{Spec2("HTML5 W3C")}}</td>
   <td>Добавлены атрибуты <code>crossorigin</code> и <code>sizes</code>; расширены значения <code>media</code> для любых медиавыражений; добавлены многочисленные новые значения для <code>rel</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName("HTML4.01", "struct/links.html#h-12.3", "&lt;link&gt;")}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName("Resource Hints", "#prefetch", "prefetch")}}</td>
   <td>{{Spec2("Resource Hints")}}</td>
   <td>Добавлены <code>dns-prefetch</code>, <code>preconnect</code>, <code>prefetch</code> и <code>prerender</code>.</td>
  </tr>
 </tbody>
</table>

<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>



<p>{{Compat("html.elements.link", 3)}}</p>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li>{{HTTPHeader("Link")}} HTTP header</li>
 <li><a href="https://pie.gd/test/script-link-events/">Ryan Grove's &lt;script&gt; and &lt;link&gt; node event compatibility chart</a></li>
</ul>