⚖️ Всё в одном контейнере против осмысленной структуры

⚡ Различия в двух словах

Старый подход: один большой div с десятком вложенных div без ясных имён и без смысловой структуры.

Современный подход: элементы с понятными атрибутами class, id и data-*, а вложенность отражает реальную логику страницы.

Вывод: структура HTML должна помогать читать страницу, а не прятать смысл.

📜 Старый подход: «div-суп»

В старом варианте всё сваливается в безымянные <div>. Визуально результат может быть тем же, но понять, где шапка, где карточка, а где служебные данные, уже невозможно.

Текст
<!-- ❌ Всё в одинаковых div без смысла -->
<div class="page">
  <div class="block">
    <div class="block">
      <div class="block">Текст</div>
    </div>
  </div>
</div>

❌ Почему это неудобно

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

✅ Современный вариант: имена и смысл

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

Введение
Смысловой блок с понятными частями.
<section class="card" id="intro" data-step="1">
  <header class="card__header">
    <h2>Введение</h2>
  </header>
  <div class="card__body">
    <p>Смысловой блок с понятными частями.</p>
  </div>
</section>
Что стало лучше:
  • У каждого блока есть смысл и читаемое имя.
  • Атрибуты делают разметку удобной для стилей и логики.
  • Структура страницы совпадает со структурой смысла.

🕰️ Когда старый вариант встречается

Обычно это черновики, быстро собранные макеты или старый проект без рефакторинга. Если у вас есть время поправить разметку, лучше сразу заменить обезличенные контейнеры на понятные HTML-элементы и атрибуты.