Виды и подходы к вёрстке
Вёрстка — это перевод готового дизайн-макета в рабочий код: HTML описывает структуру страницы, CSS — её внешний вид, JavaScript добавляет интерактивность. По-английски это называют frontend-разработкой, и в цепочке создания сайта вёрстка стоит между дизайном и программированием: дизайнер рисует, как должно выглядеть, верстальщик делает так, чтобы это заработало в браузере, а программист отвечает уже за серверную логику и базы данных.
Современный стандарт — блочная вёрстка на div-контейнерах с Flexbox и CSS Grid: она гибкая и хорошо ложится на разные размеры экрана. Табличная вёрстка через теги table и tr считается устаревшей и сегодня применяется разве что в email-рассылках — там её ограничения не мешают, а поддержка старых почтовых клиентов важнее.
Есть и разные подходы к адаптивности: фиксированная вёрстка с жёсткой шириной в пикселях, резиновая — на относительных единицах, адаптивная — с отдельными макетами под разные экраны, и отзывчивая (responsive) — один гибкий макет, который подстраивается сам. Именно responsive стал индустриальным стандартом, особенно с учётом mobile-first подхода к проектированию сайтов.
Как вёрстка влияет на SEO
Валидность кода — не формальность: несовпадающие классы в HTML и CSS, лишние div-обёртки, конфликты единиц измерения (px против rem) в итоге бьют по показателю визуальной стабильности CLS — одной из метрик Core Web Vitals, которые Google учитывает при ранжировании.
