💻 Практические примеры

Пример 1. Тег с атрибутами и его результат

Атрибуты class, id и data-* не меняют сам элемент, но позволяют его стилизовать и помечать. Здесь класс даёт оформление, id — уникальный «адрес», а data-step хранит прикладные данные.

<section class="card" id="intro" data-step="1">
  <h2 class="card__title">Введение</h2>
  <p>Карточка с атрибутами.</p>
</section>

Пример 2. Несколько классов на одном элементе

В атрибут class можно записать несколько имён через пробел — элемент получит все стили сразу. Здесь btn задаёт форму кнопки, а btn--primary добавляет цвет.

<button class="btn btn--primary" data-action="buy">
  Купить
</button>

Пример 3. Осмысленная вложенность = план страницы

Когда элементы вложены осмысленно, HTML читается как макет: шапка, основной блок и боковая заметка внутри страницы.

<div class="page">
  <header class="page__header">Шапка</header>
  <main class="page__main">
    <article class="card">Основной контент</article>
    <aside class="page__aside" data-role="tips">Подсказки</aside>
  </main>
</div>

Пример 4. Правильная вложенность

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

<!-- ✅ Правильно: /p закрыт раньше /div -->
<div class="card">
  <p>Абзац аккуратно вложен в карточку.</p>
</div>

Пример 5. Неправильная вложенность (теги «крест-накрест»)

Здесь теги закрыты в неверном порядке: <strong> открыт внутри <em>, но </em> идёт раньше </strong>. Браузер «починит» это по-своему, и результат может оказаться непредсказуемым.

<!-- ❌ Неправильно: теги перекрываются крест-накрест -->
<p><em><strong>Перекрытые теги</em></strong></p>

<!-- ✅ Правильно: закрываем в обратном порядке -->
<p><em><strong>Перекрытые теги</strong></em></p>