Кратко
СкопированоЭлемент <div> группирует или оборачивает другие элементы и семантически ничего не значит. Сам по себе <div> без стилей ничего из себя не представляет — пользователь увидит пустое место на экране.
Можно представить этот тег как универсальную коробку. В неё можно положить что угодно или не класть ничего и просто оформить как нужно.
Пример
СкопированоВ этом примере абзац текста обёрнут в <div>, которому заданы внутренние отступы и фоновый цвет:
<div class="container"> <p> Мы поместили текст в <code><div></code>, а сам контейнер покрасили в оранжевый. </p></div>
<div class="container">
<p>
Мы поместили текст в <code><div></code>,
а сам контейнер покрасили в оранжевый.
</p>
</div>
.container { background-color: #FF8630; padding: 55px 40px;}
.container {
background-color: #FF8630;
padding: 55px 40px;
}
Как понять
СкопированоDiv — от английского division — раздел, секция.
Чтобы сделать что-нибудь полезное, надо обратиться к такому диву и добавить каких-нибудь стилей, обычно с помощью атрибута class, например: class в HTML и .my в CSS. Можно задать ширину и отцентрировать всё содержимое. Или можно задать ему какие-нибудь наследуемые стили, вроде color или font, и тогда эти стили применятся ко всему содержимому этого дива.
Как пишется
СкопированоТег <div> парный, его всегда нужно закрывать <.
Подсказки
Скопировано💡 У <div> блочные стили по умолчанию 🤓
💡 Важно помнить, что <div> без содержимого и стилей не видно на экране. По умолчанию он растянется на всю ширину родителя, но не будет иметь высоты, если только у него нет внутренних отступов. Положите внутрь контент или задайте стили, чтобы блок расправился по высоте.
💡 <div> — это универсальный блок, не несущий семантического смысла. По внешнему виду и поведению очень похож на семантические элементы: <header>, <main>, <footer> и другие. Если вы можете использовать семантический элемент и подсказать браузеру, что именно там находится, лучше использовать подходящий элемент, а не <div>.
На практике
Скопированосоветует
Скопировано🛠 Понять, как выглядит <div>, несложно — это всегда прямоугольник (или в частном случае квадрат), но начинающие верстальщики умудряются неслабо накосячить с этим тегом. Я постоянно вижу ошибки в структуре вложенности блоков <div> друг в друга.
🛠 Если провести аналогию между HTML-кодом сайта и человеком, то тег <body> — это всё тело. Например, у нас есть <div class, который обозначает руку. Логично, что внутри него должны быть <div class, внутри них <div class. Но некоторые умудряются сделать <div class вложенным в <body> и потом подвинуть его рядом, чтобы выглядело, будто «ноготь» находится на «пальце». А на самом деле он откуда-то извне прилетел вообще — отдельно лежит «ноготь» и отдельно рядом «палец». Не надо так, соблюдайте структуру 💪🏻
советует
Скопировано🛠 <div> — самый простой и самый крутой тег во всём HTML: нет стилей — нет проблем. Если сильно извратиться, то можно написать целый сайт на одних дивах. Разве что ссылки и формы делать не всегда удобно. Даже доступность можно накрутить поверх дивов с помощью ARIA-атрибутов и кучи JS.
Но лучше не имитировать встроенные в HTML теги. Во-первых, это очень сложно. Браузеры делают много полезной магии, особенно с интерактивными элементами. Во-вторых, важно понимать, что некоторые из них могут принести неочевидную пользу для сайта: быстрее загрузка, понятнее поисковикам, доступнее скринридерам, лучше в режимах для чтения и так далее.
советует
Скопировано🛠 Начинающие разработчики часто заболевают болезнью под названием диватоз — всегда и везде используют <div>. На самом деле в HTML большое количество специальных тегов для разных нужд.
Например, для статей существует тег <article>, а для дополнительной информации тег <aside>. Они ведут себя и выглядят как <div>. Это тоже прямоугольники, в которые можно вкладывать другие блоки. Разница между ними в смысловой нагрузке.
Браузеру проще понимать, какой контент важен, когда HTML-разметка написана правильно, с использованием семантических тегов.
Читайте также
-
Поток документа
Объяснение одной из основных концепций вёрстки и её составляющих: контекста форматирования, схлопывания отступов и выхода из потока.
-
Блочная модель
Браузеры рисуют любой элемент на HTML-странице как прямоугольник. Как рассчитывается размер этого прямоугольника? Разберёмся с одной из основных концепций вёрстки.