Сверстать это: что означает и как это делается?

Верстать — значит превращать макет в код страницы: размечать содержимое тегами HTML и задавать вид правилами CSS, чтобы браузер показал ровно то, что нарисовал дизайнер. Результат работы верстальщика — страница, которая держит любую ширину экрана, читается скринридером и не рассыпается при длинном заголовке.

Коротко по делу:

• разметка отвечает за смысл, стили — за вид; MDN формулирует это жёстко: «Presentation (how it should look), is the sole responsibility of CSS»;
• сетку страницы в 2026 году держат две технологии — Flexbox для рядов и CSS Grid для сеток, табличная вёрстка осталась в истории;
• адаптив собирают снизу вверх: базовые стили под узкий экран, затем медиазапросы и контейнерные запросы;
• готовую вёрстку принимают по числам: 0 ошибок валидатора, контраст текста от 4,5:1, кликабельная область от 24×24 CSS-пикселей;
• весь код ниже прогнан через W3C Nu Html Checker и отрисован в headless Chromium — числа в статье из этого прогона.

Что значит «верстать»: веб-страница и полоса в типографике

У глагола два живых значения, и путать их дорого. В вебе верстать — собирать страницу из HTML-разметки и CSS-стилей. В полиграфии значение старше: Викисловарь с пометой «полигр.» определяет его как «формировать полосы издания из текстовых фрагментов и иллюстраций». Оттуда же слово «полоса» и профессия верстальщика газет, которая существовала задолго до браузеров.

Возраст значения видно по цитатам, которыми словарь его подпирает. У Булгакова в «Роковых яйцах» 1924 года: «В ночной редакции газеты „Известия“ ярко горели шары, и толстый выпускающий редактор на свинцовом столе верстал вторую полосу с телеграммами „По Союзу Республик“». У Ильфа и Петрова в «Двенадцати стульях» 1927 года репортёр бракует чужую работу: «― Я бы все-таки так не верстал, ― сказал Персицкий, ― наш читатель не подготовлен к американской вёрстке…». Свинцовый стол исчез, глагол остался.

Два ремесла разошлись окончательно. Полосу журнала собирают в InDesign, страницу сайта — в редакторе кода; общими остались только сетка, типографика и глаз на детали. Речь дальше про веб.

Разметка и стили делят зоны ответственности. HTML описывает, чем является кусок содержимого: заголовок, список, навигация, таблица данных. По формулировке спецификации WHATWG, «HTML is the World Wide Web’s core markup language». CSS описывает, как это выглядит: размеры, отступы, цвета, положение блоков. Смешивать роли — типовая ошибка новичка: <span style="font-size: 32px"> выглядит как заголовок, но для поисковика и скринридера остаётся обычным текстом.

ОБЗОРНЫЙ ПРАКТИКУМ ПО НАШУМЕВШИМ НЕЙРОСЕТЯМ

Нейросети DEEPSEEK И QWEN За 2 часа сделаем полный обзор новых мощных ИИ-моделей, которые бросают вызов нейросети ChatGPT

ТОП-подарки всем участникам лекции:

• Возможность получить Доступ в Нейроклуб на целый месяц
• Как ИИ ускоряет работу и приносит деньги
• За 2 часа вы получите четкий план, как начать работать с ИИ прямо сейчас!

Участвовать бесплатно

Что верстальщик делает за рабочий день

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

Больше всего времени съедает четвёртая стадия. Макет рисуют на идеальном контенте: заголовок в одну строку, у всех карточек одинаковая высота, картинка ровно 96×96. В базе сайта заголовок займёт три строки, у одной карточки не будет картинки, а цена придёт с четырьмя знаками. Вёрстка, которая это переживает, отличается от вёрстки, которая совпала с макетом на одном скриншоте.

Отсюда практическое правило: пока страница не проверена на реальных данных, работа не закончена, даже если пиксель в пиксель совпадает с макетом.

Чем сегодня верстают: рабочий набор инструментов

Списки инструментов и советы из старых руководств устарели целыми пунктами: визуальные конструкторы страниц и библиотека jQuery, которые там стоят на первых местах, к разбору макета отношения уже не имеют. Рабочий набор верстальщика короче и делится на четыре группы.

• Редактор кода. Visual Studio Code — фактический стандарт: подсветка, автодополнение, форматирование, расширения под HTML и CSS. Альтернативы — WebStorm и Sublime Text.
• Источник макета. Figma с режимом разработчика: оттуда берут размеры, цвета, переменные и экспортируют иконки в SVG.
• Инструменты браузера. DevTools в Chrome или Firefox — правка стилей вживую, инспектор Flexbox и Grid, эмуляция узких экранов, проверка контраста и дерева доступности.
• Обвязка проекта. Сборщик Vite, препроцессор Sass или утилитарный CSS вроде Tailwind, автоформатирование Prettier и линтер Stylelint.

