Вёрстка

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

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

Что такое вёрстка и зачем она нужна

Вёрстка — это мостик между дизайном и живым сайтом. От её качества напрямую зависит скорость загрузки, корректность отображения и даже SEO: поисковик читает именно HTML-код, а не картинку макета. Неаккуратная вёрстка с «тяжёлым» кодом замедляет страницу, а это бьёт по Core Web Vitals и позициям.

Отдельно важна адаптивная вёрстка — когда одна страница корректно выглядит и на смартфоне, и на десктопе. С 2019 года Google индексирует сайты по принципу mobile-first, поэтому без адаптива современный сайт просто неконкурентоспособен.

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

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

Какие бывают виды вёрстки

• Фиксированная — жёсткая ширина в пикселях (устаревшая).
• Резиновая — ширины в процентах, «тянется» под экран.
• Адаптивная — раскладка перестраивается под диапазоны ширины.
• Отзывчивая (responsive) — плавно «течёт» под любой размер экрана.

Пример

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

Часто путают с…

• Веб-дизайн — это создание макета и визуала; вёрстка — его перенос в код.
• Программирование (бэкенд) — это серверная логика и базы данных; вёрстка — это фронтенд-«обёртка».
• Дизайн-макет — это исходная «картинка», а не готовый код.

Вопросы и ответы

Чем вёрстка отличается от дизайна?

Дизайн — это создание макета страницы (как она должна выглядеть). Вёрстка — превращение этого макета в рабочий HTML/CSS-код, который открывается в браузере.

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

Это вёрстка, при которой одна страница корректно отображается на любом экране — от смартфона до большого монитора — без отдельных версий сайта.

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

Да. Чистый, лёгкий код ускоряет загрузку и улучшает Core Web Vitals, а корректная семантика HTML помогает Google лучше понимать содержание страницы.

Есть макет в Figma, нужен готовый код? Сделаем HTML-вёрстку из Figma и адаптивную вёрстку.

Похожие термины: Адаптивный дизайн, HTML, PageSpeed, Веб-страница.