Что такое вёрстка сайта и как её проверять

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

Что входит в вёрстку сайта?

Верстальщик получает макет из Figma и собирает из него шаблоны страниц. В работу входят разметка HTML, стили CSS, подключение шрифтов и иконок, адаптация под экраны и базовые интерактивные элементы: меню, вкладки, слайдер, модальное окно. После этого шаблоны подключают к CMS — WordPress, MODX или фреймворку Next.js — чтобы редактор мог менять тексты без программиста.

Семантика важна для поиска и доступности. Один H1 на странице, логичные H2–H3, списки как списки, кнопки как кнопки. Поисковые системы и ИИ-ассистенты читают именно эту структуру. Скринридер тоже.

Как располагают элементы: Flexbox, Grid и поток документа

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

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

Что такое адаптивная вёрстка?

Адаптивная вёрстка подстраивает страницу под доступную ширину, размер текста и содержимое. Для этого служат медиазапросы, гибкие единицы (%, rem, clamp), изображения с атрибутами srcset и sizes. В 2026 году большинство посетителей коммерческих сайтов приходит со смартфонов, поэтому мобильную версию проверяют первой.

Отдельная тема — скорость. Тяжёлые картинки без размеров, шрифты без font-display и лишние скрипты ухудшают показатели Core Web Vitals. Их Google учитывает при ранжировании, об этом — в статье о скорости сайта и SEO.

Что проверить при приёмке вёрстки?

• Заголовки образуют понятную структуру, у страницы один H1, формы имеют подписи.
• Страница работает на узком и широком экране, текст выдерживает увеличение масштаба до 200%.
• Кнопки и ссылки доступны с клавиатуры, фокус виден, контраст текста достаточный.
• Длинные названия, пустые блоки и ошибки формы отображаются корректно.
• Изображения сохраняют пропорции, у каждого есть alt на языке страницы.
• В консоли браузера нет ошибок, а PageSpeed Insights не показывает сдвигов макета.

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

Типичные ошибки вёрстки

Что передать заказчику после вёрстки?

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

Сколько времени занимает вёрстка?

Срок зависит от числа уникальных шаблонов и готовности макета. По нашему опыту лендинг с вёрсткой и подключением формы мы запускаем до 3 рабочих дней, сайт-визитку или корпоративный сайт — до 10 рабочих дней после согласования ТЗ и получения материалов. Проекты с интеграциями оцениваем после ТЗ. Подробнее об этапах — на странице создания сайтов.

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

Чем вёрстка отличается от программирования?

Вёрстка отвечает за внешний вид и структуру страницы: HTML и CSS. Программирование добавляет логику: личный кабинет, корзину, обмен данными с CRM или оплатой. На практике один проект обычно требует и того, и другого.

Что значит «кроссбраузерная вёрстка»?

Страница одинаково работает в актуальных версиях Chrome, Safari, Firefox и Edge, на Android и iOS. Список браузеров и версий стоит зафиксировать в ТЗ, чтобы приёмка шла по понятным правилам.

Нужна ли вёрстка, если сайт делают на WordPress?

Да. Готовая тема тоже состоит из вёрстки, и её приходится дорабатывать под ваш контент. Уникальный дизайн верстают с нуля и подключают к WordPress или MODX как собственную тему.

Как самому проверить качество вёрстки?

Откройте сайт на телефоне и компьютере, увеличьте масштаб до 200%, пройдите форму клавишей Tab. Запустите PageSpeed Insights и посмотрите вкладку доступности. Этого хватает, чтобы заметить основные проблемы.

Влияет ли вёрстка на SEO?

Влияет через структуру заголовков, скорость загрузки, мобильную версию и доступность текста для индексации. Аккуратная семантическая вёрстка облегчает работу поисковым системам и ИИ-поиску.

Читайте и смотрите по теме

• Создание сайтов
• Разработка посадочных страниц
• Редизайн сайта
• Выбор CMS для корпоративного сайта

Источники

• MDN: CSS layout
• MDN: responsive web design
• W3C: WCAG 2.2