Верстка сайта

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

Что такое верстка сайта

Верстка сайта — перевод визуального макета в браузерный код. Дизайнер создает прототип в Figma, Sketch или Adobe XD, а верстальщик воплощает его в HTML и CSS. HTML задает структуру и семантику страницы: какой элемент считается заголовком, где находится навигация, что относится к основному контенту. CSS отвечает за внешний вид: цвет фона, шрифты, отступы, тени, анимации и переходы между состояниями. JavaScript добавляет интерактивность — выпадающие меню, слайдеры, всплывающие окна, валидацию форм. Итогом верстки служит набор файлов, которые браузер читает, интерпретирует и отображает пользователю как готовую страницу. Хорошая верстка незаметна для посетителя: страница быстро загружается, корректно выглядит на любом устройстве и не ломается при масштабировании текста.

Слово «верстка» пришло из полиграфии, где обозначало размещение текстов и иллюстраций на газетной или журнальной полосе. В веб-разработке термин укоренился с появлением HTML в начале 1990-х годов. Первые сайты верстали с помощью таблиц — единственного доступного способа создать многоколонную раскладку, хотя HTML-таблицы создавались для представления табличных данных. С выходом CSS в 1996 году подход сменился: стили отделились от структуры, и разработчики получили возможность управлять видом страницы без изменения HTML. В 2009 году в CSS появился Flexbox, в 2017-м — CSS Grid. Эти технологии создавались специально для управления раскладкой, и сегодня они составляют основу профессиональной верстки. За тридцать лет профессия верстальщика усложнилась настолько, что разделилась на специализации: HTML/CSS-верстальщик, фронтенд-разработчик, разработчик на React или Vue.

Качество верстки напрямую определяет маркетинговые результаты сайта. Скорость загрузки страниц — один из факторов ранжирования Google и Яндекса, и она во многом зависит от объема и качества кода. По данным Google, увеличение времени загрузки с 1 до 3 секунд повышает вероятность отказа на 32%, а с 1 до 5 секунд — на 90%. Семантическая верстка с правильными тегами h1-h6, article, section, nav помогает поисковым роботам разобрать структуру страницы — это влияет на то, какие фрагменты попадут в расширенные сниппеты. Google перевел индексацию на mobile-first в 2019 году, и с тех пор мобильная версия сайта — главная для ранжирования. Core Web Vitals (LCP, INP, CLS) — метрики, частично отражающие качество верстки, — официально влияют на позиции с 2021 года. Игнорировать верстку значит добровольно проигрывать конкурентам на каждом из перечисленных фронтов.

Маркетолог и владелец бизнеса без базового понимания верстки систематически теряют деньги. Типичная ситуация: дизайнер подготовил красивый макет с 12 разными шрифтами, видеофоном и параллакс-анимациями, маркетолог одобрил, а после сдачи оказалось, что страница весит 9 МБ и грузится 8 секунд — конверсия упала в три раза. Знание верстки не требует умения писать код, но дает инструмент для конкретных технических заданий: «добавить lazy load для изображений ниже сгиба», «убрать render-blocking скрипты из head», «прописать alt-тексты всем картинкам». Бизнес, который контролирует качество верстки, сокращает расходы на SEO: технически чистый сайт занимает более высокие позиции без дополнительных ссылок и контента. В контекстной рекламе качество целевых страниц влияет на Quality Score в Google Ads и показатель качества в Яндекс Директе, что снижает стоимость клика. Понимание верстки окупается буквально на каждом канале привлечения.

Как работает верстка сайта

1. Разбор макета и планирование структуры. Верстальщик изучает дизайн-макет в Figma или Sketch: выделяет повторяющиеся компоненты (кнопки, карточки, секции), определяет систему отступов и сетку. На этом этапе важно заметить все нестандартные элементы — шрифты, иконки, фоновые изображения — и убедиться, что они доступны в нужном формате. Опытный верстальщик сначала составляет компонентную карту: какие блоки переиспользуются на разных страницах, что войдет в общий header и footer. Этот шаг экономит 30-40% времени разработки, потому что не приходится переписывать стили для похожих элементов в конце работы.
2. Написание семантической HTML-разметки. Верстальщик создает структуру страницы с помощью семантических тегов: header, nav, main, article, section, aside, footer. Семантика важна не для красоты кода, а для поисковых роботов и вспомогательных технологий — скринридеров для слабовидящих пользователей. Неправильная семантика (например, div вместо h1 для главного заголовка) снижает SEO-потенциал страницы: робот не понимает иерархию контента. Google и Яндекс ищут в разметке сигналы о структуре страницы и учитывают их при формировании сниппета в выдаче.
3. Подключение шрифтов и написание базовых CSS-стилей. На этом этапе определяются переменные дизайн-системы: цвета, типографика, базовые отступы. Современный подход — хранить их в CSS custom properties: —color-accent, —font-size-h1 и так далее. Шрифты подключаются через Google Fonts или локально — второй вариант предпочтительнее для скорости загрузки, потому что браузер не делает дополнительный DNS-запрос к стороннему серверу. Переменные позволяют за минуту сменить цветовую схему всего сайта одной правкой в корне, а не искать конкретное значение по 50 файлам.
4. Реализация адаптивной верстки. Верстальщик задает медиа-запросы, которые изменяют раскладку при переходе через контрольные точки: 320px (маленькие смартфоны), 768px (планшеты), 1024px и 1280px (десктоп). Подход mobile-first — начинать стили с мобильной версии и добавлять стили для больших экранов через @media (min-width) — считается более надежным, так как браузер тратит меньше ресурсов на парсинг CSS. Каждый блок проверяется на всех breakpoints: типичные ошибки — текст, вылезающий за контейнер, таблицы шире экрана, изображения без max-width: 100%.
5. Подключение JavaScript для интерактивных элементов. JavaScript отвечает за поведение: открытие и закрытие мобильного меню, аккордеоны, табы, слайдеры, отправку форм без перезагрузки страницы, ленивую загрузку изображений. Скрипты рекомендуется подключать в конце body или с атрибутом defer, чтобы они не блокировали отображение страницы. Ленивая загрузка картинок (lazy loading) — важный элемент верстки для быстрых сайтов: браузер загружает изображения только когда они попадают в область видимости, что существенно ускоряет начальную загрузку страницы.
6. Кроссбраузерное тестирование и финальная проверка. Готовую верстку проверяют в Chrome, Firefox, Safari и Edge — и на Windows, и на macOS, и на iOS/Android. Особое внимание уделяется Safari на iPhone: этот браузер нередко интерпретирует CSS иначе, чем остальные. Производительность проверяется через Google PageSpeed Insights: показатели Core Web Vitals должны быть в зеленой зоне. Финальный шаг — валидация HTML через validator.w3.org: ошибки разметки могут вызвать непредсказуемое поведение в разных браузерах.

