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

Что такое
в HTML

В настоящее время все современные веб-сайты представляют собой четко определенные и организованные веб-страницы. Чтобы обеспечить лучшую читаемость и согласованность, они делят веб-страницу на множество разделов; следовательно, тег был назван <div>.

Начни Учить Full-Stack JavaScript СЕЙЧАС!

Каждый из этих разделов содержит связанные компоненты пользовательского интерфейса. В этом нам поможет HTML-тег <div>

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

Давайте быстро взглянем на пример HTML-документа, в котором есть один <div>:

<div>
  <h3> Personal Details </h3> 
  <br/>
  <label for="fullName">Full Name:</label> 
  <input type="text" id = "fullName" name="fullName"/>
  <br/>
  <label for="emailAddress">Email Address:</label> 
  <input type="email" id="emailAddress" name="emailAddress"/>
  <br/>
</div>

Здесь элемент <div> группирует все остальные теги HTML, связанные с личными данными пользователя.

Техническое объяснение

По определению <div> - это общая вкладка-контейнер, что означает, что она может содержать другие теги HTML.

Поскольку по умолчанию это блочный элемент, он перемещается в следующую строку и занимает всю горизонтальную ширину своего родительского элемента HTML.

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

Теперь давайте обсудим, где мы можем использовать тег <div> в HTML-документе:

  • Вы можете использовать теги <div> для создания современных макетах с двумя или тремя столбцами
  • Когда нам нужно применить одни и те же стили CSS к группе элементов, расположенных рядом
  • Сгруппировать связанные элементы для лучшего управления документооборотом

Избегайте чрезмерного использования
в HTML

Не менее важно проявлять осторожность при принятии решения об использовании тега <div> и не злоупотреблять им.

Например, многие разработчики используют тег <div> для создания разделов на веб-странице. Современный HTML предлагает для этого более подходящий тег <section>.

Чрезмерное использование тега <div> широко известно как Divitis. Как это определяет вики - «Практика создания кода веб-страницы с множеством элементов div вместо значимых семантических элементов HTML».

Таким образом, вам не следует использовать <div> там, где вы можете заменить его более подходящими тегами, такими как <section>, <article>, <nav>, <aside>, <header>, <footer>, которые были введены в HTML5.

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

Скачайте мою бесплатную электронную книгу чтобы подготовиться к собеседованию или начните учить Full-Stack JavaScript с нуля