Тег <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-документа и служит для хранения всей служебной информации, необходимой браузеру и поисковым системам.

Атрибуты

id Уникальный идентификатор элемента
profile URL профиля метаданных (устарел в HTML5)

Поддержка браузерами
3.0 1.0 2.0 1.0 1.0