Тег 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>