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

После этого урока вы будете «читать» любой HTML-код как схему: видеть, какой элемент кому родитель, где вложенность нарушена и куда добавить новый блок.

Что уже умеем / что добавим

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

Что вы узнаете в рамках статьи

• Как устроен элемент и чем он отличается от тега.
• Что такое атрибуты и как их правильно записывать.
• Что такое вложенность и «дерево» документа.
• Чем блочные элементы отличаются от строчных.
• Как аккуратно оформлять отступы в коде для читаемости.

Ключевые термины

• Тег — команда разметки в угловых скобках: <p>, </p>.
• Элемент — открывающий тег, содержимое и закрывающий тег вместе.
• Атрибут — настройка внутри открывающего тега в формате имя="значение".
• Вложенность — размещение одного элемента внутри другого.
• Родитель и потомок — внешний элемент и вложенный в него.
• Блочный элемент — занимает всю ширину и начинается с новой строки (div, p, h1).
• Строчный элемент — занимает столько места, сколько нужно содержимому, и стоит в потоке текста (a, span).

Элемент и его части

Разметка HTML состоит из элементов. Большинство элементов — парные: у них есть открывающий и закрывающий теги, а между ними находится содержимое.

<p>Это абзац текста.</p>

Здесь <p> открывает элемент, </p> закрывает его (перед именем стоит слэш), а между ними — содержимое. Браузер, встретив такую пару, понимает: это абзац, и отображает его с вертикальными отступами.

Есть и одиночные элементы — они не содержат текста и не требуют закрывающего тега. Пример — перенос строки <br> или изображение <img>. С изображениями мы подробно поработаем в уроке 1.4.

Атрибуты

Атрибут — это дополнительная настройка элемента. Он записывается внутри открывающего тега в виде пары имя="значение":

<html lang="ru">
<a href="https://example.com">Ссылка</a>

В первом примере атрибут lang со значением ru сообщает, что страница на русском. Во втором атрибут href задаёт адрес, куда ведёт ссылка. У одного элемента может быть несколько атрибутов — их разделяют пробелом. Значение всегда берут в кавычки.

Частая ошибка новичка — забыть кавычки или перепутать имя атрибута. Если ссылка не работает, первым делом проверьте href.

Вложенность и дерево документа

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

<body>
  <div>
    <h1>Заголовок</h1>
    <p>Абзац внутри блока.</p>
  </div>
</body>

Здесь body — родитель для div, а div — родитель для h1 и p. Такую структуру удобно представлять как дерево: у него есть корень (html) и ветви, уходящие вглубь. Браузер строит это дерево, читая ваш код сверху вниз.

Главное правило вложенности: элементы не должны «перехлёстываться». Открыли <div>, потом <p> — сначала закройте </p>, и только затем </div>. Запись <div><p>текст</div></p> — ошибка.

Блочные и строчные элементы

Элементы делятся на две большие группы. Блочные занимают всю доступную ширину и всегда начинаются с новой строки: div, h1–h6, p. Из них строят крупные части страницы. Строчные занимают ровно столько места, сколько нужно их содержимому, и располагаются внутри строки текста: ссылка a, выделение span.

<p>Обычный текст и <a href="#">ссылка</a> внутри него.</p>

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

Применяем в проекте

Наведём порядок в лендинге. Обернём титульный экран в блок-контейнер div — так его будет удобно стилизовать позже как единую секцию. Заодно добавим осмысленные отступы в коде.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Курс по вёрстке</title>
</head>
<body>
  <div>
    <h1>Научитесь верстать сайты с нуля</h1>
    <p>Практический курс по HTML и CSS для начинающих. От первой страницы до готового лендинга.</p>
  </div>
</body>
</html>

Внешне на странице почти ничего не изменилось, но структура стала чище: заголовок и описание теперь логически объединены в один блок. К нему мы вернёмся, когда будем делить страницу на секции.

Частые ошибки

• Перехлёст вложенности.
  Закрывайте элементы в обратном порядке открытия: последний открытый закрывается первым.
• Забытые кавычки в атрибуте.
  Значение атрибута всегда в кавычках: href="...", а не href=....
• Пропущенный закрывающий тег.
  У парных элементов он обязателен, иначе структура «поедет».
• Смешение ролей.
  Не пытайтесь ставить блочный div внутрь строки текста, ожидая, что он останется в строке — он всё равно перенесётся.

Итоги

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

Вы молодец, что дошли до этого момента! Дальше — самое живое: в уроке 1.3 мы наполним страницу содержанием и познакомимся с текстовыми тегами и списками.