<link>: Элемент - ссылка на внешний ресурс
HTML-элемент <link>
определяет отношения между текущим документом и внешним ресурсом. Этот элемент чаще всего используется для ссылки на stylesheets, а также для создания иконок сайта (как для иконок в стиле "favicon", так и для иконок домашних экранов и приложений мобильных устройств) среди прочего.
Интерактивный пример
Чтобы подключить таблицу стилей, вы должны включить элемент <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="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
указывает должен ли ресурс загружаться с помощью запроса 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>
не искажая их. Допустимы значения: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
), ресурс будет искажён, а его использование ограничено.Если атрибут отсутствует, ресурс загружается без запроса 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.
- В HTML 4, это может быть только простой, разделённый пробелами, список литералов, описывающих медиа, т.е. media типы и группы, которые определены и допустимы в качестве значений для этого атрибута, такие как
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-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">
он определяет предпочтительную или альтернативную таблицу стилей. Неверное использование может стать причиной игнорирования таблицы стилей. type
-
Этот атрибут используется для определения типа связываемого контента. Значение атрибута должно быть типом MIME, такое как text/html, text/css и т.д. Обычно он используется для определения типа таблицы стилей, на которую делается ссылка (например, text/css), но, учитывая, что CSS является единственным языком таблиц стилей, используемым в сети, этот атрибут может быть пропущен, что является рекомендацией. Он также используется для типов ссылок
rel="preload"
, чтобы браузер загружал только те типы файлов, которые он поддерживает.
Нестандартные атрибуты
disabled
Non-standard-
Этот атрибут используется для отключения отношения ссылки. В сочетании со скриптом, этот атрибут может использоваться для включения и выключения различных отношений таблицы стилей.
**Примечание:**Хотя в стандарте HTML нет атрибута
disabled
, атрибутdisabled
есть в объекте DOMHTMLLinkElement
. 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
. Значения типов ссылки для атрибута аналогичны возможным значениям дляrel
.Примечание: Этот атрибут считается устаревшим жизненным стандартом WHATWG HTML (который является каноничной спецификацией MDN). Однако, стоит отметить, что
rev
не считается устаревшим в спецификации W3C. Стоит сказать, учитывая неопределённость, полагаться наrev
не стоит. Примечание: Взамен, вы должны использовать атрибут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" id="my-stylesheet" />
Примечание: Событие load
запускается после загрузки и анализа таблицы стилей и всего импортируемого содержимого, непосредственно перед тем, как стили будут применены к содержимому.
Preload примеры
Вы можете найти примеры <link rel="preload">
в Preloading content with rel="preload"
.
Техническое резюме
Каталоги контента | Контент метаданных. Если есть itemprop: потоковый контент и фразовый контент. |
---|---|
Допустимое содержимое | Нет, это empty element. |
Пропуск тегов | Так как это пустой элемент, присутствовать должен начальный тэг, конечный - отсутствует. |
Допустимые родители | Любой элемент, принимающий элементы метаданных. Если есть itemprop: любой элемент, принимающий фразовый контент. |
Допустимые ARIA-роли | Нет |
DOM-интерфейс | HTMLLinkElement |
Спецификации
Specification |
---|
HTML Standard # the-link-element |
Совместимость с браузерами
BCD tables only load in the browser