Header / Footer — шапка/подвал

Что такое Header / Footer — шапка/подвал

Header (шапка) — это верхняя часть веб-страницы, приложения или документа, где размещают основные элементы навигации и важную информацию. Footer (подвал) — это нижняя часть, где обычно пишут контакты, копирайт, ссылки на политики и дополнительные разделы.

Шапка появляется в самом начале, когда пользователь открывает страницу — она помогает сразу понять, где он находится и куда можно перейти. Подвал виден в самом конце — его часто не замечают, но он важен для доверия и удобства.

Обычно шапка и подвал остаются неизменными на всех страницах сайта или в приложении. Это как обложка и последняя страница книги — они не меняются, но помогают ориентироваться.

Зачем нужен Header / Footer

Шапка и подвал нужны, чтобы пользователь не терялся на сайте. Без них человеку пришлось бы каждый раз искать, как вернуться на главную, где контакты или как открыть корзину — это раздражает и заставляет уйти.

Они делают интерфейс предсказуемым. Если вы уже видели шапку на одной странице, то знаете: на следующей она будет такой же. Это снижает нагрузку на мозг — не нужно учиться заново, как пользоваться сайтом.

Вот основные выгоды:

• Пользователи быстрее находят нужное — не тратят время на поиски.
• Бренд выглядит профессионально: чёткая структура = доверие.
• Улучшается SEO — поисковики любят стабильные, понятные сайты.
• Легче делать обновления: если нужно поменять логотип или ссылку — правишь один раз, и это изменяется на всех страницах.
• Подвал помогает соблюдать юридические требования: там размещают политику конфиденциальности, условия использования и контактные данные.

Как это работает

Шапка и подвал — это отдельные блоки кода, которые вставляются на каждую страницу сайта. Они не зависят от содержимого страницы: например, на главной — новости, в шапке — меню; на странице контактов — форма, а шапка та же.

Что обычно в шапке:

• Логотип компании (ссылка на главную).
• Главные меню: «Услуги», «О нас», «Контакты».
• Кнопки входа, корзины или поиска.

Что обычно в подвале:

• Копирайт: «© 2025 Название компании».
• Ссылки на важные страницы: «Политика конфиденциальности», «Доставка».
• Контакты: телефон, email, соцсети.
• Информация о платёжных системах или сертификатах.

Когда пользователь прокручивает страницу, шапка остаётся сверху (иногда «прилипает» к верху экрана), а подвал — всегда внизу. Это делается с помощью CSS и HTML, но пользователю это не видно — он просто чувствует, что всё «на своих местах».

Виды Header / Footer

Статичная шапка. Она всегда видна, даже если пользователь прокручивает страницу вниз. Используется на сайтах с частым переходом между разделами — например, интернет-магазинах.

Плавающая шапка. Это та же статичная, но с эффектом «прилипания»: когда вы прокручиваете вниз, шапка остаётся на месте. Удобно для мобильных устройств.

Простой подвал. Только копирайт и ссылки — подходит для блогов или небольших сайтов.

Расширенный подвал. Содержит несколько колонок: контакты, ссылки, новости, формы подписки. Используется на крупных сайтах — например, Amazon или Ozon.

Шапка и подвал редко делятся на «типы» в строгом смысле — чаще различают их содержание и поведение. Главное — чтобы они работали, а не выглядели красиво.

Простой пример

Допустим, Маша зашла на сайт интернет-магазина, чтобы купить кроссовки. Она видит в шапке: логотип, кнопку «Каталог», «Корзина» и «Войти». Она кликает на «Каталог», выбирает кроссовки, добавляет в корзину — и всё ещё видит шапку. Потом она прокручивает страницу вниз и видит подвал: «© 2025 СпортМаркет», телефон, ссылки на доставку и политику конфиденциальности. Когда она решает оформить заказ — кнопка «Оформить» в шапке всё ещё на месте. Без шапки она бы забыла, где корзина. Без подвала — не знала, как связаться с поддержкой. После того как сайт получил шапку и подвал — Маша купила кроссовки, не ушла с сайта в раздражении.

Как начать

1. Определи, что должно быть в шапке: логотип, главное меню, кнопки входа и корзины. Не перегружай — максимум 5–6 пунктов.
2. Сделай подвал простым: копирайт, телефон, ссылки на политики. Добавь соцсети только если они активны.
3. Проверь, как это выглядит на телефоне: шапка должна быть удобной для кликов пальцем, подвал — не «съезжать» влево.
4. Сделай их одинаковыми на всех страницах: если шапка отличается на «О нас» и «Контактах» — пользователь запутается.
5. Протестируй с реальными людьми: спроси, легко ли найти корзину или контакты. Если да — ты всё сделал правильно.

Частые вопросы

Чем Header / Footer отличается от похожих понятий?
Шапка и подвал — это не баннеры или боковые меню. Они всегда находятся вверху и внизу, а не сбоку или по центру. Их цель — постоянство и навигация, а не реклама.

Можно ли обойтись без Header / Footer?
Можно, но плохо. Без них сайт выглядит «сырым», пользователи теряются, конверсия падает. Даже самый простой сайт должен иметь хотя бы базовую шапку.

Кому в первую очередь стоит разбираться в Header / Footer?
Веб-дизайнерам, маркетологам и владельцам малого бизнеса. Если вы делаете сайт — это первое, что нужно настроить. Это не «дизайн», а основа удобства.