Что такое вёрстка сайта простыми словами

Когда компания заказывает сайт, в процессе участвуют минимум три специалиста: дизайнер, верстальщик и программист. Дизайнер рисует, как страница будет выглядеть. Программист отвечает за то, что происходит «под капотом»: базы данных, формы, личные кабинеты. А верстальщик стоит между ними — переводит картинку из макета в код, который понимает браузер.

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

Технически верстка это процесс разметки и оформления контента с помощью языка HTML и таблиц стилей CSS:

• HTML отвечает за структуру — где заголовок, где текст, где кнопка;
• CSS — за внешний вид: отступы, цвета, шрифты, расположение блоков.

Итоговый результат — файлы, которые браузер может прочитать и показать пользователю именно так, как задумал дизайнер. Если заказывать разработку сайта под ключ у подрядчика, вёрсткой обычно занимается отдельный специалист или целая команда внутри студии.

Верстку делают по-разному в зависимости от того, где на какой CMS будет работать сайт. Иногда это чистый HTML-код без привязки к какой-либо системе — так собирают простые лендинги. А иногда её сразу переносят в конструктор или CMS: например, в Tilda, WordPress или Bitrix. В этом случае верстальщик работает не только с HTML и CSS напрямую, а ещё и с блоками и настройками конкретной платформы — учитывает её ограничения и особенности отображения.

2.

3.

4.

1.

5.

6.

Вёрстку делят по двум признакам:

Первый — по технологии: раньше страницы собирали из HTML-таблиц, сейчас почти везде используют блочную вёрстку на основе тегов div, section и современных CSS-инструментов вроде flexbox и grid. Табличная вёрстка сайта считается устаревшей: она утяжеляет код и плохо поддаётся правкам. 

Второй признак — то, как страница ведёт себя при изменении размера экрана. Здесь и появляются термины «фиксированная», «резиновая» и «адаптивная» вёрстка — в них чаще всего путаются заказчики.

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

Резиновая вёрстка задаёт ширину блоков не в пикселях, а в процентах от размера окна. Страница «тянется» вместе с браузером, но при сильном сужении или расширении экрана элементы могут наезжать друг на друга — особенно изображения и таблицы.

Адаптивная вёрстка — стандарт для современных сайтов. Для неё готовят несколько вариантов расположения блоков под конкретные разрешения экрана: десктоп, планшет, смартфон. За переключение между ними отвечают CSS-медиазапросы. Именно адаптивная вёрстка позволяет сайту одинаково хорошо выглядеть и на мониторе компьютера, и на телефоне.

Верстка — это не только эстетика, но и техническая основа сайта: какой бы тип вёрстки ни выбрали, в её основе всегда лежит связка html css.

HTML (HyperText Markup Language) — язык разметки. С его помощью верстальщик описывает структуру документа: это заголовок, это абзац, это список, это изображение. Браузер читает эти теги и понимает, из каких частей состоит страница.

CSS (Cascading Style Sheets) отвечает за оформление: какого цвета фон, какой шрифт у текста, сколько отступов между блоками, как элементы расположены относительно друг друга. Без CSS страница выглядела бы как обычный текстовый документ — только заголовки и абзацы без дизайна.

На практике верстальщики почти никогда не пишут HTML и CSS полностью вручную с нуля. Используют препроцессоры (SASS, LESS), CSS-фреймворки (Bootstrap, Tailwind) и системы сборки, которые ускоряют работу и упрощают поддержку кода. Иногда в неё добавляют немного JavaScript — например, чтобы меню раскрывалось по клику или слайдер переключал картинки. Но сама логика сайта — обработка форм, работа с базой данных — это уже не вёрстка, а программирование, следующий этап разработки.

Даже готовый на вид сайт может скрывать проблемы, которые видны не сразу. Вот пять признаков, что здесь стоит разобраться подробнее.

Проверить эти признаки можно бесплатными инструментами:

• Google PageSpeed Insights показывает скорость загрузки страницы и даёт конкретные технические рекомендации по её ускорению — например, какие изображения стоит сжать или какой CSS-файл тормозит отрисовку. Оценка выводится по шкале от 0 до 100 отдельно для мобильной и десктопной версии, и результат ниже 50 обычно означает, что страницу стоит доработать.
• W3C Validator (validator.w3.org) проверяет HTML-код на соответствие стандартам и указывает конкретные строки с ошибками. Оба сервиса работают без регистрации — достаточно вставить ссылку на сайт и получить отчёт за несколько секунд.

Больше половины трафика большинства сайтов сегодня приходится на смартфоны, поэтому мобильную версию нужно проверять отдельно и внимательно. Быстрый способ — открыть инструменты разработчика в браузере (клавиша F12 или сочетание Ctrl+Shift+I) и включить режим эмуляции устройств: там видно, как страница выглядит на экранах разных размеров, от компактного смартфона до планшета.

Но эмуляция не заменяет проверку на реальных устройствах — на настоящем телефоне иначе ведут себя шрифты, скорость прокрутки и отклик кнопок на касание.

Поисковые системы давно оценивают сайты в первую очередь по мобильной версии — это называется mobile-first indexing. Если адаптивная верстка сделана плохо, Google и Яндекс видят это так же, как обычный посетитель: неудобные кнопки, обрезанный текст, «уезжающие» блоки. Такой сайт получает более низкие позиции в выдаче, даже если у него хороший контент.

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

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

Даже опытные верстальщики иногда допускают одни и те же промахи. Вот самые частые:

• Верстка «под один экран» — макет проверяли только на одном мониторе, а на других разрешениях страница разваливается.
• Игнорирование кроссбраузерности — сайт тестировали только в Chrome, а в Safari или старых версиях Firefox элементы отображаются иначе.
• Неоптимизированные изображения — картинки вставляют в оригинальном размере без сжатия, из-за чего страница весит десятки мегабайт и долго грузится.
• Инлайн-стили вместо CSS-файлов — стили прописывают прямо в HTML-тегах, что делает код нечитаемым и усложняет любые правки в будущем.
• Нарушенная иерархия заголовков — на странице несколько тегов h1 или заголовки идут не по порядку, что путает и пользователей, и поисковые системы.
• Отсутствие проверки на реальных устройствах — сайт сдают, протестировав только в эмуляторе браузера, а не на живых смартфонах и планшетах.

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

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