Шапка и подвал присутствуют практически на каждом сайте, и хотя по содержимому они сильно различаются от проекта к проекту, структурные решения для них повторяются достаточно часто, чтобы выделить несколько по-настоящему рабочих и проверенных паттернов вёрстки.
Типичная шапка сайта состоит из логотипа слева, основной навигации по центру или справа и иногда дополнительной кнопки действия вроде "связаться" или "войти" в самом конце. Flexbox с justify-content space-between отлично справляется с распределением этих элементов по ширине шапки.
На узких экранах полноценное меню навигации редко помещается целиком, поэтому его чаще всего сворачивают в кнопку гамбургер-меню, которая открывает список ссылок поверх страницы или выезжающей боковой панелью. Такая адаптация — практически стандарт для мобильной версии почти любого сайта сегодня.
Закреплённая шапка, остающаяся на экране при прокрутке через position sticky или fixed, удобна для навигации по длинным страницам, но занимает часть экрана постоянно — на маленьких телефонах это иногда оставляет не так много места под сам контент, и решение стоит принимать с учётом конкретного проекта.
Подвал обычно содержит контакты, ссылки на социальные сети, копирайт и иногда небольшую карту сайта со ссылками на основные разделы. Вёрстка подвала часто использует Grid с несколькими колонками на широких экранах, которые превращаются в одну колонку друг под другом на телефоне.
И шапка, и подвал — не место для избыточного декора: их задача в первую очередь функциональная, помочь посетителю ориентироваться на сайте и найти нужную информацию, а не привлечь к себе основное внимание, которое должно оставаться на содержимом самой страницы.
Примеры типичных решений для шапки и подвала с кодом можно найти в разделе паттернов вёрстки на web.dev.
