Тег div в HTML: как сделать блок и оформить его через CSS

Тег div в HTML создаёт пустой блок-контейнер: всё, что лежит между <div> и </div>, браузер выводит с новой строки на всю ширину родителя. Чтобы сделать блок на странице, оберните заголовок, текст или картинку в <div class="card">, а потом опишите класс .card в CSS: ширину, отступы, рамку и фон.

Сам по себе div ничего не меняет во внешнем виде. По справке MDN, он не влияет на контент или макет, пока его не стилизуют через CSS. Где div стоит среди остальных тегов, видно в нашем списке основных тегов HTML.

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

CheckroiПодборка курсов по CSS181 курс • 37 школСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→

Как сделать блок в HTML: пошаговая инструкция

Соберём карточку тарифа: заголовок, строку описания, рамку и скруглённые углы. Понадобится обычный HTML-файл, если его ещё нет, создайте по инструкции про index.html.

1. Оберните содержимое в div. Всё, что относится к одному блоку, кладите между открывающим и закрывающим тегом.
2. Дайте блоку класс. Атрибут class="card" нужен, чтобы стиль нашёл именно этот div, а не все блоки страницы.
3. Опишите класс в CSS. Стили лучше вынести в отдельный файл. Как это сделать, разобрано в статье про подключение CSS к HTML.
4. Откройте страницу в браузере и проверьте размер блока в инструментах разработчика (клавиша F12).

Разметка карточки:

<div class="card">
  <h2>Тариф «Старт»</h2>
  <p>10 уроков и проверка домашних заданий</p>
</div>

Стили для неё:

.card {
  width: 300px;
  padding: 20px;
  border: 2px solid #3b82f6;
  border-radius: 12px;
  background: #eff6ff;
}

Получится голубая карточка с синей рамкой. Обратите внимание на ширину: инструменты разработчика покажут 344 пикселя, а не 300. Откуда берутся лишние 44 пикселя, объясняем ниже, в разделе про блочную модель.

Атрибуты div: class, id и style

Собственных атрибутов у div нет, только глобальные, общие для всех тегов. На практике нужны три.

Запись div style удобна, когда надо быстро проверить идею. Например, подсветить блок жёлтым фоном:

<div style="background: #fef3c7; padding: 12px;">
  Набор закрывается 15 ноября
</div>

В рабочей вёрстке от style лучше уходить к классам. Двадцать одинаковых карточек с инлайн-стилями придётся править двадцать раз, а класс меняется в одной строке. Подробнее о том, как устроены селекторы и каскад, рассказываем в статье «Что такое CSS».

Вложенные блоки и контейнер страницы

Div можно класть друг в друга на любую глубину. Так собирают каркас страницы: внешний блок-контейнер ограничивает ширину, внутри него лежат шапка, колонки и подвал.

<div class="container">
  <div class="header">Логотип и меню</div>
  <div class="content">
    <div class="card">Тариф «Старт»</div>
    <div class="card">Тариф «Про»</div>
  </div>
</div>

Класс container часто встречается в шаблонах сайтов, в том числе в Bootstrap. Обычно это div с ограниченной шириной и автоматическими отступами по бокам, как в примере с центрированием ниже.

Глубокая вложенность читается тяжело. Если блоков больше трёх уровней, проверьте, нельзя ли убрать лишнюю обёртку: часто её свойства можно перенести на соседний div.

Чем div отличается от span

Оба тега ничего не значат для браузера и нужны только как крючок для стилей. Разница в том, как они встают на страницу: по MDN, div является блочным элементом, а span строчным.

Span берут, когда надо выделить кусок строки и не разорвать её. Типичный случай: цена внутри абзаца.

<p>Цена: <span class="price">4 900 ₽</span></p>

Если просто нужно сделать слово жирным, span не обязателен, хватит <strong>. Чем они различаются, мы разбирали в статье про жирный текст в HTML.

Блочная модель: из чего складывается размер блока

Каждый div браузер рисует как прямоугольник из четырёх слоёв: содержимое, внутренний отступ padding, рамка border и внешний отступ margin. Это и называют блочной моделью, подробный урок есть в учебнике MDN.

По умолчанию width задаёт ширину только содержимого. Отсюда 344 пикселя у нашей карточки:

• 300 пикселей содержимого;
• 20 + 20 пикселей внутреннего отступа слева и справа;
• 2 + 2 пикселя рамки.

Чтобы width: 300px означало «300 пикселей вместе с отступами и рамкой», добавьте свойство box-sizing:

.card {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 2px solid #3b82f6;
}

С этой строкой блок займёт ровно 300 пикселей. Часто box-sizing: border-box задают сразу всем элементам через селектор *, чтобы не пересчитывать ширину в каждом блоке.

Ещё одна особенность касается вертикальных отступов. Если у верхнего блока margin-bottom: 20px, а у нижнего margin-top: 30px, расстояние между ними будет 30 пикселей, а не 50. MDN называет это схлопыванием внешних отступов: из двух соседних отступов остаётся больший.

Как поставить блоки рядом: flex и grid

Блочные элементы встают друг под другом. Чтобы выстроить карточки в ряд, свойства задают не самим div, а их общему родителю, тоже div.

Ряд карточек на flex

<div class="cards">
  <div>Старт</div>
  <div>Про</div>
  <div>Команда</div>
</div>

.cards {
  display: flex;
  gap: 16px;
}
.cards > div {
  flex: 1;
}

