This page was translated from English by the community.Learn more and join the MDN Web Docs community.
<link>: Элемент - ссылка на внешний ресурс
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..
* Some parts of this feature may have varying levels of support.
HTML-элемент<link> определяет отношения между текущим документом и внешним ресурсом. Этот элемент чаще всего используется для ссылки наstylesheets, а также для создания иконок сайта (как для иконок в стиле "favicon", так и для иконок домашних экранов и приложений мобильных устройств) среди прочего.
Интерактивный пример
<link href="/shared-assets/misc/link-element-example.css" rel="stylesheet" /><p>This text will be red as defined in the external stylesheet.</p><p> The <code>style</code> attribute can override it, though.</p>Чтобы подключить таблицу стилей, вы должны включить элемент<link> внутри вашего<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="favicon114.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 указывает должен ли ресурс загружаться с помощью запросаCORS.
Другие замечания по использованию:
- Элемент
<link>может присутствовать в элементах<head>или<body>, в зависимости от того, имеет ли онтип ссылки, являющейсяbody-ok. Например, ссылка типаstylesheetявляется body-ok,и, поэтому,<link rel="stylesheet">допускается в body. Однако, это не очень хорошая практика использования; более осмысленно отделять ваши<link>от содержимого body, помещая их в<head>. - При использовании
<link>для установки favicon сайта, и когда ваш сайт использует Политику Безопасности Контента (CSP) для повышения безопасности, политика применяется к favicon. Если вы столкнулись с проблемой при загрузке favicon, проверьте, чтоimg-srcдиректива заголовкаContent-Security-Policyне препятствует доступу к ней. - Спецификации 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>неискажая их. Допустимы значения:anonymousCross-origin запрос (т.е. с HTTP-заголовком
Origin) выполняется, но учётные данные не отправляются (т.е. нет cookie, сертификата X.509, или базовой аутентификации HTTP). Если сервер не передал учётные данные исходному сайту (нет настроенного HTTP-заголовкаAccess-Control-Allow-Origin), изображение будет искажено, а его использование ограничено.use-credentialsCross-origin запрос (т.е. с HTTP-заголовком
Origin) выполняется вместе с отправкой учётных данных (т.е. выполняется аутентификация cookie, сертификата, и/или базового HTTP). Если сервер не передал учётные данные исходному сайту (через HTTP-заголовокAccess-Control-Allow-Credentials), ресурс будет искажён, а его использование ограничено.Если атрибут отсутствует, ресурс загружается без запроса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.
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Этот атрибут определяет отношения связываемого документа и текущего документа. Атрибут должен быть разделённым пробелами спискомзначений типов ссылки.
sizesЭтот атрибут определяет размеры иконки для визуальных медиа, содержащихся в ресурсе. Он должен быть представлен только, если
relсодержит значениеiconили нестандартный тип, напримерapple-touch-iconApple. Может иметь следующие значения: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">он определяетпредпочтительную или альтернативную таблицу стилей. Неверное использование может статьпричиной игнорирования таблицы стилей.typeЭтот атрибут используется для определения типа связываемого контента. Значение атрибута должно быть типом MIME, такое какtext/html,text/css и т.д. Обычно он используется для определения типа таблицы стилей, на которую делается ссылка (например,text/css), но, учитывая, что CSS является единственным языком таблиц стилей, используемым в сети, этот атрибут может быть пропущен, что является рекомендацией. Он также используется для типов ссылок
rel="preload", чтобы браузер загружал только те типы файлов, которые он поддерживает.
Нестандартные атрибуты
disabledНе стандартноЭтот атрибут используется для отключения отношения ссылки. В сочетании со скриптом, этот атрибут может использоваться для включения и выключения различных отношений таблицы стилей.
Примечание:Хотя в стандарте HTML нет атрибута
disabled, атрибутdisabledесть в объекте DOMHTMLLinkElement.methodsНе стандартноЗначение этого атрибута предоставляет информацию о функциях, которые могут выполняться над объектом. Значения обычно задаются протоколом HTTP, когда он используется, но может быть (аналогично атрибутуtitle) полезно заранее включить в ссылку консультативную информацию. Например, браузер может выбрать другое отображение ссылки в зависимости от указанных методов; то, что доступно для поиска может получить другую иконку, или внешняя ссылка может отображаться с указанием перехода с текущего сайта. Этот атрибут не совсем понятен и не поддерживается, даже определяющим браузером, Internet Explorer 4.
prefetchНе стандартноSecure contextЭтот атрибут идентифицирует ресурс, который может потребоваться при следующей навигации, и необходимость получить его пользовательским агентом. Это позволяет пользовательскому агенту быстрее реагировать, когда, в будущем, ресурс будет запрошен.
targetНе стандартноОпределяет название фрейма или окна, которое определяет связывающие отношения, или, которое будет показывать рендеринг любого связываемого ресурса.
Устаревшие атрибуты
charsetЭтот атрибут определяет кодировку символов связываемого ресурса. Значение представляет собой список наборов символов, разделённый пробелами и/или запятыми, как определено вRFC 2045. Значение по умолчанию
iso-8859-1.Примечание:Для получения эффекта использования данного устаревшего атрибута, используйте HTTP-заголовок
Content-Typeна связываемый ресурс.revЗначение этого атрибута показывает отношение текущего документа к связываемому документу, как определено атрибутом
href. Этот атрибут, таким образом, определяет обратную связь по сравнению со значением атрибутаrel.Значения типов ссылки для атрибута аналогичны возможным значениям дляrel.Примечание:Этот атрибут считается устаревшим жизненным стандартом WHATWG HTML (который является каноничной спецификацией MDN). Однако, стоит отметить, что
revне считается устаревшим в спецификации W3C. Стоит сказать, учитывая неопределённость, полагаться наrevне стоит.[!NOTE]Взамен, вы должны использовать атрибутrelс противоположнымзначением типов ссылки. Например, чтобы установить обратную ссылку для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" />Примечание:Событиеload запускается после загрузки и анализа таблицы стилей и всего импортируемого содержимого, непосредственно перед тем, как стили будут применены к содержимому.
Preload примеры
Вы можете найти примеры<link rel="preload"> вPreloading content withrel="preload".
Техническое резюме
| Каталоги контента | Контент метаданных. Если естьitemprop:потоковый контент ифразовый контент. |
|---|---|
| Допустимое содержимое | Нет, этоempty element. |
| Пропуск тегов | Так как это пустой элемент, присутствовать должен начальный тэг, конечный - отсутствует. |
| Допустимые родители | Любой элемент, принимающий элементы метаданных. Если естьitemprop: любой элемент, принимающийфразовый контент. |
| Допустимые ARIA-роли | Нет |
| DOM-интерфейс | HTMLLinkElement |
Спецификации
| Specification |
|---|
| HTML # the-link-element |