Утилитарный подход стоит попробовать отдельно: он меняет саму манеру писать стили — классы задают вид прямо в разметке, отдельный CSS-файл почти не растёт. Разбор с примерами есть в материале про вёрстку с Tailwind CSS.

Инструмент решает меньше, чем кажется. Одна и та же страница собирается в голом «Блокноте» и в WebStorm с одинаковым результатом; редактор влияет только на скорость работы. Поэтому начинающему верстальщику разумнее взять VS Code, браузер и макет, а сборщики и препроцессоры добавлять тогда, когда ручная работа начнёт мешать.

Как верстать сетку: флексы и гриды на рабочем коде

Раскладку страницы держат две системы. Flexbox раскладывает элементы вдоль одной оси — ряд или колонка. MDN описывает его так: «The main axis is defined by the flex-direction property, and the cross axis runs perpendicular to it». Свойство flex-direction принимает четыре значения: row, row-reverse, column, column-reverse.

Шапка сайта — типовая задача под Flexbox: логотип слева, меню справа, всё выровнено по центру вертикали.

CSS Grid работает по двум осям сразу. Сетку включает одна строка: по документации MDN, «We create a grid container by declaring display: grid or display: inline-grid on an element», после чего все прямые потомки становятся ячейками сетки. Единица fr делит свободное место контейнера, а функция repeat() избавляет от перечисления одинаковых колонок.

Эти три строки заменяют весь набор медиазапросов под каталог: карточки сами перестраиваются под ширину. Мы отрисовали код в headless Chromium и сняли фактическую сетку. При ширине окна 360 px получилась одна колонка 344 px, при 768 px — две по 364 px, при 1280 px — тоже две, но уже по 620 px.

Один результат стоит запомнить: при 1280 px браузер вернул 620px 620px 0px 0px. Значение auto-fit создало четыре трека под доступную ширину, а два незанятых схлопнуло в ноль — поэтому две карточки растянулись на всю ширину. Замена auto-fit на auto-fill в том же окне даёт 298px 298px 298px 298px: пустые треки сохраняют ширину, карточки сжимаются до 298 px и прижимаются влево.

Как верстать адаптивно: медиазапросы и контейнерные запросы

Адаптив собирают снизу вверх. Сначала пишут стили под самый узкий экран, потом добавляют правила для широких — так базовый слой достаётся всем устройствам, а исключения перечисляются один раз. Медиазапросы в CSS давно принимают короткий синтаксис диапазонов: MDN приводит @media (min-width: 30em) and (max-width: 50em) и @media (30em <= width <= 50em) как эквивалентные записи.

Правило @container отличается от медиазапроса тем, на что смотрит. Медиазапрос меряет окно браузера, контейнерный запрос — ширину родителя. По формулировке MDN, «Container queries enable you to apply styles to an element based on certain attributes of its container». Компонент перестаёт зависеть от того, в какое место страницы его поставили.

Разницу видно в замере. В окне 768 px карточка получила ширину 364 px — медиазапрос сработал и развернул её в две колонки, но заголовок остался 18,72 px, потому что сама карточка уже порога 480 px. В окне 1280 px карточка выросла до 620 px, и тот же заголовок стал 24 px. Одно и то же правило дало разный результат при одинаковой вёрстке — решала ширина контейнера.

Обе величины отсчитываются от базового кегля браузера, который по умолчанию равен 16 px: отсюда 18,72 px у заголовка без правила и 24 px при font-size: 1.5rem. Стоит добавить в страницу html { font-size: 20px } или поднять кегль в настройках браузера — тот же прогон даёт 23,4 px и 30 px: пропорции сохраняются, абсолютные числа плывут. Поэтому кегли задают в rem, а пороги приёмки проверяют на настройках браузера пользователя.

Горизонтальной прокрутки не появилось ни на 360, ни на 768, ни на 1280 px: scrollWidth документа совпал с шириной окна во всех трёх прогонах. Это первое, что стоит проверять после сборки адаптива — вылезающий за экран блок ловится именно так.

Как проверяют готовую вёрстку: схема приёмки по числам

«Валидная вёрстка» — размытая формулировка, пока за ней нет порогов. Приёмка страницы измерима, и почти все пороги заданы официальными документами.

Пороги контраста и размера цели взяты из документов W3C по WCAG 2.2; значения LCP, INP и CLS — из описания Core Web Vitals у Google на web.dev.

Про валидатор есть отдельная поправка, о которой обучающие статьи умалчивают. Мы прогнали страницу из этой статьи через Nu Html Checker 17 августа 2026 года. Версия без контейнерных запросов дала 0 ошибок и 0 предупреждений. Та же страница с container-type: inline-size и правилом @container вернула две ошибки: «Property “container-type” doesn’t exist» и «Unrecognized at-rule “@container”».

