В чем разница между тегами header и head?

1.0 Junior🔥 201 комментариев

#HTML и CSS

Комментарии (1)

🐱

claude-haiku-4.5PrepBro AI2 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

В чем разница между тегами header и head?

Краткий ответ

Это совершенно РАЗНЫЕ теги:

<head> - содержит метаинформацию о странице (не видна пользователю)
<header> - семантический контейнер для шапки страницы (видна пользователю)

Что такое <head>

<head> - это обязательная часть HTML документа, которая содержит метаинформацию о странице. Содержимое <head> НЕ отображается на странице.

<!DOCTYPE html>
<html>
<head>
  <!-- Это НЕ видно пользователю -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Мой сайт</title>
  <link rel="stylesheet" href="styles.css">
  <script src="script.js"></script>
</head>
<body>
  <!-- Это видно пользователю -->
  <h1>Содержание страницы</h1>
</body>
</html>

Содержимое <head>

<head>
  <!-- 1. Кодировка символов -->
  <meta charset="UTF-8">
  
  <!-- 2. Responsiveness -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <!-- 3. Заголовок в браузере -->
  <title>My Awesome Website</title>
  
  <!-- 4. Стили -->
  <link rel="stylesheet" href="styles.css">
  <style>
    body { margin: 0; }
  </style>
  
  <!-- 5. Скрипты (обычно внизу body, но могут быть в head) -->
  <script src="script.js" defer></script>
  
  <!-- 6. Фавикон -->
  <link rel="icon" href="favicon.ico">
  
  <!-- 7. SEO и социальные сети -->
  <meta name="description" content="Описание страницы">
  <meta property="og:title" content="Заголовок для соцсетей">
  <meta property="og:image" content="image.jpg">
  
  <!-- 8. Шрифты -->
  <link rel="preload" as="font" href="font.woff2">
  
  <!-- 9. Preconnect -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
</head>

Что такое <header>

<header> - это семантический HTML5 элемент, который обозначает шапку (header) страницы или раздела. Содержимое <header> ВИДНО пользователю.

<body>
  <!-- Это видно: шапка сайта -->
  <header>
    <nav>
      <ul>
        <li><a href="/">Главная</a></li>
        <li><a href="/about">О нас</a></li>
        <li><a href="/contact">Контакты</a></li>
      </ul>
    </nav>
    <h1>Welcome to My Site</h1>
  </header>
  
  <!-- Основной контент -->
  <main>
    <article>
      <h2>Статья</h2>
      <p>Текст статьи...</p>
    </article>
  </main>
  
  <!-- Подвал -->
  <footer>
    <p>Copyright 2026</p>
  </footer>
</body>

Таблица различий

Аспект	<head>	<header>
Тип	Структурный элемент	Семантический контейнер
Видимость	НЕ видна пользователю	Видна пользователю
Местоположение	В начале документа (после <html>)	В <body>, обычно вверху
Количество на странице	Только один	Может быть несколько
Содержимое	Метаинформация (title, meta, link, script)	Логотип, навигация, поиск
Назначение	Информация браузеру и поисковикам	Визуальная шапка страницы
Обязательность	Обязателен (хотя браузер может добавить)	Опционален
Структура	Специальная, не может содержать тело	Обычный блочный элемент

Примеры запутанности

НЕПРАВИЛЬНО: путаница тегов

<!-- ОШИБКА: запихали <header> в <head> -->
<head>
  <header>
    <h1>My Site</h1>
  </header>
</head>
<body>
  <!-- Почему-то нет шапки? -->
</body>

<!-- ОШИБКА: название в <head> вместо <title> -->
<head>
  <h1>My Site</h1>  <!-- Не отобразится -->
</head>

ПРАВИЛЬНО

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My Site</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- Семантическая шапка -->
  <header>
    <h1>My Site</h1>
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  </header>
  
  <main>
    <h2>Welcome</h2>
    <p>Content here...</p>
  </main>
</body>
</html>

Примеры страницы с разными header

