Главная идея: сначала каркас, потом краска
Лендинг кажется набором красивых блоков, но за ним стоит простой скелет. Опытный
верстальщик начинает не с цвета кнопки, а с вопроса «из каких смысловых частей состоит
страница?». Сначала вы делите страницу на крупные блоки — header,
main с секциями и footer — и только потом наполняете их стилем.
Такой порядок защищает от хаоса: структура остаётся понятной, даже если поменять оформление.
Статичный landing — это страница без интерактивной логики: пользователь сверху вниз читает предложение (hero), смотрит преимущества (features), доходит до призыва к действию (CTA) и контактов (footer). Ваша задача — выстроить эту историю в виде вложенных коробок.
Думайте о странице как о многоэтажном здании. Header —
вывеска и табличка с этажами над входом, она всегда наверху. Hero —
витрина первого этажа: крупно, ярко, с главным предложением. Секции —
этажи: преимущества, отзывы, цены — каждый со своей темой. Footer —
подвал с техническими службами: контакты, ссылки, копирайт. А контейнер
(max-width + центрирование) — это несущие стены, которые не дают комнатам
расползтись на всю ширину улицы.
Каркас лендинга — схема
Прежде чем писать теги, полезно набросать «вайрфрейм» — каркас из прямоугольников. Вот типовая структура одностраничного лендинга:
Как это работает: семантический каркас
Каждый крупный блок получает свой семантический тег. Браузеры, скринридеры и поисковики
понимают такую разметку как структуру документа, а не как безликую кашу из div.
<header class="site-header">
<a class="logo" href="#">CodeStart</a>
<nav aria-label="Главная навигация">...</nav>
</header>
<main>
<section class="hero">...</section>
<section class="features">...</section>
<section class="cta">...</section>
</main>
<footer class="site-footer">...</footer>Центрирование контента: контейнер
Без ограничения ширины текст на широком мониторе растягивается на всю строку и читать
его тяжело. Приём «контейнер» решает это: ограничиваем максимальную ширину и центрируем
блок горизонтально через margin: auto (или современное margin-inline: auto).
/* min() = «не шире 1120px, но всегда с полями по 1rem на узких экранах» */
.container {
width: min(100% - 2rem, 1120px);
margin-inline: auto; /* margin-left/right: auto — центрирует блок */
}
.section {
padding-block: 4rem; /* одинаковый вертикальный ритм у всех секций */
}Когда применять
Этот подход — основа любой страницы: блог, портфолио, продуктовый лендинг, документация. Как только страница длиннее одного экрана и состоит из разнотемных блоков — раскладывайте её на семантические секции внутри общего контейнера.