Когда я начинал работать с сайтами в 2013 году, половина клиентов думала, что верстка - это что-то вроде магии. Приходит дизайнер, машет руками, и сайт появляется из воздуха. На деле всё проще: любая веб-страница - это обычный текстовый файл с тегами, который браузер читает сверху вниз и превращает в то, что вы видите на экране.
HTML расшифровывается как HyperText Markup Language - язык разметки гипертекста. Это не язык программирования в привычном смысле: здесь нет логики, циклов и функций. HTML просто описывает структуру страницы - где заголовок, где абзац, где картинка. Браузер читает эту разметку и отображает контент в нужном виде.
HTML-верстка с нуля - это не про талант и не про годы практики. Это про понимание 10-15 базовых тегов и логики, по которой они складываются в макет страницы.
За годы работы в студии я видел, как люди с нулевым опытом начинали верстать рабочие страницы уже через неделю после знакомства с основами. Главное - не пытаться выучить всё сразу, а понять базовую логику: как браузер видит код, как теги вкладываются друг в друга, как CSS добавляет стили к структуре HTML.
В этой статье разберём именно это: скелет HTML-документа, блочную верстку как современный стандарт, работу с CSS, основные теги для контента и адаптивность. Без воды - только то, что нужно, чтобы начать делать реальные страницы.
Что такое HTML и как браузер видит страницу
Открой любой сайт, нажми правой кнопкой мыши и выбери «Просмотр кода страницы». Вот оно - то, что видит браузер. Куча текста с угловыми скобками. Именно этот код браузер читает сверху вниз и на его основе строит визуальное представление страницы.
Каждый HTML-документ начинается с одной обязательной строки - DOCTYPE. Это объявление сообщает браузеру, с каким типом документа он работает. В современной верстке DOCTYPE выглядит так:
<!DOCTYPE html>Эта строка не тег в привычном смысле - она не закрывается и не содержит контент. Её задача - сказать браузеру: «Перед тобой HTML5-документ, обрабатывай его по современным стандартам». Без DOCTYPE браузер переходит в так называемый режим совместимости и может отображать страницу с ошибками.
После DOCTYPE идёт корневой тег <html>, внутри которого размещается весь документ. Он делится на два раздела: <head> и <body>.
Тег head содержит метаданные страницы - информацию для браузера и поисковых систем, которую пользователь напрямую не видит. Здесь указывают кодировку через meta charset, подключают стили, задают title - заголовок вкладки в браузере, добавляют meta-описание для поисковиков. Вот минимальный рабочий шаблон head:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Заголовок страницы во вкладке</title>
</head>Обрати внимание на атрибуты тегов. Атрибут - это дополнительная характеристика тега, которая уточняет его поведение. В примере выше charset="UTF-8" - атрибут тега <meta>, он задаёт кодировку документа. Атрибут name="viewport" говорит браузеру, как масштабировать страницу на мобильных устройствах. Без него адаптивная верстка работать не будет.
Тег body содержит всё видимое содержимое страницы: текст, заголовки, картинки, кнопки, таблицы. Именно то, что пользователь видит и с чем взаимодействует. Полный скелет минимального HTML-документа выглядит так:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Моя первая страница</title>
</head>
<body>
<h1>Привет, мир!</h1>
<p>Это моя первая страница.</p>
</body>
</html>Сохрани этот текст в файл с расширением .html, открой в браузере - и ты увидишь рабочую страницу. Title будет отображаться во вкладке браузера, заголовок h1 и абзац - в основной области. Это и есть базовая HTML-разметка: структура описана кодом, браузер читает теги и строит визуальное представление.
В моей практике новички чаще всего путаются именно с различием между head и body. Простое правило: если это видно на странице - в body. Если это настройка для браузера или поисковика - в head.
Блочная верстка - современный стандарт
Блочная верстка заменила устаревшую табличную верстку где-то в середине 2000-х, и это был настоящий переворот. Я ещё застал время, когда сайты делали через <table> - вкладывали таблицы в таблицы, рисовали колонки через ячейки. Это работало, но превращалось в кошмар при любой правке и полностью ломалось на мобильных устройствах.
| Критерий | Табличная верстка | Блочная верстка |
| Гибкость макета | Жёсткая структура, сложно менять без переписывания всей таблицы | Блоки легко переставлять, менять размеры и порядок через CSS |
| Адаптивность под мобильные | Очень сложно - таблицы не сжимаются без потери структуры | Нативная поддержка: блоки перестраиваются через media queries |
| Читаемость кода | Много вложенных тегов tr, td, table - код быстро разрастается | Чистая иерархия div-контейнеров, логичная структура |
| Скорость загрузки | Браузер ждёт полной загрузки таблицы перед отрисовкой | Блоки рендерятся по мере загрузки, страница появляется быстрее |
| SEO | Контент внутри таблиц поисковики индексируют хуже по наблюдениям практиков | Чистая семантика, контент легко индексируется |
Блочная верстка выигрывает по всем параметрам, и именно поэтому ни один современный сайт не делают на таблицах. Если вы встречаете устаревшие уроки с табличной версткой - пропускайте, это тупик.
Основа блочной верстки - тег div. Тег div создаёт блочный контейнер на странице - прямоугольную область, в которую можно поместить любой контент. Сам по себе div визуально ничего не делает: это просто ящик для группировки элементов. Всю визуализацию задаёт CSS.
По умолчанию div - блочный элемент. Это значит, что display:block задает блочное поведение элемента: он занимает всю доступную ширину и начинается с новой строки. Из-за этого несколько div подряд выстраиваются вертикально - один под другим.
<div>Первый блок</div>
<div>Второй блок</div>
<div>Третий блок</div>Это три блока, каждый займёт всю ширину контейнера. Чтобы сделать горизонтальный макет - например, два div рядом - нужно поменять тип отображения. Здесь на помощь приходит display:flex.
Flexbox - система для управления расположением блоков внутри контейнера. Ты задаёшь родительскому div свойство display: flex, и его дочерние элементы автоматически выстраиваются в ряд. Это современный стандарт для создания макетов:
<div style="display: flex;">
<div style="width: 30%;">Левая колонка</div>
<div style="width: 70%;">Основной контент</div>
</div>Вот типичный макет сайта через блоки: шапка сайта - один div, навигация - отдельный div, основная зона с двумя колонками - flex-контейнер с двумя дочерними div, подвал - ещё один div. Все эти типы блочных контейнеров складываются в готовый макет страницы.
Важный момент, который я объясняю всем на реальном проекте: div-блоки хороши для структуры, но не для семантики. В HTML5 появились семантические теги - <header>, <nav>, <main>, <footer>. По сути это те же блочные контейнеры с display:block, но с понятными именами. Поисковики и экранные читалки для незрячих понимают их значение. Для адаптивных современных сайтов используй семантику там, где это уместно, а div - для вспомогательных обёрток. Блочная верстка основана на теге div и его производных, и это фундамент, без понимания которого двигаться дальше сложно.
CSS - как сделать страницу красивой
CSS управляет визуальным оформлением страницы: цвета, шрифты, отступы, фон, выравнивание элементов. Если HTML - это скелет сайта, то CSS - его внешний вид. Без стилей любая страница выглядит как текстовый документ из 90-х: черный текст на белом фоне, синие ссылки, никакого оформления.
Подключают CSS к HTML-документу через тег <link> в секции <head>:
<link rel="stylesheet" href="style.css">Либо пишут стили прямо в теге <style> внутри <head> - это удобно для небольших проектов и экспериментов. Но на реальных проектах мы всегда выносим CSS в отдельный файл: так проще поддерживать код и не запутаться через полгода.
Базовые свойства, которые используют в каждом проекте:
- color - цвет текста (например,
color: #333333) - background-color - цвет фона элемента
- font-family - шрифт (например,
font-family: Arial, sans-serif) - font-size - размер текста в пикселях или em
- width - ширина элемента
- text-align - выравнивание текста: left, center, right
Свойство padding управляет внутренними отступами элемента - то есть расстоянием между содержимым и границей самого блока. Свойство margin управляет внешними отступами между элементами - расстоянием между одним блоком и соседними. Путаница между padding и margin - одна из самых частых ошибок у новичков. Запомните так: padding - внутри, margin - снаружи.
Пример с отступами:
.card {
padding: 20px; /* внутренний отступ - от края блока до текста */
margin: 10px 0; /* внешний отступ - сверху и снизу от соседних блоков */
background-color: #f5f5f5;
font-family: Georgia, serif;
font-size: 16px;
color: #444444;
width: 100%;
}CSS-селектор по классу применяет стили к группе элементов - это основной инструмент оформления. Класс задаёшь атрибутом class в HTML-теге, а в CSS обозначаешь точкой перед именем. Один класс можно повесить на десятки элементов, и все они получат одинаковые стили - это называется переиспользованием. В нашей студии мы строим верстку именно от классов: сначала пишем набор базовых классов для типографики, отступов и цветов, потом собираем страницу как конструктор.
Ключевые теги для работы с контентом
За годы работы с веб-проектами я выработал список тегов, которые нужны в 95% задач. Не нужно учить все 100+ тегов HTML - достаточно освоить стартовый комплект и работать с ним уверенно.
Изображения. Тег <img> вставляет картинки на страницу. Два обязательных атрибута: src (путь к файлу) и alt (текстовое описание изображения). Атрибут alt - не формальность: он нужен для SEO и для пользователей с нарушениями зрения, которые используют скринридеры. Браузер показывает текст из alt, если картинка не загрузилась.
<img src="images/photo.jpg" alt="Верстка сайта на ноутбуке" width="800" height="600">Ссылки. Тег <a> с атрибутом href создает гиперссылку. Для внешних ссылок добавляют target="_blank", чтобы страница открывалась в новой вкладке.
Заголовки и текст. Теги заголовков <h1>-<h3> образуют иерархию: h1 - главный заголовок страницы (один на странице), h2 - разделы, h3 - подразделы. Тег <p> оборачивает абзацы текста. Эта иерархия важна не только для читателей, но и для поисковых роботов.
Списки. Маркированный список строится из тегов <ul> и <li>. Нумерованный - из <ol> и <li>. Списки помогают структурировать перечисления и улучшают читаемость страницы.
<ul>
<li>Первый пункт списка</li>
<li>Второй пункт списка</li>
<li>Третий пункт списка</li>
</ul>Таблицы. Тег <table> нужен для структурированных данных: прайсы, сравнения, расписания. Строки - тег <tr>, ячейки - <td>. Таблицы подходят именно для табличных данных - не для верстки макета (это устаревший подход).
Кнопки и интерактив. Тег <button> создает кнопку. Его используют для форм, всплывающих окон, любых действий на странице. Атрибут type="submit" отправляет форму, type="button" - для обработки через JavaScript.
Семантические теги <header>, <nav> и <footer> улучшают SEO и доступность страницы. Они несут смысловую нагрузку: поисковик понимает, что <nav> - это навигация, <header> - шапка сайта, <footer> - подвал. Тег <main> обозначает основной контент страницы. Эти теги не меняют внешний вид, но помогают и роботам, и людям с ассистивными технологиями ориентироваться на странице. Мы в студии используем их в каждом проекте - это стандарт современной верстки.
Адаптивная верстка и инструменты верстальщика
Адаптивная верстка использует медиазапросы и относительные единицы, чтобы сайт корректно выглядел на любых устройствах - от смартфона до широкоформатного монитора. По данным аналитических сервисов, больше половины веб-трафика в среднем по рынку идет с мобильных устройств, и поисковики учитывают мобильную версию сайта при ранжировании. Сайт без адаптивности - это потерянные клиенты и низкие позиции в поиске.
Первый инструмент адаптивности - viewport meta-тег, о котором шла речь выше при разборе структуры HTML: он обязателен, иначе мобильный браузер уменьшит страницу до нечитаемых размеров.
Второй - медиазапросы в CSS. Это условия, при которых браузер применяет разные стили в зависимости от ширины экрана:
/* стили для экранов шире 768px */
.container {
width: 960px;
}
/* стили для смартфонов - экраны до 768px */
@media (max-width: 768px) {
.container {
width: 100%;
padding: 0 15px;
}
}Вместо фиксированных пикселей используют относительные единицы: проценты для ширины блоков, em или rem для шрифтов. Так элементы масштабируются пропорционально размеру экрана.
Flexbox и Grid решают задачи выравнивания и раскладки блоков - это два главных инструмента современного верстальщика. Flexbox удобен для одномерных раскладок: меню, строки с карточками, шапка с логотипом и навигацией. Grid подходит для двумерных сеток - когда нужно расположить блоки и по строкам, и по столбцам одновременно. На практике большинство задач решается через Flexbox, Grid нужен реже.
Теперь про инструменты фронтенд-разработчика в веб-проектах. Visual Studio Code - самый популярный редактор кода для верстки, бесплатная программа от Microsoft с огромным набором расширений. Из обязательных плагинов для верстальщика: Prettier (автоформатирование кода), Live Server (предпросмотр страницы в браузере в реальном времени), Auto Rename Tag (автоматически переименовывает закрывающий тег при изменении открывающего).
Chrome DevTools - инструмент, который открывается нажатием F12 в браузере. Он незаменим в практике верстки: можно посмотреть, какие стили применяются к элементу, изменить их прямо в браузере без правки файлов, проверить адаптивность - встроенный эмулятор показывает, как сайт выглядит на разных устройствах. Figma пригодится, если вы работаете с дизайн-макетами: в ней открывают Figma-файлы от дизайнера, смотрят размеры блоков, цвета и шрифты. Для PSD-макетов используют Adobe XD или Adobe Photoshop.
W3C Validator проверяет валидность HTML-кода: это бесплатный онлайн-сервис от консорциума W3C, который разрабатывает стандарты веб-технологий. Вставляете код или ссылку - сервис показывает ошибки и предупреждения. Валидный HTML без ошибок лучше индексируется поисковиками и стабильнее отображается в разных браузерах. Мы в студии прогоняем финальную верстку через валидатор перед сдачей каждого проекта - это занимает пять минут и экономит часы на отладку.
С чего начать и как учиться без ошибок
Самый частый вопрос, который мне задают начинающие: с чего вообще стартовать? Открыть курс? Скачать шаблоны? Посмотреть видео? Мой ответ всегда один - начать нужно с блокнота и первого файла. Буквально.
Вот конкретный маршрут, который я рекомендую всем, кто хочет освоить основы верстки с нуля:
- Откройте обычный «Блокнот» (или Notepad++ на Windows, TextEdit на Mac) и напишите минимальную структуру: DOCTYPE, head с title, body с одним заголовком и абзацем. Сохраните файл с расширением .html.
- Откройте этот файл в браузере - просто перетащите его в окно Chrome. Вы увидите свою первую страницу. Это важный момент: процесс от «написал код» до «увидел результат» должен стать рефлексом.
- Добавьте к странице файл style.css, подключите его через тег link и начните менять цвета, шрифты, отступы. Смотрите, как реагирует браузер.
- Создайте простую страницу: шапка с названием, навигация из 3-4 пунктов, блок с текстом и картинкой, подвал. Это ваш первый готовый учебный проект.
Такой подход работает лучше любого популярного курса без практики - потому что вы сразу создаёте что-то настоящее, а не смотрите на чужой код.
Я сам начинал примерно так же в 2013 году. Мой первый учебный проект был карточкой визитки: имя, контакты, маленькая фотография. Никаких фреймворков, никаких инструментов - только HTML и CSS в текстовом редакторе. Сейчас это звучит примитивно, но именно тогда я понял, как браузер интерпретирует код. Этот «момент понимания» невозможно получить из теории - только из практики с реальным файлом.
Частые ошибки новичков
За годы работы в студии я видел одни и те же ошибки у людей, которые только начали учиться. Вот самые типичные:
- Незакрытые теги. Открыли
<div>, забыли закрыть. Браузер попытается исправить это сам, но результат непредсказуем. Приучите себя сразу писать открывающий и закрывающий тег парой. - Забыть атрибут alt у изображений. Картинка отображается - и ладно. Но без alt страдает доступность и SEO. Это базовое правило, которое нужно запомнить раз и навсегда.
- Путать margin и padding. Margin - внешний отступ (от элемента до соседних), padding - внутренний (от края элемента до его содержимого). Нарисуйте это на бумаге один раз - и больше не перепутаете.
- Копировать шаблоны без понимания. Готовый шаблон ускоряет старт, но если вы не понимаете, что внутри - вы не верстальщик, а оператор копипаста. Берите любые шаблоны только после того, как разобрали структуру самостоятельно.
- Игнорировать валидатор. Код может выглядеть правильно в Chrome и ломаться в Safari. W3C Validator покажет ошибки до того, как они станут проблемой.
Куда двигаться дальше
Когда базовая страница готова и вы понимаете, как работает HTML вместе с CSS, - пройдите следующий логичный шаг. Чтобы стать разработчиком или уверенным верстальщиком, нужно освоить адаптивность через медиазапросы (об этом шла речь выше), а затем познакомиться с JavaScript. JavaScript добавляет интерактивность к HTML-странице: кнопки начинают реагировать на клик, формы проверяют данные до отправки, элементы появляются и скрываются без перезагрузки. Это следующий уровень после HTML и CSS, и без него профессия фронтенд-разработчика неполна.
Бесплатный путь обучения выглядит так: MDN Web Docs (developer.mozilla.org) - это энциклопедия, где описан каждый тег и каждое свойство CSS. Google Web Dev (web.dev) - практические руководства от команды Chrome. htmlacademy.ru - интерактивный курс на русском языке с задачами прямо в браузере. Этих ресурсов достаточно, чтобы освоить базу без вложений.
Главное правило: учиться через проект, а не через теорию. Выберите реальную задачу - сверстать страницу для своего хобби, сделать онлайн-резюме, воссоздать главную страницу любимого сайта. Ошибки в таком проекте запоминаются лучше, чем любые объяснения из книг. И не бойтесь этих ошибок - именно через них формируется понимание того, как браузер читает ваш код.
Эта статья основана на личном опыте автора и актуальна на момент публикации. Интерфейсы сервисов и алгоритмы поисковых систем регулярно меняются - рекомендую проверять актуальность инструкций на официальных ресурсах. Если у вас остались вопросы - задайте их в комментариях.
Список литературы
- MDN Web Docs - "Введение в HTML", актуальная редакция
- Google - "Learn HTML" // web.dev
- Google - "Responsive Web Design Basics" // developers.google.com
- MDN Web Docs - "CSS: каскадные таблицы стилей", актуальная редакция
Занимательная статья. Спасибо!
Спасибо, уже начал верстать сайт кодом. Мне 13 лет.
Молодец.