<!DOCTYPE html>
<html>
<head>
  <!-- Метаинформация: поисковики не видят -->
  <title>My Blog</title>
  <meta name="description" content="A great blog">
</head>
<body>
  <!-- Глобальная шапка сайта -->
  <header class="site-header">
    <div class="logo">My Blog</div>
    <nav class="main-nav">
      <a href="/">Home</a>
      <a href="/blog">Blog</a>
      <a href="/about">About</a>
    </nav>
  </header>
  
  <main>
    <!-- Шапка статьи -->
    <article>
      <header class="article-header">
        <h1>Interesting Article</h1>
        <p class="meta">Published: 2026-04-02</p>
        <p class="meta">Author: John Doe</p>
      </header>
      
      <div class="content">
        <p>Article content...</p>
      </div>
    </article>
  </main>
  
  <!-- Шапка секции -->
  <section>
    <header>
      <h2>Recent Posts</h2>
    </header>
    <ul>
      <li>Post 1</li>
      <li>Post 2</li>
    </ul>
  </section>
  
  <footer>
    <p>Copyright 2026</p>
  </footer>
</body>
</html>

Семантическое значение <header>

<header> может использоваться для обозначения шапки разных элементов:

<!-- Шапка всей страницы -->
<header>
  <h1>Site Title</h1>
</header>

<!-- Шапка статьи -->
<article>
  <header>
    <h2>Article Title</h2>
    <p>By Author</p>
  </header>
  <p>Content...</p>
</article>

<!-- Шапка раздела -->
<section>
  <header>
    <h2>Section Title</h2>
  </header>
  <p>Content...</p>
</section>

<!-- Даже шапка карточки -->
<div class="card">
  <header>
    <h3>Card Title</h3>
  </header>
  <p>Card content...</p>
</div>

SEO и значимость

<head> элементы влияют на SEO:

<head>
  <!-- Google видит это -->
  <title>Best Frontend Interview Prep - PrepBro</title>
  
  <!-- Google видит это -->
  <meta name="description" content="Подготовься к собеседованию...">
  
  <!-- Социальные сети видят это -->
  <meta property="og:title" content="Title for social">
  <meta property="og:image" content="preview.jpg">
  <meta property="og:description" content="Description for social">
  
  <!-- Это НЕ видно в поиске -->
  <meta charset="UTF-8">
  <meta name="viewport" content="...">
</head>

<header> элемент:

<header>
  <!-- Помогает с семантикой/структурой HTML -->
  <!-- Помогает скрин-ридерам (accessibility) -->
  <!-- Немного помогает SEO (структура документа) -->
  <h1>Main Title</h1>
</header>

Практический пример реальной страницы

<!DOCTYPE html>
<html lang="ru">
<head>
  <!-- Эта часть невидима -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Интернет магазин электроники</title>
  <meta name="description" content="Покупайте электронику с доставкой">
  <link rel="stylesheet" href="styles.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
</head>
<body>
  <!-- Эта часть видима: шапка -->
  <header class="global-header">
    <div class="container">
      <div class="logo">ElectroShop</div>
      <nav>
        <a href="/">Каталог</a>
        <a href="/bestsellers">Топ продажи</a>
        <a href="/cart">Корзина</a>
        <a href="/profile">Профиль</a>
      </nav>
      <input type="search" placeholder="Поиск...">
    </div>
  </header>
  
  <main>
    <article>
      <header>
        <h1>Новая видеокарта RTX 5090</h1>
        <span class="price">$2999</span>
      </header>
      <img src="rtx-5090.jpg" alt="RTX 5090">
      <p>Описание товара...</p>
    </article>
  </main>
</body>
</html>

Ключевые выводы

<head> НЕ видна, содержит метаинформацию
<header> видна, это визуальная шапка
<head> содержит: title, meta, link, script
<header> содержит: логотип, навигацию, h1
<head> один на странице
<header> может быть несколько (для разных разделов)
Путаница частая: помни, это разные вещи
<header> помогает с семантикой и accessibility