Верстка сайта — что это такое, виды и как верстать правильно

Термин «верстка» пришёл в digital из издательского дела. В типографии верстка — это монтаж макета газеты или книги из готового материала: текста, таблиц, изображений, который затем отправляется в печать. В веб-разработке задача та же: взять подготовленный дизайн-макет и превратить его в настоящий сайт, который корректно открывается в браузере.

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

Верстка — это создание структуры гипертекстового документа и разработка графического пользовательского интерфейса сайта при помощи HTML, стилей CSS и скриптов. Главная задача верстальщика — точно и без ошибок перенести прототип в реальный код. Проще говоря, верстка — это перевод предварительного макета сайта в HTML.

Англоязычный эквивалент — Frontend web development, фронтенд веб-разработка.

Фронтенд — это то, что видит обычный пользователь: текст, изображения, кнопки, меню, весь графический интерфейс.
Бэкенд — внутренняя, невидимая часть сайта: базы данных, серверная логика, обработка запросов.

Верстальщик работает именно на стороне фронтенда. Удобство просмотра при этом должно обеспечиваться с любого устройства и из любого браузера — это базовое требование к современной верстке.

Пример верстки: шапка сайта

Чтобы понять, как выглядит верстка на практике, рассмотрим простой пример — хедер сайта с четырьмя разделами навигации.

Сначала формируется HTML-структура. Все блоки расставляются по иерархии: обёртка, логотип, навигация:

<header>
  <div class="wrap">
    <div class="header">
      <div class="company-logo">
        <a href=""><img src="logo.png" alt=""/></a>
      </div>
      <div class="nav">
        <ul>
          <li><a href="#">Главная страница</a></li>
          <li><a href="#">Наши проекты</a></li>
          <li><a href="#">О компании</a></li>
          <li><a href="#">Связаться с нами</a></li>
        </ul>
      </div>
    </div>
  </div>
</header>

Затем в CSS задаются стили: отступы, шрифты, цвета, размеры. Именно стили определяют, как структура будет выглядеть визуально. Одна и та же HTML-разметка с разными CSS выглядит совершенно по-разному — это принципиальное разделение структуры и оформления, лежащее в основе современной веб-разработки.

Этапы верстки сайта

Стандартный процесс работы верстальщика включает несколько последовательных шагов.

Перенос структуры макета в HTML-документ. Верстальщик изучает дизайн, выявляет блоки, определяет иерархию элементов и создаёт скелет страницы в виде HTML-тегов.
Работа со стилями. Задаются глобальные настройки CSS: шрифты, цвета, отступы, сетка. CSS-файл подключается к HTML-документу и управляет внешним видом всех элементов.
Настройка интерактивных компонентов. Выпадающие меню, слайдеры, модальные окна, формы — всё это требует JavaScript или jQuery. Этот шаг добавляет сайту динамическое поведение.
Перенос шаблона в систему управления контентом. Готовая статическая верстка интегрируется в CMS: WordPress, Битрикс, MODX или другую. На этом этапе шаблон становится рабочим сайтом с динамическим контентом.
Тестирование. Верстальщик проверяет корректность отображения во всех актуальных браузерах, на разных устройствах и размерах экрана. Именно здесь обнаруживаются «съезды» блоков на мобильных, некорректные отступы и другие визуальные баги.

В идеале готовый сайт должен быть неотличим от дизайн-макета. На практике это удаётся не всегда — из-за ограничений CMS, технических особенностей браузеров или недостаточного опыта разработчика.

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

Сегодня наиболее распространены два подхода: блочная и табличная верстка. Первый — современный стандарт, второй — наследие прошлого, которое почти вышло из употребления.

Блочная верстка

Блочная верстка — основной метод создания сайтов сегодня. Контейнеры и элементы страницы создаются с помощью тега <div>, внутри которого располагаются другие теги согласно иерархии. Каждый блок — независимый элемент, который можно свободно перемещать, изменять и стилизовать без влияния на остальные.

Главное преимущество блочного подхода — отличная сочетаемость с CSS «из коробки». Можно быстро изменить расположение объектов, задать отступы, переключить цветовое решение любого элемента. Блочные элементы предпочтительнее с точки зрения скорости загрузки и отзывчивости. Именно блочная верстка лежит в основе адаптивного дизайна — когда сайт корректно отображается и на десктопе, и на смартфоне.

Табличная верстка

Табличная верстка — устаревший подход, который активно использовался в интернете в 1990-х и 2000-х годах. Страница делится на множество ячеек с помощью тегов <table>, <tr> и <td> — строки и столбцы, как в электронной таблице. Расположить элемент можно только создавая пустые ячейки-заглушки, что делает код громоздким и трудно поддерживаемым.

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

Div-верстка

Div-верстка — это, по сути, синоним блочной верстки: разметка строится на тегах <div> как основных контейнерах. Термин используется, чтобы подчеркнуть отличие от табличного подхода. В современной практике к <div> добавились семантические теги HTML5: <header>, <footer>, <section>, <article> — они несут смысловую нагрузку и улучшают доступность и SEO.

Что такое валидность верстки

Валидная верстка — это верстка, которая не содержит формальных ошибок с точки зрения стандартов W3C. Консорциум World Wide Web (W3C) — международная организация, которая разрабатывает стандарты интернета. Она устанавливает правила написания HTML и CSS, которым должны следовать все сайты.

