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

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

Как «чистый» контейнер, элемент <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>

Результат

В этом примере создается затенённый прямоугольник путем применения стиля к элементу <div> с помощью CSS. Обратите внимание на использование атрибута 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 #333;
  box-shadow: 8px 8px 5px #444;
  padding: 8px 12px;
  background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
}

Результат

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