HTML-тег <link>
Тег <link> устанавливает связь между текущим документом и внешним ресурсом. Обычно он используется для подключения внешней таблицы стилей CSS.
Тег <link> также можно использовать для связи различных версий страницы. Это полезно, если контент переведен на несколько языков.
HTML-документ может содержать несколько элементов <link> для загрузки различных типов ресурсов, таких как таблицы стилей, иконки или предварительно загружаемый контент. Все эти элементы <link> должны находиться в секции <head> документа (обычно перед закрывающим тегом <code></head></code>). В одном документе можно использовать несколько элементов <link>.
Синтаксис
Тег <link> является пустым, то есть закрывающий тег не требуется. Он содержит только атрибуты. Однако в XHTML тег <link> должен быть закрыт (<link/>).
Пример использования HTML-тега <link>:
HTML-тег <link>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>The appearance of the header is determined by the CSS styles specified in the external file.</h1>
<p>The appearance of the paragraph is determined by the CSS styles specified in the external file.</p>
</body>
</html>Результат
Атрибуты
| Attribute | Value | Description |
|---|---|---|
| as | content_type | Указывает тип загружаемого контента. Обязательно при rel="preload". |
| charset | char_encoding | Определяет кодировку связанного документа. Устарел в HTML5. |
| crossorigin | anonymous use-credentials | Настраивает параметры CORS для связанного ресурса. |
| href | URL | Определяет URL внешнего файла. |
| hreflang | language_code | Определяет язык текста связанного документа. |
| integrity | hash_value | Включает проверку целостности подресурсов для верификации загружаемых ресурсов. |
| media | media_query | Определяет устройство, для которого будут применяться стили. |
| rel | alternate author bookmark dns-prefetch first help icon last license next nofollow noreferrer pingback preload prefetch prev search stylesheet tag preconnect manifest modulepreload | Определяет связь между текущим документом и связанным файлом. Распространенные значения: stylesheet (подключает CSS-файл), icon (подключает фавиконку), preload (предварительно загружает ресурс), alternate (связывает с альтернативной версией документа). |
| rev | reversed relationship | Определяет связь между текущим и связанными документами. Устарел в HTML5. |
| sizes | Width x Height | Задает размер связанных иконок. Используется только с rel="icon". |
| type | media_type | Определяет MIME-тип (спецификацию сетевой передачи различных типов файлов) связанного документа. Примечание: при подключении таблицы стилей атрибут type="text/css" является необязательным и по умолчанию подразумевает CSS. |
Тег <link> также поддерживает Глобальные атрибуты и Атрибуты событий.
Практика
Какие атрибуты имеет HTML-тег <a>?