# Тег link

Тег `link` подключает CSS файлы на HTML страницу. Кроме того, `link` подключает некоторые другие файлы, например, фавикон. (Фавикон - это ярлычок сайта, который виден во вкладке браузера. Его также можно увидеть в некоторых поисковиках при поиске напротив сайтов, например в Яндексе).

У данного тега очень много атрибутов и они могут принимать разнообразные значения, однако в реальной жизни они все практически не используются. Самое популярное - это подключение CSS и добавление фавикона.

Как подключить CSS в HTML5: <link rel="stylesheet" href="style.css">. В более ранних версиях нужно было добавлять атрибут type в значении text/css. В HTML5 так тоже можно делать, но это не обязательно.

Как подключить фавикон: <link href="favicon.ico" rel="shortcut icon" type="image/x-icon">.

Тег link не требует закрывающего тега.

## Атрибуты

Атрибут | Описание
--- | ---
`href` | Путь к подключаемому файлу.
`media` | Тип устройства, для которого следует подключить файл. Что имеется ввиду - вы можете подключить CSS файл только для больших экранов (значение `screen`) или только для маленьких экранов: для мобильников или планшетов (значение `handheld`). Возможные значения: all, braille, handheld, print, screen, speech, projection, tty, tv. Подробнее смотрите ниже.
`rel` | Тип подключаемого файла. Возможные значения: stylesheet | alternate. Значение `stylesheet` указывает на то, что подключается CSS файл, значение `alternate` используется, к примеру, для указания ссылки на файл в формате XML для описания ленты новостей, анонсов статей.
`charset` | Кодировка подключаемого файла. В настоящее время стандартом является `utf-8`.
`type` | Тип данных подключаемого файла. Для CSS следует использовать text/css, для фавикона: image/x-icon.

## Значения атрибута media

В HTML5 в качестве значений могут быть указаны медиа-запросы.

Значение | Описание
--- | ---
`all` | Все устройства.
`screen` | Экран монитора.
`handheld` | Телефоны, смартфоны, устройства с маленьким экраном.
`braille` | Устройства, основанные на системе Брайля, предназначены для слепых людей.
`speech` | Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда же входят речевые браузеры.
`print` | Принтеры.
`projection` | Проекторы.
`tty` | Телетайпы, терминалы, портативные устройства с ограниченными возможностями экрана. Для них не должны использоваться пиксели в качестве единиц измерения.
`tty` | Телевизоры, которые умеют открывать web страницы (бывает и такое).

Значение по умолчанию: `all`.

## Пример

Давайте посмотрим, как выглядит структура простейшей html страницы, к которой добавим подключение CSS файлов и фавикона:

`<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style1.css"> <link rel="stylesheet" href="style2.css" media="screen"> <link href="favicon.ico" rel="shortcut icon" type="image/x-icon"> <meta charset="utf-8"> <title>Это заголовок тайтл</title> </head> <body> Это основное содержимое страницы. </body> </html>`

## Смотрите также

- тег `style`,
  который добавляет CSS прямо на странице
- атрибут `style`, который задает стили конкретному тегу

←→
↑