Элемент div
в HTML является контейнером, который содержит другие элементы и может использоваться для группировки и разделения частей веб-страницы. Сам по себе этот элемент не представляет ничего, но является мощным инструментом в веб-дизайне. В этом разделе описывается назначение и применение элемента div
.
Элемент <div>
, как правило, не имеет особого семантического значения, а просто представляет собой разделение и обычно используется для группировки и инкапсуляции различных элементов в документе HTML и разделения их на группы контента. Таким образом, каждый элемент <div>
лучше всего описывается его содержимым.
<div>
<p>Привет! Это абзац.</p>
</div>
Элемент div
обычно является блочным элементом, т.е он разделяет документ HTML на блоки и занимает максимальную ширину страницы. По умолчанию браузеры используют следующее CSS правило:
div {
display: block;
}
Консорциумом World Wide Web (W3C) рекомендует использовать элемент div
, если другие элементы не подходят. Применение более подходящих элементов вместо элемента div
улучшает код и упрощает его обслуживание.
Например, сообщение в блоге правильно выделять с помощью <article>
, главы - с помощью <section>
, навигационных средств страницы - с использованием <nav>
, а группы элементов управления формы - с помощью <fieldset>
.
Элементы div
могут быть полезны для стилистических целей или для обертывания нескольких абзацев внутри раздела, которые все должны быть однотипно оформлены.
Общепринятой практикой является размещение внутри одного <div>
нескольких других <div>
. Обычно такие элементы называют «вложенными». Они позволяют дополнительно делить элементы на подразделы или помогать разработчикам со стилизацией с помощью CSS.
Элемент <div class = "outer-div">
используется для группировки двух элементов <div class = "inner-div">
, каждый из которых содержит элемент <p>
.
<div class="outer-div">
<div class="inner-div">
<p>Это абзац</p>
</div>
<div class="inner-div">
<p>Это другой абзац</p>
</div>
</div>
Это даст следующий результат (стили CSS добавлены для наглядности):
Это абзац
Это другой абзац
При использовании вложенных элементов вы должны помнить, что есть строчные (или встроенные - inline) и блочные (block) элементы. Блочные элементы в фоновом режиме добавляют разрыв строки, т.е. другие вложенные элементы автоматически отображаются в следующей строке, строчные элементы по умолчанию располагаются рядом друг за другом.
Избегайте глубокой вложенности <div>
.
Глубокая и часто используемая вложенность контейнеров демонстрируют плохой стиль кодирования.
Закругленные углы и некоторые подобные функции часто создают такой HTML-код. Для большинства браузеров последнего поколения есть CSS3-аналоги. Постарайтесь использовать как можно меньше HTML-элементов для увеличения отношения контента к тегам и уменьшения загрузки страницы, что приведет к лучшему ранжированию в поисковых системах.
Элемент div
должен быть вложен не глубже 6 слоев.