Справочник HTML & CSS

<div>

Блочный контейнер без смысла: группирует элементы для оформления и раскладки.

Синтаксис

<div class="name">Content</div>

Атрибуты

Параметр	Тип	Описание
class	text	Класс, через который к блоку обращаются в CSS.

Примеры

Карточка из нескольких элементов:

<style>
  .card { border: 1px solid #ddd; border-radius: 8px; padding: 12px; max-width: 220px; }
</style>
 
<div class="card">
  <h3>Cappuccino</h3>
  <p>$3.80</p>
</div>

Обёртка для flexbox:

<div style="display: flex; gap: 8px;">
  <div style="background: lightblue; padding: 8px;">One</div>
  <div style="background: lightpink; padding: 8px;">Two</div>
</div>

Примечания

Сначала подумайте о смысловом теге: <header>, <nav>, <main>, <section>, <article>. <div> подходит, когда обёртка нужна только для CSS.

См. также

<span> — Строчный контейнер без смысла: нужен, чтобы оформить часть текста.
<section> — Тематический раздел страницы с собственным заголовком.
class — Один или несколько классов элемента — основной способ обратиться к нему из CSS.
display — Определяет, как элемент ведёт себя в потоке и как раскладывает содержимое.

В учебнике

Блочная модель — Из чего состоит элемент в CSS — содержимое, padding, border и margin, размеры, центрирование и box-sizing.

Спасибо, что читаете!