Примеры невалидной верстки: отсутствие обязательных глобальных тегов <html>, <head>, <body>; отсутствие DOCTYPE в начале документа; незакрытые теги; использование устаревших атрибутов. Это простые, но показательные сценарии — реальные ошибки бывают сложнее.

Для проверки используется W3C Markup Validation Service — бесплатный инструмент, который анализирует код страницы и выводит список предупреждений и ошибок. Не все из них критические: часть можно проигнорировать без ущерба для работы сайта. Важно расставить приоритеты и исправлять в первую очередь ошибки, влияющие на отображение и доступность.

Google рассматривает корректную валидацию верстки как один из сигналов качества сайта в разрезе Core Web Vitals. Валидный код быстрее парсится браузером, меньше вероятность неожиданного визуального поведения в разных окружениях.

Инструменты для верстки сайта

Теоретически сверстать сайт можно в обычном блокноте — HTML это просто текст. Но профессиональные редакторы кода делают работу значительно удобнее: подсвечивают синтаксис, автодополняют теги, находят ошибки на лету.

Редакторы кода

Visual Studio Code — сегодня самый популярный редактор среди фронтенд-разработчиков. Бесплатный, с огромной экосистемой расширений, поддерживает все основные языки и фреймворки.
Sublime Text — быстрый и лёгкий редактор с удобным интерфейсом, доступен для Windows, Mac и Linux.
Notepad++ — простой редактор для Windows, популярный среди начинающих благодаря лёгкости освоения.
NetBeans — полноценная среда разработки с открытым кодом, подходит для более сложных проектов. Adobe
DreamWeaver — редактор с визуальным режимом, позволяет видеть результат верстки в реальном времени, хотя генерируемый им код нередко избыточен.

Браузерные инструменты разработчика

DevTools — встроенный отладчик в Chrome, Firefox, Edge — вызывается нажатием F12. Это незаменимый инструмент в работе любого верстальщика. DevTools позволяет просматривать HTML-структуру страницы, изменять CSS «на лету» и сразу видеть результат, находить элементы с проблемами отображения, эмулировать разные размеры экранов для проверки адаптивности. Ни один разработчик не ищет ошибки в коде вручную без DevTools — это было бы как искать иголку в стоге сена с завязанными глазами.

Валидаторы

W3C Markup Validation Service проверяет HTML на соответствие стандартам.
CSS Validator — аналогичный инструмент для стилей.
CrossBrowserTesting и BrowserStack позволяют проверить, как сайт выглядит в разных браузерах и на разных устройствах без необходимости устанавливать их все физически.

Графические редакторы

Figma стала стандартом для дизайна интерфейсов — большинство макетов, которые верстальщик получает от дизайнера, сегодня сделаны именно в ней. Figma позволяет легко получить значения отступов, цветов и размеров прямо из макета. Adobe Photoshop и Illustrator используются реже, но по-прежнему встречаются в работе.

Как проверить верстку на ошибки

DevTools браузера. Нажмите F12 на любой странице, перейдите на вкладку Elements и изучите HTML-структуру. На вкладке Console отображаются JavaScript-ошибки. Вкладка Network показывает, все ли ресурсы загружаются корректно. DevTools позволяет отключить CSS и посмотреть, как рендерится «голая» страница — это быстро выявляет структурные проблемы
Кроссбраузерное тестирование. То, что выглядит идеально в Chrome, может «ехать» в Safari или Firefox. Проверка в нескольких браузерах обязательна перед запуском сайта. Особое внимание стоит уделить мобильным браузерам — они обрабатывают некоторые CSS-свойства иначе, чем десктопные.
Валидаторы W3C. Они находят формальные ошибки кода, которые не всегда заметны визуально, но могут влиять на поведение страницы в разных окружениях.

Самые частые ошибки верстки

Когда сложные этапы разработки пройдены и осталось перенести макет в код — именно здесь часто возникают неприятные сюрпризы. Макет был красивым, а сайт получился другим.

Пиксельперфект-несоответствие — когда размеры, отступы и шрифты в коде отличаются от макета. Причина обычно в том, что верстальщик работает «на глаз», а не сверяется с точными значениями из дизайн-файла.
Отсутствие адаптивности — блоки «съезжают» или перекрываются на мобильных устройствах. Современная верстка должна изначально проектироваться с учётом разных размеров экранов, а не адаптироваться под мобильные постфактум.
Жёстко заданные размеры в пикселях вместо относительных единиц. Если высота блока задана в пикселях, при увеличении текста или добавлении контента он выйдет за пределы блока. Использование em, rem, %, vh/vw решает эту проблему.
Некорректная работа в Safari. Этот браузер исторически поддерживает некоторые CSS-свойства иначе или с задержкой. Flexbox и Grid в Safari имеют свои нюансы, которые нужно учитывать.
Отсутствие alt-атрибутов у изображений и других семантических атрибутов доступности. Это одновременно проблема с SEO и с доступностью для людей с ограниченными возможностями, использующих скринридеры.
Большой вес страницы из-за неоптимизированных изображений и лишнего CSS. Верстальщик, который думает о производительности, не включает в проект все картинки в оригинальном разрешении и не подключает целиком библиотеку ради одной иконки.