HTML с нуля: как устроена разметка веб-страницы

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

Понимание HTML нужно не только новичкам в веб-разработке, но и тем, кто делает сайты на CMS или в конструкторах. Когда знаешь, как устроена разметка, проще находить ошибки, кастомизировать блоки и собирать страницы быстрее. Ниже разберём, как устроена HTML-разметка, какие теги действительно важны на старте и как собрать первую корректную страницу.

Что такое HTML и зачем он нужен

HTML расшифровывается как HyperText Markup Language — язык разметки гипертекста. Он не «программирует» поведение страницы, а описывает её структуру и смысловые блоки. Браузер читает HTML и строит DOM-дерево — внутреннее представление документа, по которому потом отрисовывается страница. Поисковые системы анализируют заголовки и семантику, чтобы понять, о чём материал.

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

HTML решает три задачи:

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

Важно понимать: HTML — это не про дизайн. Если в разметке всё собрано правильно, страницу потом проще стилизовать, адаптировать под мобильные устройства и поддерживать в проекте. Я часто вижу, как новички пытаются оформить страницу прямо в HTML: добавляют атрибуты вроде bgcolor или десятки <br> для отступов. Это путь к хаосу. Оформление — задача CSS, а HTML должен оставаться чистым и структурным.

Из чего состоит HTML-документ

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

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Название страницы</title>
  <meta name="description" content="Описание страницы">
</head>
<body>
  <!-- Видимый контент -->
</body>
</html>

Разберём этот шаблон по частям

Как работает структура страницы

HTML-документ делится на две большие части: head и body. Это разделение принципиально: всё, что в head, — инструкция для браузера и поисковиков, всё, что в body, — контент для пользователя.

<head> — служебная часть

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

<head>
  <meta charset="UTF-8">
  <title>Услуги веб-разработки — Студия</title>
  <meta name="description" content="Создание сайтов под ключ в Оренбурге. Адаптивная вёрстка, посадка на CMS, поддержка.">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <link rel="icon" href="favicon.ico">
</head>

На практике я часто встречаю две ошибки: забывают viewport — и мобильная версия превращается в микроскопический макет; или подключают CSS до title — это не критично, но порядок важен для предсказуемости загрузки.

<body> — видимая часть

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

Основные HTML-теги, которые нужно знать в начале

На старте не нужно заучивать весь справочник HTML. Достаточно понять базовые элементы и научиться собирать из них аккуратную структуру. Вот тот минимум, с которым я обычно знакомлю новичков в первую очередь.

Заголовки

Заголовки задают иерархию текста. В HTML их шесть: от h1 до h6. Правило простое: h1 — один главный заголовок страницы, h2 — крупные разделы, h3 — подразделы внутри h2, и так далее по логике вложенности. Нельзя перепрыгивать через уровень: если после h1 сразу идёт h3, это ломает структуру и сбивает с толку и поисковики, и скринридеры.

<h1>Услуги веб-студии</h1>
<h2>Создание сайтов</h2>
<h3>Лендинг</h3>
<h3>Корпоративный сайт</h3>
<h2>Поддержка</h2>

Я всегда проверяю структуру через автоматическое оглавление в редакторе — если иерархия нарушена, это сразу видно.

Абзацы

Текстовые блоки заключают в тег p. Браузер автоматически добавляет отступы до и после абзаца, поэтому не нужно вставлять дополнительные <br> для разделения — это частая ошибка новичков.

<p>Мы делаем сайты, которые работают на результат.</p>
<p>Каждый проект начинается с анализа задачи.</p>

Ссылки

Ссылка создаётся через тег a. Атрибут href указывает адрес. Без него ссылка не работает. Для внешних ссылок я всегда добавляю target="_blank" и rel="noopener noreferrer" — это безопасно и не позволяет новой вкладке получить доступ к исходной странице.

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Перейти на сайт</a>

Изображения