flex: 1 делит свободное место поровну. В контейнере шириной 900 пикселей получатся три колонки примерно по 289 пикселей: из 900 вычитаются два промежутка по 16, остаток делится на три.

Готовую сетку из flex-колонок даёт и фреймворк Bootstrap, как сверстать на нём первую страницу, мы показывали в статье про Bootstrap. Для одной карточки фреймворк избыточен, а для сайта из десятка однотипных блоков экономит время.

Сетка на grid

Если карточек много и они должны переноситься рядами, удобнее grid:

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

Четвёртая карточка сама уйдёт во второй ряд под первую. Разобрать flex и grid на практике с проверкой заданий можно на курсах по CSS из нашего каталога. На телефоне три колонки будут слишком узкими, поэтому число колонок обычно меняют через медиа-запросы в CSS.

Блок по центру страницы

Обёртку с контентом центрируют так:

.wrap {
  max-width: 600px;
  margin: 0 auto;
}

На странице шириной 1000 пикселей блок встанет в 200 пикселях от левого края: браузер поделил оставшиеся 400 пикселей поровну между левым и правым отступом.

Канал основателя Checkroi Вани БуявцаЗабирайте промпты и обучение по нейросетям в моём Телеграм-каналеБольше 3 700 человек уже применяют Claude Code, ChatGPT и другие нейросети в работе, учёбе, бизнесе и жизниПерейти в канал→

Когда вместо div нужен семантический тег

Спецификация HTML прямо советует считать div «элементом последней надежды» (в оригинале «element of last resort»): его берут, когда другой подходящий тег не находится. Причина в доступности: программа экранного доступа понимает, где навигация и где основной текст, только если это размечено тегами со смыслом.

Эти теги появились в HTML5, подробнее о них в статье про HTML5.

Div остаётся там, где смысла нет, а нужна только обёртка для стилей: колонка сетки, контейнер flex, фон под группой блоков. В карточках из примера выше div уместен. А вот страницу, где шапка, меню и подвал сделаны одними div, мы бы переделали: разметка займёт столько же строк, а читать её станет проще и людям, и программам.

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

На этих пяти ошибках чаще всего ломается первая вёрстка.

1. Div внутри абзаца. Код <p><div>текст</div></p> браузер разберёт по-своему: закроет абзац перед div и создаст ещё один пустой абзац после. По спецификации абзац закрывается сам, как только за ним идёт div. Стили для p к тексту не применятся. Решение: внутри абзаца используйте span, а абзацы кладите в div, а не наоборот. Как размечать абзацы, разобрано в статье про тег p.
2. Пустой блок не видно. У div без содержимого высота 0, поэтому фон и рамка не появятся. Задайте height или min-height.
3. Блок шире, чем задумано. Ширина складывается с padding и border, как в нашей карточке. Лечится строкой box-sizing: border-box.
4. Div вместо кнопки. Кликабельный <div onclick="…"> не получает фокус по клавише Tab, так что с клавиатуры его не нажать. Для действий есть button, примеры в статье про кнопки в HTML.
5. Потерянный закрывающий тег. Пропущенный </div> затягивает в блок всё, что идёт ниже, и вёрстка разъезжается. Помогает форматирование кода с отступами и пометка закрывающих тегов комментарием вроде <!-- /.card -->.

Где научиться вёрстке системно

Карточку из div и CSS можно собрать по этой инструкции за полчаса. Адаптивная страница из десятков блоков, которая одинаково выглядит на телефоне и мониторе, требует практики: флексы, сетки, медиа-запросы и проверка в разных браузерах. Что входит в работу целиком, описано в статье о вёрстке и в обзоре профессии HTML-верстальщика.

Если хочется пройти путь с проверкой домашних заданий, вот курсы по CSS из нашего каталога:

Курс	Школа	Стоимость со скидкой	В рассрочку	Длитель­ность	Обзор курса от Checkroi
HTML и CSS с нуля Перейти на сайт курса	Skillbox	91 626 ₽	7635 ₽/мес.	11 месяцев	Обзор курса
HTML и CSS. Адаптивная вёрстка и автоматизация Перейти на сайт курса	HTML Academy	23 400 ₽	3900 ₽/мес.	2 месяца	Обзор курса
Основы вёрстки HTML и CSS Перейти на сайт курса	Академия Синергия	32 676 ₽	2723 ₽/мес.	3 месяца	Обзор курса
HTML и CSS с нуля	Skypro	195 160 ₽	7972 ₽/мес.	12 месяцев	Обзор курса
Онлайн-курс Вёрстка на HTML и CSS Перейти на сайт курса	Бруноям	36 900 ₽	2491 ₽/мес.	3 месяца	Обзор курса

• 

  HTML и CSS с нуля

  Skillbox91 626 ₽7635 ₽/мес11 месяцев
  Перейти на сайт курсаОбзор
• 

  HTML и CSS. Адаптивная вёрстка и автоматизация

  HTML Academy23 400 ₽3900 ₽/мес2 месяца
  Перейти на сайт курсаОбзор
• 

  Основы вёрстки HTML и CSS

  Академия Синергия32 676 ₽2723 ₽/мес3 месяца
  Перейти на сайт курсаОбзор
• 

  HTML и CSS с нуля

  Skypro195 160 ₽7972 ₽/мес12 месяцев
  Обзор
• 

  Онлайн-курс Вёрстка на HTML и CSS

  Бруноям36 900 ₽2491 ₽/мес3 месяца
  Перейти на сайт курсаОбзор

Больше программ — в полном каталоге курсов по CSS