Элемент div

Элемент 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 слоев.