Изображения подключают через img. Здесь важно два атрибута: src — путь к файлу, и alt — текст, который объясняет, что на картинке. alt особенно важен, если изображение не загрузилось или страницу читает программа экранного доступа. Пустой alt="" допустим только для декоративных изображений, которые не несут смысловой нагрузки. Я часто вижу, как новички пишут alt="картинка" — это бесполезно. Описание должно быть осмысленным, например: «Логотип веб-студии» или «Пример адаптивной вёрстки на мобильном».

<img src="photo.jpg" alt="Команда веб-студии за работой">

Списки

HTML поддерживает два основных типа списков: маркированный ul и нумерованный ol. Вложенные списки — обычная практика для создания многоуровневых меню или структуры услуг.

<ul>
  <li>Пункт 1</li>
  <li>Пункт 2
    <ul>
      <li>Подпункт</li>
    </ul>
  </li>
</ul>

<ol>
  <li>Шаг первый</li>
  <li>Шаг второй</li>
</ol>

Контейнеры

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

Что такое семантическая разметка

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

Примеры семантических тегов:

• <header> — верхняя часть страницы или блока;
• <nav> — навигация;
• <main> — основной контент;
• <section> — логический раздел;
• <article> — самостоятельный материал;
• <aside> — боковой или дополнительный блок;
• <footer> — нижняя часть страницы или блока.

Пример структуры:

<header>
  <nav>...</nav>
</header>
<main>
  <article>
    <h1>Заголовок статьи</h1>
    <section>...</section>
  </article>
  <aside>...</aside>
</main>
<footer>...</footer>

Почему семантика важна

• страница становится понятнее — и разработчику, и браузеру;
• проще поддерживать код — через полгода не нужно гадать, где что лежит;
• улучшается доступность — скринридеры ориентируются по семантическим ориентирам;
• легче разбирать структуру при вёрстке — видно логические блоки;
• поисковым системам проще понять содержание — они выделяют ключевые области.

Как выглядит правильная базовая структура страницы

Для большинства проектов на старте подходит такой шаблон. Я использую его как отправную точку для лендингов, статей, страниц услуг и простых корпоративных сайтов. Он уже включает все необходимые мета-теги и семантический скелет.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Заголовок страницы</title>
  <meta name="description" content="Описание">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <nav>...</nav>
  </header>
  <main>
    <h1>Главный заголовок</h1>
    <section>...</section>
  </main>
  <footer>...</footer>
</body>
</html>

Пошагово: как собрать первую HTML-страницу

Шаг 1. Создайте файл

Создайте текстовый файл в редакторе кода (рекомендую VS Code — он подсвечивает синтаксис и сразу показывает ошибки) и сохраните его с расширением .html, например index.html.

Шаг 2. Добавьте базовый каркас

Вставьте doctype, html, head и body. Это минимальный скелет, без которого страница не будет корректно обрабатываться.

Шаг 3. Укажите язык

Для русскоязычного сайта ставьте <html lang="ru">. Это влияет на проверку орфографии в браузере и на то, как скринридеры произносят текст.

Шаг 4. Заполните head

Минимум: кодировка UTF-8, title, description и viewport. Без viewport мобильная версия будет выглядеть как уменьшенная копия десктопа, и пользователю придётся масштабировать страницу пальцами.

Шаг 5. Добавьте контент в body

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

Шаг 6. Проверьте страницу в браузере

Откройте файл и убедитесь, что:

• текст отображается корректно, без «кракозябр»;
• заголовки идут по логике, не нарушена иерархия;
• изображения загружаются (проверьте пути);
• ссылки работают и ведут туда, куда нужно.

Полезно также прогнать страницу через валидатор W3C — он покажет синтаксические ошибки, которые браузер, возможно, простил, но которые лучше исправить.

Частые ошибки новичков

1. Пропускают <!DOCTYPE html>

Без него браузер может переключиться в режим совместимости, и вёрстка поплывёт. Это одна из первых вещей, которую я проверяю, когда ко мне приносят «сломанный» сайт.

2. Не указывают кодировку

Если забыть UTF-8, русский текст может отображаться неправильно. Особенно обидно, когда всё работает локально, а на хостинге вылезают «кракозябры».

3. Дублируют h1

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

4. Используют div вместо семантических тегов

