Новый формат
Вёрстка сайтов: что это, этапы и критерии качества
Вёрстка превращает дизайн-макет в рабочую веб-страницу: HTML задаёт структуру, CSS — внешний вид, при необходимости JS — поведение.
Ниже — роль верстальщика в цепочке «текст → дизайн → код», современный процесс и чеклист приёмки. Табличная вёрстка как норма — уже история.
Что такое вёрстка
Упрощённо: дизайнер собирает макет, верстальщик собирает страницу, которую открывает браузер. Как в журнале: текст → вёрстка полос → печать; в вебе печать заменяет HTML-страница.
На практике нужны: работа с графикой из макета, HTML, CSS, базовый JS, понимание ограничений браузеров и мобильных экранов.
Что получает бизнес:
- страницы, совпадающие с утверждённым дизайном;
- адаптив под телефон и десктоп;
- код, который можно сопровождать;
- базу для CMS и SEO-структуры.
Этапы работы
Старт — изучение макета: сетка, шрифты, состояния кнопок, мобильные экраны. Затем нарезка графики, базовая разметка, стили, поведение, тесты.
Типовой порядок:
- разобрать макет и гайдлайн;
- вынести изображения и иконки;
- собрать HTML-структуру (семантика);
- навесить CSS от общего к частному;
- добавить необходимый JS;
- проверить в браузерах и на устройствах.
HTML и CSS сегодня
HTML описывает смысл блоков: заголовки, списки, навигация, формы. CSS — внешний вид и раскладку. Flexbox и Grid закрывают сетки без таблиц-костылей.
Стили держите отдельно от разметки. Повторяющиеся значения удобно сводить к переменным и общей дизайн-системе.
Хорошие привычки:
- один H1 на страницу по смыслу;
- списки через ul/ol, не «абзацы с буллетами-картинками»;
- осмысленные alt у изображений;
- кнопки и ссылки различимы;
- не дублировать огромные инлайн-стили.
Критерии качества
Красиво в одном браузере — мало. Нужна стабильность и сопровождаемость.
Приёмка:
- совпадение с макетом в допуске;
- корректный вид в актуальных браузерах;
- мобильная версия без горизонтального скролла «в никуда»;
- нет критичных ошибок в консоли;
- текст индексируемый, не картинкой;
- картинки с размерами/оптимизацией;
- понятная структура кода для следующего разработчика.
Быстрый фильтр качества вёрстки
| Область | Ок | Риск |
|---|---|---|
| Семантика | H1–H3 по смыслу | Всё через div без заголовков |
| Адаптив | Ключевые брейкпоинты | Только десктоп |
| Скорость | Сжатые ассеты | Многомегабайтные PNG |
| Доступность | Фокус, контраст, alt | Клики только мышью |
Инструменты
Редактор кода, браузерные DevTools, графический редактор или Figma для макетов, валидаторы и сервисы кроссбраузерной проверки — по задаче. Конкретные названия программ меняются; важен навык, не культ IDE 2015 года.
Минимум на старте:
- удобный редактор с подсветкой;
- Chrome/Firefox DevTools;
- проверка на реальном телефоне;
- контроль веса картинок.
Связь с SEO и поддержкой
Плохая вёрстка тормозит индексацию и бесит пользователей даже при сильном тексте. Хорошая — ускоряет внедрение правок и снижает стоимость владения сайтом.
Верстальщику полезно понимать:
- куда ведут ключевые CTA;
- как устроена структура URL и шаблонов;
- что нельзя ломать в шапке/подвале для аналитики.
Частые вопросы
Чем вёрстка отличается от дизайна?
Дизайн — как должно выглядеть и ощущаться. Вёрстка — как это стабильно открывается в браузерах, на телефонах и для роботов.
Нужен ли JavaScript всегда?
Нет. Сначала семантика и CSS. JS — когда без него нельзя (сложное поведение), и так, чтобы контент оставался доступен.
Табличная или блочная вёрстка?
Для макетов страниц сегодня — CSS (flex/grid) и семантические блоки. Таблицы — для табличных данных, не для всей сетки сайта.
Как вёрстка влияет на SEO?
Через заголовки, списки, доступность текста, скорость, мобильность и отсутствие критичных ошибок в разметке.
Что проверить перед сдачей?
Кроссбраузерность, адаптив, валидность/консоль, картинки и шрифты, кликабельность, базовую доступность.
Нужна вёрстка или доработка фронта?
Соберём адаптивные страницы по макету — с упором на скорость, семантику и сдачу без сюрпризов.
Обсудить задачу
