<div> Элемент разделения содержимого HTML

Элемент <div> HTML — это универсальный контейнер для потокового содержимого. Он не влияет на содержимое или макет, пока не будет оформлен с помощью CSS (например, к нему напрямую применены стили или к его родительскому элементу применена модель макета, такая как Flexbox).

Попробуйте

<div class="warning">
  <img
    src="/shared-assets/images/examples/leopard.jpg"
    alt="An intimidating leopard." />
  <p>Beware of the leopard</p>
</div>

.warning {
  border: 10px ridge red;
  background-color: yellow;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
}

.warning img {
  width: 100%;
}

.warning p {
  font: small-caps bold 1.2rem sans-serif;
  text-align: center;
}

Как «чистый» контейнер, элемент <div> сам по себе ничего не представляет. Вместо этого он используется для группировки содержимого, чтобы его можно было легко оформить с помощью атрибутов class или id, пометить раздел документа как написанный на другом языке (с помощью атрибута lang) и так далее.

Атрибуты

Этот элемент включает глобальные атрибуты.

Примечания по использованию

• Элемент <div> следует использовать только в том случае, если не подходит ни один другой семантический элемент, например <article> или <nav>.

Специальные возможности

Элемент <div> имеет неявную роль generic, а не отсутствие роли. Это может повлиять на некоторые объявления комбинаций ARIA, которым для правильной работы требуется элемент-потомок с определённой ролью.

Примеры

Простой пример

<div>
  <p>
    Any kind of content here. Such as &lt;p&gt;, &lt;table&gt;. You name it!
  </p>
</div>

Результат

Пример со стилями

В этом примере с помощью CSS для элемента <div> создаётся затенённый блок. Обратите внимание на атрибут class элемента <div>, который применяет к нему стиль с именем "shadowbox".

HTML

<div class="shadowbox">
  <p>Here's a very interesting note displayed in a lovely shadowed box.</p>
</div>

CSS

.shadowbox {
  width: 15em;
  border: 1px solid #333333;
  box-shadow: 8px 8px 5px #444444;
  padding: 8px 12px;
  background-image: linear-gradient(180deg, white, #dddddd 40%, #cccccc);
}

Результат

Техническая сводка

Спецификации

Совместимость с браузерами

См. также

• Семантические элементы разделов: <section>, <article>, <nav>, <header>, <footer>
• Элемент <span> для стилизации фразового содержимого