Исполняемые доки HTML: Тег div

Q: Как поставить два div рядом?

Оберните их в родительский div и задайте ему display: flex. Дочерние элементы встанут в ряд. Добавьте gap для промежутка между ними и flex: 1 дочерним элементам, чтобы они поделили ширину поровну.

Q: Что использовать: div или section?

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

Что делает тег div

<div> (сокращение от division, «раздел») это универсальный контейнер. Он группирует элементы, чтобы стилизовать, располагать или обрабатывать их скриптом как единое целое. Сам по себе он никак не выглядит: ни отступов, ни рамки, ни особого шрифта. Это блочный элемент, поэтому он начинается с новой строки и растягивается на всю доступную ширину.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    div { border: 2px dashed #2563eb; padding: 8px; margin-bottom: 8px; }
  </style>
</head>
<body>
  <div>
    <h2>A group</h2>
    <p>The dashed border shows the div around the heading and this paragraph.</p>
  </div>
  <div>A second div starts on a new line.</div>
</body>
</html>

Удалите строку с border в стилях, и div станут невидимыми: так div выглядит по умолчанию. Весь его внешний вид задает CSS.

div class и id

Обычно div получает class, то есть имя, на которое нацелен ваш CSS. У div с одним классом одинаковый стиль:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div class</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; background: #f3f4f6; }
    .card { background: white; border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px; margin-bottom: 12px; }
    .card h3 { margin: 0 0 4px; }
    .card.highlight { border-color: #2563eb; box-shadow: 0 0 0 3px #bfdbfe; }
  </style>
</head>
<body>
  <div class="card">
    <h3>Basic</h3>
    <p>class="card"</p>
  </div>
  <div class="card highlight" id="pro">
    <h3>Pro</h3>
    <p>class="card highlight" and id="pro"</p>
  </div>
</body>
</html>

.card стилизует оба блока, а .card.highlight добавляет синюю обводку div, у которого есть оба класса. Используйте id, когда нужно указать на один конкретный div, например как на цель ссылки (href="#pro"). Подробное сравнение class и id есть на странице про атрибуты.

div в ряд

Div это блоки, поэтому они выстраиваются друг под другом. Чтобы поставить их в ряд, сделайте родителя flex-контейнером:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Divs side by side</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .row { display: flex; gap: 12px; }
    .col { flex: 1; padding: 12px; border-radius: 8px; background: #e5e7eb; }
    .col.wide { flex: 2; background: #dbeafe; }
  </style>
</head>
<body>
  <div class="row">
    <div class="col">One</div>
    <div class="col wide">Two (twice as wide)</div>
    <div class="col">Three</div>
  </div>
</body>
</html>

display: flex у .row выстраивает дочерние элементы в линию, gap задает промежутки, а значения flex делят ширину (здесь 1 : 2 : 1). Схема «родитель и дочерние элементы» это самое частое применение div на реальных сайтах. Про центрирование читайте на странице как отцентрировать div.

Вложенные div

Div может содержать другие div на любую глубину. Каждый уровень это блок внутри блока, и это видно, если дать каждому div рамку и внутренний отступ:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nested divs</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    div { border: 2px solid #2563eb; padding: 10px; }
    .page { background: #eff6ff; }
    .sidebar { background: #fef3c7; border-color: #f59e0b; }
    .content { background: white; margin-top: 8px; }
  </style>
</head>
<body>
  <div class="page">
    .page
    <div class="sidebar">.sidebar</div>
    <div class="content">
      .content
      <div>an inner div</div>
    </div>
  </div>
</body>
</html>

Делайте вложенность настолько неглубокой, насколько позволяет раскладка. Каждая лишняя обертка это еще один блок, о котором придется думать, когда отступ или ширина ведут себя не так, как вы ожидали.

div или семантический тег?

Div ничего не говорит о своем содержимом. В HTML есть теги, которые так же группируют элементы, но еще и сообщают, что это за группа:

Вместо	Используйте	Для чего
`<div class="header">`	`<header>`	Вступление или верхняя панель страницы или раздела
`<div class="nav">`	`<nav>`	Блок навигационных ссылок
`<div class="main">`	`<main>`	Основное содержимое, один раз на странице
`<div class="post">`	`<article>`	Самостоятельный элемент: пост, комментарий, карточка товара
`<div class="footer">`	`<footer>`	Подвал страницы или раздела

Пока вы их не стилизуете, эти теги выглядят в точности как div, но программы чтения с экрана их объявляют и позволяют переходить между ними, а поисковики читают структуру. Используйте div для блоков, которые нужны только для раскладки или стилей, как обертка .row выше. Весь набор описан на странице семантическая верстка.

div не кнопка

Div с обработчиком клика выглядит кликабельным для пользователя мыши, но пользователь клавиатуры не может до него добраться по Tab или нажать Enter, а программа чтения с экрана не объявляет его как кнопку:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div vs button</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .fake, button { display: inline-block; padding: 8px 14px; border-radius: 6px; border: 0; background: #2563eb; color: white; font: inherit; cursor: pointer; margin: 4px; }
  </style>
</head>
<body>
  <div class="fake" onclick="document.getElementById('out').textContent = 'div clicked'">div</div>
  <button onclick="document.getElementById('out').textContent = 'button clicked'">button</button>
  <p id="out">Click the preview, then press Tab: only the button gets focus.</p>
</body>
</html>

Используйте <button> для действий и <a href> для навигации. Оба получают фокус и работают с клавиатурой без дополнительного кода.

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

div внутри <p>. Абзац закрывается перед div. Сделайте div внешним элементом или используйте <span> внутри абзаца.
«Суп» из div. Страница только из div не имеет структуры для программ чтения с экрана. Замените div на <header>, <nav>, <main> и <footer> там, где они подходят.
Кликабельные div. Используйте <button> или ссылку.
Ожидание, что div будет шириной с текст. Div занимает всю ширину. Если нужно, чтобы он сжимался, используйте display: inline-block, width: fit-content или <span>.
Один id на нескольких div. Для всего повторяющегося используйте класс.

Часто задаваемые вопросы

Что такое div в HTML?

<div> это универсальный контейнер. Он группирует другие элементы, чтобы стилизовать или располагать их вместе, и собственного смысла у него нет: браузер показывает его как блок, который начинается с новой строки и занимает всю доступную ширину.

Что означает div class?

<div class="card"> это div с атрибутом class. Класс это имя, по которому CSS задает стиль (.card { ... }), а JavaScript находит элемент. Один класс может быть у многих div, а у одного div может быть несколько классов: class="card featured".

Как поставить два div рядом?

Оберните их в родительский div и задайте ему display: flex. Дочерние элементы встанут в ряд. Добавьте gap для промежутка между ними и flex: 1 дочерним элементам, чтобы они поделили ширину поровну.

Что использовать: div или section?

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

Можно ли вложить div в тег p?

Нет. Абзац может содержать только строчное содержимое. Браузер закрывает <p>, как только встречает <div>, и стили ломаются. Сделайте div внешним элементом или используйте <span> внутри абзаца.

Связанные концепции