HTML-вёрстка: что это такое и как сверстать страницу с нуля

HTML-вёрстка: что это такое и как сверстать страницу с нуля

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

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

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

Структура HTML-документа: из чего состоит код страницы

Любой HTML-документ начинается со строки <!DOCTYPE html> — она сообщает браузеру, что перед ним документ по стандарту HTML5, описанному WHATWG в HTML Living Standard. Дальше идёт тег html, внутри которого расположены два обязательных блока: head и body. Такая структура head body одинакова для всех страниц независимо от их назначения.

В head хранится служебная информация: meta charset="utf-8" задаёт кодировку текста, title — заголовок вкладки браузера, здесь же подключаются стили css через тег link. Весь контент, который видит пользователь — текст, изображения, ссылки, списки — находится в body, а не в служебной части документа.

Теги делятся на парные, у которых есть открывающая и закрывающая часть, и одиночные, вроде img или br, которые ничего не оборачивают. Вложенность одних тегов в другие задаёт структуру блока: например, элемент li вкладывается в ul, а изображение добавляется с помощью тега img с атрибутами src и alt. Атрибуты class и id позволяют находить нужный элемент из CSS или JavaScript, а href задаёт адрес ссылки для перехода.

Каждый элемент страницы занимает своё место в дереве документа: блок section может содержать несколько div, а внутри div — заголовок, текст и список. Такая вложенность элементов называется структурой DOM, и браузер строит её при загрузке кода, прежде чем применить стили и показать готовую веб-страницу пользователю.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Моя первая страница</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Заголовок страницы</h1>
  <p>Текст абзаца.</p>
</body>
</html>

ТЗшник разобрал 16 страниц выдачи Яндекса и Google по запросу «html верстка», выявил у конкурентов 7 разделов и медианный объём в 1326 слов, а затем сам собрал техническое задание и написал текст про структуру документа, виды вёрстки и порядок работы с нуля — уже в 1191 слово с релевантностью 91 пункт. Человеку остаётся подставить свои примеры кода и ссылки на инструменты, проверить точность формулировок и опубликовать готовую страницу.

HTML и CSS: в чём разница и как они работают вместе

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

Подключить стили css можно тремя способами: внутри атрибута style у конкретного тега, в блоке style внутри head или через отдельный файл style.css, подключённый тегом link. Внешний файл предпочтительнее: одно правило css меняет вид сразу на всех страницах сайта, а код в head остаётся коротким. JavaScript в этой связке добавляет интерактивность — реакцию на клики и изменение данных без перезагрузки страницы.

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

Виды вёрстки: табличная, блочная и адаптивная

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

Блочная вёрстка строится на div и семантических тегах — header, section, footer. Блоки могут располагаться в строку или колонку с помощью Flexbox, а сложные сетки с несколькими рядами и колонками удобнее собирать на Grid. Такой вёрстки достаточно для большинства сайтов: каталогов, лендингов, блогов, визиток небольших компаний.

Адаптивная вёрстка добавляет к блочной медиазапросы и относительные единицы — проценты, vw, rem — вместо фиксированных пикселей. Разметка меняется в зависимости от ширины экрана: подход mobile first предполагает, что сначала верстают под маленький экран, а затем расширяют разметку для больших устройств. Стандартные брейкпоинты — 320, 768, 1024 и 1440 пикселей, они покрывают телефоны, планшеты, ноутбуки и десктопы разных производителей.

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

Как сверстать страницу с нуля: порядок действий

Создание веб-страницы удобно разбить на следующий набор шагов — от разбора макета до публикации готового файла на хостинге.

1. Разбор макета. Открывают макет в Figma или PSD, замеряют ширину контента, отступы между блоками, размеры шрифтов. Точная верстка макетов "пиксель в пиксель" называется pixel perfect — совпадение с оригиналом до 1–2 пикселей.
2. Папка проекта. Создают структуру проекта: index.html в корне, style.css рядом, папки /img для изображений и /fonts для шрифтов. Такой порядок файлов упрощает дальнейшую работу и подключение стилей на следующем шаге.
3. Каркас документа. Пишут DOCTYPE, html, head с meta charset и title, пустой body. На этом шаге страница уже открывается в браузере, но без содержимого и без оформления.
4. Разметка блоков. Добавляют header с логотипом и меню, section с основным контентом, footer с контактами. Каждый блок получает свой class для последующей стилизации в отдельном файле.
5. Подключение стилей. Через link в head подключают style.css и, если нужно, внешние шрифты. Задают цвет, отступ, ширину и высоту блоков — страница приобретает вид, близкий к макету дизайнера.
6. Адаптив. Добавляют meta viewport, медиазапросы под 320, 768 и 1024 пикселей, проверяют отображение на разных устройствах через инструменты разработчика в браузере.
7. Проверка и публикация. Код проверяют в валидаторе, скорость загрузки — через тестовые сервисы, затем загружают файлы на хостинг. Таким образом получается готовая рабочая часть сайта, а не черновой набросок.

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

Инструменты верстальщика: редакторы, браузер, валидаторы

Для написания кода нужен редактор кода — VS Code или Sublime Text, оба бесплатны и можно использовать без покупки лицензии. Плагин Emmet сокращает создание разметки: короткая аббревиатура div.card разворачивается в готовый блок с классом за одно нажатие Tab.

Онлайн-песочницы вроде CodePen или JSFiddle подходят для быстрых экспериментов без установки программ на компьютер. Инструменты разработчика в браузере, открывающиеся клавишей F12, показывают реальные размеры блоков, применённые стили и помогают на месте поменять отступ или ширину элемента и увидеть результат без пересборки проекта.

Готовый код стоит проверить в валидаторе validator.w3.org — сервис от консорциума W3C находит незакрытые теги и ошибки вложенности. Для CSS есть отдельный сервис jigsaw.w3.org/css-validator. С помощью таких инструментов можно найти ошибки, которые не видны глазом, но мешают браузеру корректно отображать страницу. Скорость загрузки страницы, важную и для поисковых систем, проверяют сервисами тестирования производительности перед публикацией проекта.

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

Признаки правильной вёрстки и частые ошибки новичков

Правильная вёрстка должна отвечать нескольким условиям: все теги должны быть закрыты, вложенность должна быть соблюдена, вместо «div-супа» должна использоваться семантическая разметка — header, section, footer вместо десятка одинаковых div. У каждого изображения должен быть атрибут alt, на странице должен быть только один h1, а отображение должно быть одинаковым только на разных устройствах любого размера.

• Фиксированные размеры в пикселях — на маленьком экране блок обрезается или вылезает за край; решение — относительные единицы и медиазапросы.
• Стили в атрибуте style — код становится нечитаемым и его сложно поддерживать; правило — переносить стили css в отдельный файл.
• Отсутствие meta viewport — страница на телефоне отображается уменьшенной копией десктопной версии; решение — добавить строку в head.
• Лишняя вложенность div внутри div без причины — усложняет структуру и мешает поисковым системам понимать контент страницы.
• Тяжёлые изображения без сжатия — страница долго загружается; решение — сжать картинки перед загрузкой на сайт любым онлайн-инструментом.

Частые вопросы об HTML-вёрстке

Аркадий Зверев, генеральный директор агентства «Комета». В продвижении сайтов с 2008 года, более 300 проектов