HTML
Элемент Div

Вступление

Синтаксис

• <div>example div</div>

гнездование

Общепринятой практикой является размещение нескольких <div> внутри другого <div> . Обычно это называют «вложенными» элементами и позволяет дополнительно делить элементы на подразделы или помогать разработчикам с помощью стилей CSS.

<div class="outer-div"> используется для группировки двух элементов <div class="inner-div"> ; каждый из которых содержит элемент <p> .

<div class="outer-div">
  <div class="inner-div">
    <p>This is a paragraph</p>
  </div>
  <div class="inner-div">
    <p>This is another paragraph</p>
  </div>
</div>

Это даст следующий результат (стили CSS для ясности):

Вложение встроенных и блочных элементов. В то время как элементы вложенности вы должны иметь в виду, что есть встроенные и блокирующие элементы. в то время как элементы блока «добавляют разрыв строки в фоновом режиме», что означает, что другие вложенные элементы отображаются в следующей строке автоматически, встроенные элементы могут быть расположены рядом друг с другом по умолчанию

Избегайте глубокого гнезда <div>

Глубокие и часто используемые макеты вложенных контейнеров демонстрируют плохой стиль кодирования.

Закругленные углы или некоторые подобные функции часто создают такой HTML-код. Для большинства браузеров последнего поколения есть CSS3-аналоги. Постарайтесь использовать как можно меньше HTML-элементов для увеличения отношения контента к тегам и уменьшения загрузки страницы, что приведет к лучшему ранжированию в поисковых системах.

Элемент div Элемент должен быть не вложен глубже 6 слоев.

Основное использование

Элемент <div> обычно не имеет специфического семантического значения сам по себе, просто представляет собой разделение и обычно используется для группировки и инкапсуляции других элементов в документе HTML и разделения их на другие группы контента. Таким образом, каждый <div> лучше всего описывается его содержимым.

<div>
  <p>Hello! This is a paragraph.</p>
</div>

Элемент div обычно является элементом уровня блока , что означает, что он разделяет блок документа HTML и занимает максимальную ширину страницы. Браузеры обычно имеют следующее правило CSS по умолчанию:

div {
  display: block;
}

Это настоятельно рекомендуется консорциумом World Wide Web (W3C) для просмотра элемента div как элемента последней инстанции, поскольку ни один другой элемент не подходит. Использование более подходящих элементов вместо элемента div приводит к улучшению доступности для читателей и упрощению обслуживания для авторов.

Например, сообщение в блоге будет помечено с помощью <article> , главы с помощью <section> , навигационных средств страницы с использованием <nav> и группы элементов управления формой с помощью <fieldset> .

Элементы div могут быть полезны для стилистических целей или для обертывания нескольких абзацев внутри раздела, которые все должны быть аннотированы аналогичным образом.