Тег <div>: универсальный контейнер
Когда нужен div, как объединять элементы и когда лучше выбрать смысловой тег.
Зачем нужен этот элемент
div объединяет фрагмент интерфейса, не сообщая его предметного смысла. Он полезен для сетки, внутренней обёртки карточки или группы декоративных элементов. Сам по себе div не делает содержимое ни разделом, ни навигацией, ни кнопкой.
Перед добавлением контейнера спросите, нужен ли он для оформления или группировки. Если блок представляет отдельную публикацию, подходит article; для навигации есть nav. Если точного смыслового элемента нет, div — нормальный и предсказуемый выбор.
Синтаксис и пример
<style>.group { display: flex; gap: 12px; } .item { padding: 16px; background: #eaf4ee; }</style>
<div class="group">
<div class="item">HTML</div>
<div class="item">CSS</div>
</div>Что важно в разметке
| Параметр | Как использовать |
|---|---|
| class | Класс для оформления контейнера. |
| display | По умолчанию блок; модель раскладки меняется CSS. |
| Вложенность | Делайте столько обёрток, сколько действительно нужно. |
Частая ошибка
Небольшая практика
Уберите лишнюю обёртку из примера и проверьте, меняется ли результат. Затем задайте контейнеру display: flex и gap.
Разберите также <section>, <article>: эти элементы пригодятся в том же интерфейсе.