Базовый каркас сайта — это три опорных блока: шапка, меню и подвал. Без них даже хороший контент выглядит незавершённым, а пользователь тратит лишние секунды на ориентацию. Когда я только начинал работать с сайтами — ещё на этапе регистрации доменов и настройки DNS — первым делом после привязки хостинга создавал именно эту структуру. Она сразу превращает пустой index.html в нечто похожее на проект, а не на набор разрозненных блоков.
Если вы только осваиваете вёрстку, соберите сначала каркас. Он пригодится и для лендинга, и для блога, и для корпоративного сайта. Дальше будет проще добавлять адаптивность, формы и скрипты.
Что такое каркас сайта и зачем он нужен
Каркас — это повторяющиеся элементы, которые присутствуют на большинстве страниц:
- шапка с логотипом, навигацией и контактами;
- меню или навигация по разделам;
- основной контент страницы;
- подвал с дополнительной информацией, ссылками и служебными данными.
Такой подход экономит время и упрощает поддержку. Пользователь быстрее понимает, где он находится и как перейти в нужный раздел. Для вас как верстальщика это ещё и основа для дальнейшей адаптивности: если каркас сделан аккуратно, масштабировать сайт под мобильные устройства намного проще. Я не раз убеждался: потратив час на продуманную структуру, вы сэкономите несколько часов при доработке.
Из каких блоков обычно состоит шапка, меню и подвал
Набор элементов зависит от типа сайта, но в большинстве случаев логика одинаковая. Вот что я обычно закладываю в начале проекта:
| Блок | Что обычно содержит | Зачем нужен |
|---|---|---|
| Шапка | логотип, название, меню, телефон, кнопка действия | помогает сразу понять, куда попал пользователь |
| Меню | ссылки на разделы сайта | даёт быстрый переход между страницами |
| Подвал | контакты, копирайт, допссылки, соцсети, политика | закрывает служебные и навигационные задачи |
Для небольшого сайта достаточно минимального набора. Для интернет-магазина или портала блоки будут шире: в шапке может появиться поиск, корзина, вход в личный кабинет, а в подвале — карта сайта и юридические ссылки. Но начинать всегда лучше с простого: логотип, меню, кнопка, контакты внизу.
Какой HTML использовать для базовой структуры
Для каркаса лучше применять семантические теги. Семантика означает, что элемент не просто выглядит как блок, а ещё и показывает браузеру и поисковым системам, что это за часть страницы. Это важно не только для SEO, но и для доступности: скринридеры объявляют роли элементов, и пользователь с ослабленным зрением быстрее ориентируется.
Основные теги, которые я использую в каждом проекте:
<header>— шапка;<nav>— навигация;<main>— основной контент;<footer>— подвал;<section>— смысловой раздел;<div>— универсальная обёртка, если семантический тег не подходит.
Пример минимальной структуры, с которой я часто стартую:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Название сайта</title>
</head>
<body>
<header>
<!-- логотип и меню -->
</header>
<nav>
<!-- основное меню -->
</nav>
<main>
<!-- контент страницы -->
</main>
<footer>
<!-- подвал -->
</footer>
</body>
</html>Такой скелет сразу даёт понятную структуру и позволяет не запутаться, когда начнёте добавлять стили.
Пошагово: как сверстать шапку сайта
1. Сначала продумайте состав элементов
Перед вёрсткой я всегда отвечаю на три вопроса:
- что должно быть в шапке;
- что пользователь должен увидеть первым;
- какое действие для вас главное: звонок, заявка, переход в каталог или вход в аккаунт.
Для простого сайта шапка может включать только логотип, меню и кнопку. Не перегружайте её лишними деталями: чем проще шапка, тем быстрее она работает и тем удобнее выглядит на мобильном устройстве. По своему опыту скажу: когда я пытался запихнуть в шапку телефон, адрес, поиск и три кнопки, пользователи просто терялись. Сейчас я оставляю только критически важное.
2. Используйте контейнер и flex
Обычно шапку удобно строить на flex. Он позволяет выстроить элементы в одну линию и легко управлять расстоянием между ними. Я почти всегда добавляю внешний контейнер, чтобы ограничить ширину и отцентрировать содержимое.
<header class="header">
<div class="container header__inner">
<a href="/" class="logo">Мой сайт</a>
<nav class="menu">
<ul>
<li><a href="/about">О нас</a></li>
<li><a href="/services">Услуги</a></li>
<li><a href="/contacts">Контакты</a></li>
</ul>
</nav>
<a href="#" class="btn">Заказать</a>
</div>
</header>В CSS для .header__inner я задаю display: flex; justify-content: space-between; align-items: center;. Это автоматически разносит логотип, меню и кнопку по краям и выравнивает по вертикали. Контейнер ограничивает максимальную ширину, например, 1200px, и центрирует через margin: 0 auto;.
3. Сделайте логотип и меню понятными
Логотип лучше оформлять как ссылку на главную страницу. Это стандартное и привычное поведение для пользователя. Я всегда добавляю aria-label на случай, если логотип — картинка без текста, чтобы скринридеры могли его озвучить.
Меню — это список ссылок. Даже если визуально оно выглядит как горизонтальная строка, в HTML лучше использовать именно список <ul>. Так код остаётся понятным и доступным: скринридер объявит «список из трёх пунктов» и пользователь сможет быстро перемещаться по ним.
<nav aria-label="Основное меню">
<ul class="menu-list">
<li><a href="/">Главная</a></li>
<li><a href="/blog">Блог</a></li>
<li><a href="/contacts">Контакты</a></li>
</ul>
</nav>В стилях я убираю маркеры списка через list-style: none; и выстраиваю пункты в строку с помощью display: flex; gap: 20px;.
4. Добавьте кнопку действия
Если сайт коммерческий, в шапке почти всегда нужна заметная кнопка: «Заказать», «Оставить заявку», «Связаться». Она должна отличаться от обычных ссылок цветом, размером или рамкой. Я обычно задаю ей класс .btn с ярким фоном, внутренними отступами и скруглением. Главное — не переборщить с количеством кнопок: одна, максимум две. Иначе внимание рассеивается.
Как сверстать меню сайта без лишней сложности
Меню — это не просто список ссылок. Это навигационная карта сайта. Если структура меню продумана плохо, пользователь быстро теряется. Я всегда начинаю с вопроса: «Какие три-четыре раздела самые важные для посетителя?»
Базовые правила хорошего меню
- не делайте слишком много пунктов — семи-восьми уже многовато для основного меню;
- называйте разделы коротко и понятно — «Услуги» лучше, чем «Что мы предлагаем»;
- размещайте самые важные ссылки ближе к началу — слева направо приоритет убывает;
- не прячьте ключевые разделы глубоко в подменю без крайней необходимости.
Типичный вариант меню для небольшого сайта
- Главная
- О нас
- Услуги
- Портфолио
- Контакты
Для блога логика будет другой, и я часто использую такую структуру:
- Статьи
- Руководства
- Категории
- Об авторе
- Контакты
Что важно в мобильной версии
На смартфонах горизонтальное меню часто не помещается. В этом случае обычно используют бургер-кнопку, которая открывает список ссылок. Когда я только начинал, делал бургер на чистом CSS через скрытый чекбокс — это работает, но сейчас предпочитаю небольшой JavaScript для управления классом .active. Так проще контролировать анимацию и поведение при клике вне меню.
Если вы новичок, начните с простого решения: на десктопе меню видно сразу, на мобильном — скрывается и открывается по нажатию. Даже такая реализация уже делает сайт гораздо удобнее. Главное — не забудьте про медиа-запросы и метатег viewport.
Как сделать подвал сайта полезным, а не формальным
Подвал часто недооценивают, хотя это один из самых полезных блоков страницы. Пользователь нередко ищет контакты именно там, особенно если не хочет скроллить наверх. Я всегда стараюсь сделать футер информативным, но не перегруженным.
Что стоит разместить в подвале
- название компании или сайта;
- контакты (телефон, email, адрес);
- ссылку на политику конфиденциальности;
- дополнительные разделы (например, «Доставка» или «FAQ»);
- иконки соцсетей;
- копирайт;
- юридическую информацию, если она нужна.
Для информационного сайта в подвале можно добавить навигацию по категориям, форму подписки, ссылки на популярные статьи или краткое описание проекта. Я часто дублирую там основное меню — это помогает, когда пользователь дочитал страницу до конца и хочет перейти в другой раздел, не возвращаясь в шапку.
Пример структуры footer
<footer class="footer">
<div class="container footer__grid">
<div class="footer__col">
<h4>О проекте</h4>
<p>Краткое описание сайта или компании.</p>
</div>
<div class="footer__col">
<h4>Разделы</h4>
<ul>
<li><a href="/blog">Блог</a></li>
<li><a href="/services">Услуги</a></li>
<li><a href="/contacts">Контакты</a></li>
</ul>
</div>
<div class="footer__col">
<h4>Контакты</h4>
<p>[email protected]</p>
<p>+7 (999) 123-45-67</p>
</div>
</div>
<div class="footer__bottom">
<p>© 2025 Мой сайт. Все права защищены.</p>
</div>
</footer>Такая сетка из трёх колонок (на десктопе) легко делается через display: flex или grid. На мобильных колонки просто переносятся одна под другую.
Частые ошибки при верстке каркаса
Даже простая структура может выглядеть плохо, если допустить типичные ошибки. Вот что я встречал чаще всего и как это исправлял:
| Ошибка | Чем она мешает | Как исправить |
|---|---|---|
| Слишком много элементов в шапке | перегружает первый экран, пользователь не может быстро найти главное | оставить только логотип, меню и одну кнопку действия; остальное убрать в подвал или на отдельную страницу |
Меню без списка (просто набор ссылок в div) |
ухудшает семантику и доступность, скринридеры не объявляют структуру | использовать <ul> и <li>, даже если визуально это строка |
| Подвал без полезной информации | блок выглядит пустым и бесполезным, пользователь уходит, не найдя контактов | добавить контакты, дублирующие ссылки, копирайт |
| Нет адаптивности | сайт ломается на мобильных: меню уезжает, текст налезает | проверить шапку, меню и footer на разных ширинах, добавить медиа-запросы и гибкие контейнеры |
| Слабый визуальный контраст | текст плохо читается, особенно на мобильных при ярком солнце | увеличить контраст между фоном и текстом, добавить достаточные отступы |
Ещё одна частая проблема — попытка сделать всё сразу слишком сложным. Новички нередко добавляют в шапку десятки элементов, хотя для первого сайта достаточно логотипа, меню и кнопки. Я сам через это прошёл: навороченная шапка с поиском, выпадающим меню и иконками только усложняла вёрстку и отвлекала от сути. Лучше начать с простого и добавлять функциональность по мере необходимости.
Минимальный набор CSS для аккуратного каркаса
Чтобы шапка, меню и подвал выглядели собранно, важны три вещи: отступы, выравнивание и типографика. Вот база, которую я обычно подключаю в начале проекта:
/* Сброс отступов и box-sizing */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: system-ui, -apple-system, sans-serif;
line-height: 1.5;
color: #333;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
.header {
padding: 20px 0;
background: #fff;
border-bottom: 1px solid #eee;
}
.header__inner {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.5rem;
font-weight: bold;
text-decoration: none;
color: inherit;
}
.menu-list {
display: flex;
gap: 20px;
list-style: none;
}
.menu-list a {
text-decoration: none;
color: #333;
}
.menu-list a:hover {
color: #007bff;
}
.btn {
display: inline-block;
padding: 10px 20px;
background: #007bff;
color: #fff;
text-decoration: none;
border-radius: 5px;
}
.footer {
background: #f5f5f5;
padding: 40px 0 20px;
margin-top: 40px;
}
.footer__grid {
display: flex;
flex-wrap: wrap;
gap: 30px;
justify-content: space-between;
}
.footer__bottom {
text-align: center;
margin-top: 30px;
font-size: 0.9rem;
color: #666;
}Если хотите сделать базу более аккуратной, добавьте единый container для всех секций, одинаковые внутренние отступы и понятные состояния :hover для ссылок. Это сразу придаёт проекту законченный вид, даже без сложного дизайна.
Как проверить, что каркас сайта собран правильно
Перед тем как переходить к наполнению, я всегда провожу быструю проверку по чек-листу. Это помогает отловить глупые ошибки на раннем этапе.
Чек-лист проверки
- шапка не занимает слишком много места (по высоте не более 100–120px на десктопе);
- логотип ведёт на главную;
- меню открывается и на десктопе, и на мобильном (пункты кликабельны, нет перекрытий);
- ссылки читаются и не сливаются с фоном;
- подвал содержит полезные данные: контакты, ссылки, копирайт;
- структура HTML семантична (использованы
<header>,<nav>,<main>,<footer>); - блоки не «прыгают» при загрузке (нет резких сдвигов из-за подгрузки шрифтов или изображений);
- нет лишних обёрток без смысла — каждый
<div>должен что-то решать; - сайт нормально выглядит на телефоне и планшете (проверяю не только в инструментах разработчика, но и на реальном устройстве).
Быстрый тест на практике
Откройте страницу и попробуйте пройти путь обычного пользователя:
- понять, что это за сайт (по логотипу и заголовку в шапке);
- найти нужный раздел через меню;
- связаться с владельцем (кнопка или контакты в подвале);
- вернуться на главную (клик по логотипу);
- понять, где заканчивается контент и начинается служебная часть (подвал явно отделён).
Если этот путь проходится без затруднений, каркас работает хорошо. Я часто прошу кого-нибудь из знакомых «пощёлкать» свежий прототип — свежий взгляд сразу выявляет неочевидные проблемы.
Когда пора усложнять структуру
Базовый каркас подходит не для всех случаев. Если сайт растёт, появляются новые задачи: многоуровневое меню, закреплённая шапка, отдельная навигация по разделам, расширенный подвал с колонками, поиск по сайту, личный кабинет, корзина и избранное. Я обычно добавляю такие элементы постепенно, когда без них уже не обойтись.
Например, закреплённую шапку (position: sticky; top: 0;) имеет смысл делать, когда страницы становятся длинными и пользователю нужно постоянно иметь доступ к меню. А выпадающее подменю — когда разделов больше семи и их нужно логически сгруппировать. Но начинать всегда лучше с чистой и устойчивой базы: слишком сложная первая версия сайта часто становится источником ошибок и путаницы. Я не раз переделывал чужие проекты, где уже на старте было накручено столько, что проще было пересобрать каркас с нуля.
FAQ
Нужно ли всегда использовать <header>, <nav> и <footer>?
Да, если эти блоки действительно есть на странице. Семантические теги упрощают структуру и делают код понятнее и для разработчика, и для поисковых систем. Я стараюсь применять их всегда, даже в небольших проектах — привычка вырабатывается быстро и потом экономит время при поддержке.
Можно ли сделать меню без JavaScript?
Да. Для простого статичного сайта часто хватает HTML и CSS. Например, бургер-меню можно реализовать через скрытый чекбокс и селектор :checked. JavaScript нужен, когда требуется более плавная анимация, закрытие по клику вне меню или сложная логика. Я обычно начинаю с CSS-решения, а если появляются требования к UX — добавляю небольшой скрипт.
Обязательно ли добавлять подвал?
Практически да. Даже минимальный footer помогает разместить контакты, копирайт и служебные ссылки. Пользователи привыкли искать там дополнительную информацию, и отсутствие подвала может создать впечатление незавершённости. Я всегда добавляю хотя бы строчку с копирайтом и ссылку на политику конфиденциальности.
Что важнее в шапке: красота или удобство?
Сначала удобство. Если пользователь быстро понимает, куда нажать и как перейти дальше, шапка выполнена правильно. Красоту можно навести потом, но если навигация неочевидна, никакой дизайн не спасёт. Я часто проверяю это простым тестом: даю человеку макет и прошу найти «Контакты» — если он делает это за секунду, всё хорошо.
Подходит ли этот каркас для одностраничного сайта?
Да. Для лендинга шапка, меню и подвал тоже нужны, просто меню часто ведёт не на другие страницы, а на якоря внутри страницы. Я делал десятки одностраничников, и базовая структура с семантическими тегами там работает отлично. Просто вместо ссылок на другие URL используются якоря типа #about, #services.
Хорошо свёрстанные шапка, меню и подвал создают основу всего сайта: они делают страницу понятной, удобной и готовой к развитию. Если вы начинаете с чистого HTML и аккуратного CSS, дальше будет проще добавить адаптивность, формы, скрипты и полноценную логику проекта. Именно так я когда-то перешёл от регистрации доменов к полноценной веб-разработке — с простого, но крепкого каркаса.