Код при этом рабочий: браузер применил обе конструкции, замер это подтвердил. Отстаёт встроенный в чекер разбор CSS — сам сервис честно предупреждает, что это «an ongoing experiment in better HTML checking». Вывод для приёмки: ошибки валидатора по разметке чинят всегда, а претензии к новым свойствам CSS сверяют с поддержкой в браузерах, прежде чем что-то переписывать.

Чем верстальщик отличается от фронтендера

Граница между профессиями сдвинулась. В описаниях вакансий вёрстка всё чаще идёт как базовый навык внутри роли фронтенд-разработчика, отдельной строкой её выносят реже. Само ремесло осталось прежним, изменился объём зоны ответственности.

Практический смысл этой таблицы простой: вёрстка остаётся входной дверью в профессию. Через неё проходят почти все — от неё же зависит, насколько быстро дальше даётся JavaScript. Что спрашивают на первом собеседовании, разобрано в материале про вопросы junior-фронтендеру.

Если хочется сразу собрать полный маршрут от разметки до работающего сайта, посмотрите курс «Веб-разработчик на Зерокодере»: программа построена на практике с разбором учебных проектов.

С чего начать, если хотите научиться верстать

Порядок, который экономит месяцы блужданий по урокам.

1. Теги по смыслу. Два десятка элементов закрывают почти любую страницу: заголовки, абзацы, списки, ссылки, изображения, формы и структурные header, nav, main, footer.
2. Коробочная модель. Отступы, рамки, box-sizing. Пока не станет понятно, из чего складывается высота элемента, любая раскладка будет ломаться непредсказуемо.
3. Flexbox. Ряды, выравнивание, переносы. На нём собирается шапка, футер, панель кнопок, карточка.
4. CSS Grid. Каталоги, галереи, сложные сетки страницы.
5. Адаптив и доступность. Медиазапросы, контейнерные запросы, контраст, клавиатура, альтернативный текст у картинок.
6. Реальный макет. Взять чужой макет и собрать его целиком, с краевыми случаями и приёмкой по чек-листу выше.

Второй пункт этого списка стоит того, чтобы задержаться. Возьмём один класс и повесим его на разные элементы.

Объявление одно, высоты разные. Замер в Chromium 145:

Разница в том, к чему браузер прикладывает заявленный минимум. Кнопкам, выпадающим спискам и кнопочным полям его таблица стилей задаёт box-sizing: border-box, и отступы укладываются внутрь 44 px. Текстовым полям и textarea она этого не задаёт: там работает content-box, к минимуму прибавляются 12 px сверху и снизу, а сверх того рамка. Слово «форма» тут обобщать нельзя — textarea и input с типом text держатся правила content-box наравне со ссылкой.

Порог 24×24 CSS-пикселя из чек-листа приёмки проходят все варианты, но одно объявление дало 44 px у кнопки и 70 px у textarea — это и есть довод открыть DevTools и померить. У строчной ссылки, если убрать display: inline-flex, выходит четвёртый результат: 41 px при базовом кегле 16 px и 46 px при 20 px. К строчному боксу min-block-size не применяется, и высоту задаёт кегль.

Смена профессии через вёрстку — рабочий сценарий, и он ускорился: часть рутины закрывают нейросети. Как это выглядит на практике, разобрано в материале про карьерный поворот с помощью нейросетей. Материал обновлён в августе 2026 года.

Частые вопросы про то, как верстать

Что значит слово «верстать» простыми словами?

Верстать — значит превращать макет в код страницы: размечать содержимое тегами HTML и задавать вид правилами CSS, чтобы браузер показал то, что нарисовал дизайнер. У слова есть и второе значение, из полиграфии: формировать полосы издания из текстовых фрагментов и иллюстраций.

Вёрстка — это программирование?

HTML и CSS не языки программирования: в них нет переменных в привычном смысле, условий и циклов. HTML описывает структуру документа, CSS — правила отображения. Программирование в браузере начинается с JavaScript. При этом вёрстка входит в веб-разработку и требует инженерной аккуратности: без неё страница ломается на реальном контенте.

Сколько времени нужно, чтобы научиться верстать?

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

Чем таблицы отличаются от Grid при вёрстке?

Элемент table предназначен для табличных данных: расписания, прайса, сравнения. Раскладку страницы им сегодня не делают — для этого есть CSS Grid и Flexbox. Табличная вёрстка макета осталась приёмом эпохи браузеров без поддержки этих механизмов.

Как проверить, что вёрстка сделана правильно?

Прогнать разметку через W3C Nu Html Checker и починить ошибки, проверить контраст текста от 4,5:1 и размер кликабельной зоны от 24×24 CSS-пикселей по WCAG 2.2, пройти страницу клавишей Tab, замерить Core Web Vitals и посмотреть страницу на ширинах 360, 768 и 1280 пикселей на отсутствие горизонтальной прокрутки.