skip to main content

<div>

html

Кратко 🔗

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

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

Пример 🔗

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

<div class="container">
<p>
Привет, мы запихали текст в <code>&lt;div&gt;</code>,
а сам контейнер покрасили в серый.
</p>
</div>
.container {
padding: 8px 12px;
background-color: #e6e6e6;
}

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

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 большое количество специальных тегов для разных нужд.

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

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

Вадим,

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

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


Автор: Макс 👨‍🔧