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

<div>

Некоторые сайты на 99% состоят из этого элемента. Универсальный строительный блок без семантического значения.

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Элемент <div> группирует или оборачивает другие элементы и семантически ничего не значит. Сам по себе <div> без стилей ничего из себя не представляет — пользователь увидит пустое место на экране.

Можно представить этот тег как универсальную коробку. В неё можно положить что угодно или не класть ничего и просто оформить как нужно.

Пример

Секция статьи "Пример"

В этом примере абзац текста обёрнут в <div>, которому заданы внутренние отступы и фоновый цвет:

        
          
          <div class="container">  <p>    Мы поместили текст в <code>&lt;div&gt;</code>,    а сам контейнер покрасили в оранжевый.  </p></div>
          <div class="container">
  <p>
    Мы поместили текст в <code>&lt;div&gt;</code>,
    а сам контейнер покрасили в оранжевый.
  </p>
</div>

        
        
          
        
      
        
          
          .container {  background-color: #FF8630;  padding: 55px 40px;}
          .container {
  background-color: #FF8630;
  padding: 55px 40px;
}

        
        
          
        
      
Открыть демо в новой вкладке

Как это понять

Секция статьи "Как это понять"

Div — от английского division — раздел, секция.

Чтобы сделать что-нибудь полезное, надо обратиться к такому диву и добавить каких-нибудь стилей, обычно с помощью атрибута class, например: class="my-block" в HTML и .my-block в CSS. Можно задать ширину и отцентрировать всё содержимое. Или можно задать ему какие-нибудь наследуемые стили, вроде color: tomato или font-size: 20px, и тогда эти стили применятся ко всему содержимому этого дива.

Как пишется

Секция статьи "Как пишется"

Тег <div> парный, его всегда нужно закрывать </div>.

Подсказки

Секция статьи "Подсказки"

💡 У <div> блочные стили по умолчанию 🤓

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

💡 <div> — это универсальный блок, не несущий семантического смысла. По внешнему виду и поведению очень похож на семантические элементы: <header>, <main>, <footer> и другие. Если вы можете использовать семантический элемент и подсказать браузеру, что именно там находится, лучше использовать подходящий элемент, а не <div>.

На практике

Секция статьи "На практике"

Дока Дог советует

Секция статьи "Дока Дог советует"

🛠 Понять, как выглядит <div>, несложно — это всегда прямоугольник (или в частном случае квадрат), но начинающие верстальщики умудряются неслабо накосячить с этим тегом. Я постоянно вижу ошибки в структуре вложенности блоков <div> друг в друга.

🛠 Если провести аналогию между HTML-кодом сайта и человеком, то тег <body> — это всё тело. Например, у нас есть <div class="hand">, который обозначает руку. Логично, что внутри него должны быть <div class="finger">, внутри них <div class="nail">. Но некоторые умудряются сделать <div class="nail"> вложенным в <body> и потом подвинуть его рядом, чтобы выглядело, будто «ноготь» находится на «пальце». А на самом деле он откуда-то извне прилетел вообще — отдельно лежит «ноготь» и отдельно рядом «палец». Не надо так, соблюдайте структуру 💪🏻

Вадим Макеев советует

Секция статьи "Вадим Макеев советует"

🛠 <div> — самый простой и самый крутой тег во всём HTML: нет стилей — нет проблем. Если сильно извратиться, то можно написать целый сайт на одних дивах. Разве что ссылки и формы делать не всегда удобно. Даже доступность можно накрутить поверх дивов с помощью ARIA-атрибутов и кучи JS.

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

Алёна Батицкая советует

Секция статьи "Алёна Батицкая советует"

🛠 Начинающие разработчики часто заболевают болезнью под названием диватоз — всегда и везде используют <div>. На самом деле в HTML большое количество специальных тегов для разных нужд.

Например, для статей существует тег <article>, а для дополнительной информации тег <aside>. Они ведут себя и выглядят как <div>. Это тоже прямоугольники, в которые можно вкладывать другие блоки. Разница между ними в смысловой нагрузке.

Браузеру проще понимать, какой контент важен, когда HTML-разметка написана правильно, с использованием семантических тегов.