Тег <head> содержит головные элементы HTML документа, цель которых сообщать браузерам и поисковым системам техническую информацию о веб-странице (метаданные, стили, ссылки и т.д.). Пользователям эта информация не показывается.
Синтаксис
Содержимое тега пишется между открывающим (<head>) и закрывающим (</head>) тегами.
Тег <head> включает в себя следующие элементы:
- Тег <title> задает заголовок окна веб-страницы (обязательный элемент).
- Тег <style> сообщает о том, что в HTML документе используется код CSS.
- Тег <base> задает базовый абсолютный URL для всех относительных URL-адресов.
- Тег <link> определяет отношение между текущим HTML-документом и ресурсом, на который он ссылается, либо содержит ссылку на внешнюю таблицу стилей.
- Тег <meta> предоставляет дополнительную информацию (метаданные) об HTML-документе.
- Тег <script> содержит скрипт (как правило на языке JavaScript), либо указывает на внешний файл со скриптом.
- Тег <noscript> устанавливает альтернативный текст, который показывается, если браузер не поддерживает скрипты либо пользователь сам их отключил.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style type="text/css">
body {
background-color: #d3d3d3;
}
p {
color: #1c87c9;
}
a {
color: red;
}
</style>
</head>
<body>
<p>Абзац</p>
<a>Ссылка</a>
</body>
</html>Результат
В нашем примере в теге <head> мы использовали два тега - <title> и <style>. В теге <title> мы установили заголовок документа, который отображается в окне браузера. В теге <style> мы задали стили документа: фон документа будет оранжевым, текст в абзацах, обозначенных тегом <p>, будет синего цвета, а ссылки, обозначенные тегом <a> - розового.
Пример
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<p> Содержимое страницы</p>
</body>
</html>Результат
В нашем примере мы указали ссылку на содержащийся в CSS папке документ style.css, в котором содержатся стили документа.
Пример
<!DOCTYPE html>
<html>
<head>
<meta name="title" content="Учебник HTML и CSS">
<meta name="description" content="Основы HTML и CSS для начинающих">
<meta http-equiv="refresh" content="30">
</head>
<body>
<p> Содержимое страницы</p>
</body>
</html>Результат
В теге <meta> мы записали предназначенные для поисковиков метаданные - заголовок и описание (meta title, meta description).
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| profile | URL | Указывает адрес профиля метаданных. Не поддерживается в HTML5. |
| media | media_query | Указывает, для какого медиа / устройства оптимизирован медиаресурс. Новый элемент в HTML5. |
| type | text/css | Указывает тип мультимедиа для тега <style>. Новый элемент в HTML5. |
Тег <head> также поддерживает глобальные атрибуты и атрибуты событий.
Поддержка браузера
|
|
|
|
|
|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ |
Практикуйте свои знания
