Содержание
<link>
Элемент HTML - Ссылка на Внешний Ресурс (<link>) определяет отношения между текущим документом и внешним ресурсом. Этот элемент чаще всего используется для ссылки на stylesheets, а также для создания иконок сайта (как для иконок в стиле «favicon», так и для иконок домашних экранов и приложений мобильных устройств) среди прочего.
| Категории контента | Контент метаданных. Если есть itemprop : потоковый контент и фразовый контент. |
|---|---|
| Допустимое содержимое | Нет, это пустой элемент. |
| Пропуск тегов | Так как это пустой элемент, присутствовать должен начальный тэг, конечный - отсутствует. |
| Допустимые родители | Любой элемент, принимающий элементы метаданных. Если есть itemprop: любой элемент, принимающий фразовый контент. |
| Допустимые ARIA-роли | Нет |
| DOM-интерфейс | HTMLLinkElement |
Пример
- myexample.html
<link href="/media/examples/link-element-example.css" rel="stylesheet" /> <p>This text will be red as defined in the external stylesheet.</p> <p style="color: blue">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="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» (en-US) для более подробной информации), атрибут 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 в качестве предварительной загрузки следующей страницы в серии документов.
Атрибуты
К этому элементу применимы .глобальные атрибуты
profile
URI одного или более профилей метаданных, разделённых пробелами.
Пример
Примечание
HTML5-совместимые браузеры автоматически создают элемент <head>: элемент метаданных документа, если его теги пропущены в разметке
MDN Understanding WCAG, Guideline 3.1 explanations
Understanding Success Criterion 3.1.1 | W3C Understanding WCAG 2.0
Обсуждение