Виды верстки сайта

• Фиксированная верстка. Страница имеет фиксированную ширину в пикселях — например, 960px или 1200px. На широких мониторах по бокам остаются белые поля, на узких экранах появляется горизонтальная прокрутка. Этот подход использовался повсеместно до 2010-х годов, сегодня считается устаревшим. Встречается на старых корпоративных сайтах и интранет-порталах, которые ни разу не переделывали с момента запуска.
• Резиновая (жидкая) верстка. Элементы задаются в процентах от ширины контейнера, поэтому страница растягивается и сжимается вместе с окном браузера. Проблема в том, что на очень широких мониторах (2560px и больше) строки текста становятся слишком длинными и читать неудобно. На узких экранах блоки могут сжиматься до нечитаемого состояния. Подход полезен внутри компонентов, но редко применяется ко всей странице целиком.
• Адаптивная верстка. Разработчик создает несколько фиксированных версий сайта для разных разрешений (например, для 320px, 768px и 1200px), и CSS переключается между ними через медиа-запросы. Между контрольными точками макет не меняется — страница «прыгает» от одного состояния к другому. Такой подход удобен, когда дизайнер предоставил несколько отдельных макетов для разных устройств и нет необходимости в плавном поведении между ними.
• Отзывчивая (responsive) верстка. Самый распространенный современный подход: блоки используют относительные единицы (%, vw, em, rem), и страница плавно меняет раскладку при любом размере экрана. Медиа-запросы добавляют дополнительные изменения в критических точках, но страница корректно выглядит и между ними. Bootstrap, Tailwind CSS и другие популярные фреймворки построены именно на этом принципе — их grid-система автоматически адаптирует колонки под ширину экрана.
• Семантическая верстка. Подход, при котором HTML-теги выбираются по смыслу, а не по внешнему виду. Заголовок всегда h1-h6, список — ul или ol, кнопка — button, а не span с обработчиком клика. Это улучшает доступность для скринридеров, помогает поисковым роботам и упрощает поддержку кода. Яндекс рекомендует использовать семантические теги в официальной документации для вебмастеров — это один из базовых сигналов качества страницы.
• Верстка на CSS-фреймворках. Верстальщик использует готовую систему стилей — Bootstrap, Tailwind CSS, Bulma — вместо написания всего с нуля. Скорость разработки существенно возрастает: типичный лендинг можно сверстать за 1-2 дня вместо 3-5. Плата за скорость — дополнительный вес страницы (Bootstrap подключает около 30 КБ минифицированного CSS) и стандартизированный внешний вид, который требует усилий для кастомизации. Оптимальный выбор для прототипов, MVP и проектов с ограниченным бюджетом на разработку.

Сравнение: ручная верстка против конструктора сайта

Пример использования

Интернет-магазин автозапчастей с трафиком 22 000 визитов в месяц работал на устаревшей теме WordPress, сверстанной в 2014 году под ширину 1024px. Мобильная версия не предусматривалась вообще — страница просто уменьшалась, текст становился нечитаемым. По данным Google Analytics, 58% трафика приходило с мобильных устройств, но показатель отказов на смартфонах составлял 81%, а конверсия в заказ — 0,4% против 2,3% на десктопе. PageSpeed Insights на мобильных показывал 18 баллов из 100 из-за неоптимизированных изображений и блокирующих скриптов.

Магазин заказал адаптивную переверстку: mobile-first подход, lazy loading изображений, перевод шрифтов на локальный хостинг, оптимизация критического CSS. Работы заняли 3 недели. Через 30 дней после запуска мобильный показатель отказов снизился с 81% до 44%, конверсия с мобильных устройств выросла с 0,4% до 1,7%, PageSpeed на мобильных — с 18 до 71 балла. За первый месяц дополнительная выручка с мобильных покупателей составила 340 000 рублей. Инвестиции в переверстку окупились за первые две недели работы нового сайта.

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