\n\n\n \n

Содержание страницы

\n\n\n```\n\n### Содержимое \n\n```html\n\n \n \n \n \n \n \n \n My Awesome Website\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n```\n\n### Что такое
\n\n**
** - это семантический HTML5 элемент, который обозначает шапку (header) страницы или раздела. Содержимое
ВИДНО пользователю.\n\n```html\n\n \n
\n \n

Welcome to My Site

\n
\n \n \n
\n
\n

Статья

\n

Текст статьи...

\n
\n
\n \n \n
\n

Copyright 2026

\n
\n\n```\n\n### Таблица различий\n\n| Аспект | |
|\n|--------|--------|----------|\n| **Тип** | Структурный элемент | Семантический контейнер |\n| **Видимость** | НЕ видна пользователю | Видна пользователю |\n| **Местоположение** | В начале документа (после ) | В , обычно вверху |\n| **Количество на странице** | Только один | Может быть несколько |\n| **Содержимое** | Метаинформация (title, meta, link, script) | Логотип, навигация, поиск |\n| **Назначение** | Информация браузеру и поисковикам | Визуальная шапка страницы |\n| **Обязательность** | Обязателен (хотя браузер может добавить) | Опционален |\n| **Структура** | Специальная, не может содержать тело | Обычный блочный элемент |\n\n### Примеры запутанности\n\n#### НЕПРАВИЛЬНО: путаница тегов\n\n```html\n\n\n
\n

My Site

\n
\n\n\n \n\n\n\n\n

My Site

\n\n```\n\n#### ПРАВИЛЬНО\n\n```html\n\n\n\n \n My Site\n \n\n\n \n
\n

My Site

\n \n
\n \n
\n

Welcome

\n

Content here...

\n
\n\n\n```\n\n### Примеры страницы с разными header\n\n```html\n\n\n\n \n My Blog\n \n\n\n \n
\n
My Blog
\n \n
\n \n
\n \n
\n
\n

Interesting Article

\n

Published: 2026-04-02

\n

Author: John Doe

\n
\n \n
\n

Article content...

\n
\n
\n
\n \n \n
\n
\n

Recent Posts

\n
\n
    \n
  • Post 1
  • \n
  • Post 2
  • \n
\n
\n \n
\n

Copyright 2026

\n
\n\n\n```\n\n### Семантическое значение
\n\n
может использоваться для обозначения шапки разных элементов:\n\n```html\n\n
\n

Site Title

\n
\n\n\n
\n
\n

Article Title

\n

By Author

\n
\n

Content...

\n
\n\n\n
\n
\n

Section Title

\n
\n

Content...

\n
\n\n\n
\n
\n

Card Title

\n
\n

Card content...

\n
\n```\n\n### SEO и значимость\n\n** элементы влияют на SEO:**\n\n```html\n\n \n Best Frontend Interview Prep - PrepBro\n \n \n \n \n \n \n \n \n \n \n \n \n\n```\n\n**
элемент:**\n\n```html\n
\n \n \n \n

Main Title

\n
\n```\n\n### Практический пример реальной страницы\n\n```html\n\n\n\n \n \n \n Интернет магазин электроники\n \n \n \n\n\n \n
\n \n
\n \n
\n
\n
\n

Новая видеокарта RTX 5090

\n $2999\n
\n \"RTX\n

Описание товара...

\n
\n
\n\n\n```\n\n### Ключевые выводы\n\n- **** НЕ видна, содержит метаинформацию\n- **
** видна, это визуальная шапка\n- **** содержит: title, meta, link, script\n- **
** содержит: логотип, навигацию, h1\n- **** один на странице\n- **
** может быть несколько (для разных разделов)\n- **Путаница частая**: помни, это разные вещи\n- **
** помогает с семантикой и accessibility","dateCreated":"2026-04-02T22:06:39.039989","upvoteCount":0,"author":{"@type":"Person","name":"claude-haiku-4.5"}}}}
← Назад к вопросам

В чем разница между тегами 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
В чем разница между тегами header и head? | PrepBro