Технически это работает, но страница становится менее понятной и неудобной для поддержки. Через полгода вы сами не вспомните, зачем нужен был десятый div.

5. Не заполняют alt у картинок

Это ухудшает доступность и мешает понять содержимое изображения, если оно не загрузилось. К тому же поисковики учитывают alt при ранжировании картинок.

6. Пишут структуру без логики

Например, когда в h3 сразу прыгают после h1, минуя h2. Это ломает иерархию. Представьте оглавление книги, где после названия главы идёт сразу подподраздел — нелогично.

7. Используют устаревшие теги и атрибуты

До сих пор встречаю <center>, <font>, bgcolor. Это пережитки прошлого. В современном HTML всё оформление выносится в CSS, а теги должны описывать структуру.

8. Злоупотребляют <br> для отступов

Перенос строки — это не инструмент вертикальных отступов. Для расстояний между блоками есть CSS-свойство margin. Иначе при смене размера экрана всё разъедется.

Как понять, что HTML написан хорошо

Ниже — короткий чек-лист, который я использую при проверке своих и чужих работ. Если все пункты выполняются, разметку можно считать качественной.

Чек-лист качества HTML-разметки

• есть <!DOCTYPE html>;
• указан lang;
• задана кодировка UTF-8;
• есть понятный title;
• структура логична;
• используется один h1;
• заголовки идут по иерархии;
• изображения имеют alt;
• ссылки ведут туда, куда нужно;
• семантические теги используются по смыслу;
• код читается без усилий — нет лишней вложенности, отступы единообразны;
• нет устаревших тегов и атрибутов;
• страница проходит валидацию W3C без критических ошибок.

Чем HTML отличается от CSS и JavaScript

Чтобы не путаться, полезно разделять роли технологий. Часто новички пытаются в HTML прописать стили или скрипты, что ведёт к каше. Лучше придерживаться принципа разделения ответственности.

Если упростить:

• HTML отвечает за «что это»;
• CSS — за «как выглядит»;
• JavaScript — за «что делает».

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

Что учить после базового HTML

Когда базовая разметка уже понятна, следующий шаг — закрепить практику. Я обычно даю ученикам задание сверстать простой лендинг: шапка, блок услуг, форма обратной связи, подвал. Это помогает не просто запомнить теги, а научиться собирать реальные страницы.

Полезный порядок изучения:

1. базовые теги;
2. семантическая структура;
3. списки, таблицы, формы;
4. атрибуты;
5. вложенность элементов;
6. путь к файлам и изображениям;
7. основы CSS;
8. основы JavaScript.

Параллельно стоит освоить инструменты разработчика в браузере (F12) — они позволяют смотреть разметку любой страницы, экспериментировать со стилями и отлаживать ошибки. Это ускоряет обучение в разы.

Итог

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

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

FAQ

Что такое HTML простыми словами?

HTML — это язык разметки, который описывает структуру веб-страницы: заголовки, текст, изображения, ссылки и другие элементы. Он говорит браузеру: «вот это заголовок, это абзац, а это картинка». Без HTML браузер не знал бы, как отобразить контент.

Нужно ли знать HTML, если есть конструкторы сайтов?

Да, базовое понимание HTML полезно даже при работе с конструкторами. Оно помогает лучше собирать блоки, исправлять ошибки и понимать, как устроена страница. Часто визуальный редактор не даёт полного контроля, и тогда приходится править код вручную — например, чтобы добавить нестандартный атрибут или исправить вёрстку, которая «поехала».

Сколько тегов нужно знать новичку?

Для старта достаточно десятка основных: html, head, body, title, h1-h6, p, a, img, ul, ol, li, div, span, а также семантических тегов вроде header, main, section, footer. Важнее не количество, а понимание, когда и зачем применять каждый из них.

Можно ли создать сайт только на HTML?

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

Почему важен тег lang="ru"?

Он помогает браузерам, поисковым системам и вспомогательным технологиям правильно определить язык страницы. Для русскоязычного сайта это обязательная практика. Например, скринридер переключит языковой движок и будет корректно произносить слова, а не пытаться читать русский текст по правилам английского.