Тег <head>
Описание
Тег <head> является контейнером для метаданных документа и служебной информации, которая не отображается напрямую на веб-странице, но необходима для её корректной работы.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Название страницы</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Содержимое страницы -->
</body>
</html>
<head>
<meta charset="UTF-8">
<title>Интернет-магазин электроники</title>
<meta name="description" content="Лучшие гаджеты по низким ценам">
<meta name="keywords" content="смартфоны, ноутбуки, техника">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:image" content="preview.jpg">
<link rel="stylesheet" href="css/main.min.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<script defer src="js/app.js"></script>
<style>
/* Критический CSS */
body { font-family: Arial, sans-serif; }
</style>
</head>
Ключевые элементы внутри <head>:
<title>- заголовок страницы (обязательный элемент)<meta charset>- кодировка документа (рекомендуется UTF-8)<meta name="viewport">- адаптивность для мобильных<meta name="description">- описание для SEO<link rel="stylesheet">- подключение CSS<script>- подключение JavaScript<base>- базовый URL для относительных ссылок
<head>
<!-- Предзагрузка важных ресурсов -->
<link rel="preload" href="font.woff2" as="font" crossorigin>
<link rel="preload" href="hero-image.webp" as="image">
<!-- Предварительное подключение к доменам -->
<link rel="preconnect" href="https://api.example.com">
<!-- DNS-prefetch для внешних ресурсов -->
<link rel="dns-prefetch" href="//cdn.example.com">
<!-- Каноническая ссылка для SEO -->
<link rel="canonical" href="https://example.com/page">
<!-- Альтернативные версии страницы -->
<link rel="alternate" hreflang="en" href="https://example.com/en">
</head>
Особенности работы:
- Должен содержаться в
<html>и идти перед<body> - Может включать несколько однотипных элементов (meta, link)
- Порядок некоторых элементов важен (CSS до JS)
- Содержимое не отображается пользователю напрямую
- Влияет на SEO, производительность и отображение страницы
Тег <head> является обязательным элементом HTML-документа и служит для хранения всей служебной информации, необходимой браузеру и поисковым системам.
Атрибуты
| accesskey | Горячая клавиша для активации элемента |
| class | CSS-классы для стилизации элемента |
| contenteditable | Разрешает редактирование содержимого |
| data-* | Пользовательские данные элемента |
| dir | Направление текста (ltr|rtl) |
| hidden | Скрывает элемент |
| id | Уникальный идентификатор элемента |
| lang | Язык содержимого элемента |
| spellcheck | Включает проверку орфографии |
| style | Инлайновые CSS-стили элемента |
| tabindex | Порядок перехода при навигации по Tab |
| title | Всплывающая подсказка для элемента |
| translate | Определяет возможность перевода содержимого |
| profile | URL профиля метаданных (устарел в HTML5) |
Поддержка браузерами
 |
 |
 |
 |
 |
|---|---|---|---|---|
| 3.0 | 1.0 | 2.0 | 1.0 | 1.0 |