Что такое Div в HTML?

Последнее обновление Июл 13, 2021

Содержание

Где тег находится в HTML? Div помещаются в основной раздел HTML-файла. Это четко обозначено тегами . Чтобы создать элемент div, вы должны использовать открывающий и закрывающий теги. Вы можете разместить элементы, которые хотите сгруппировать, внутри этих тегов. Часто они будут иметь отступ, как показано ниже. <div class="myDiv"> <h2>This is a heading in a div element</h2> <p>This is some text in a div element.</p> </div> Разделение вашего HTML Div – это один из наиболее часто используемых элементов в HTML. Хотя он имеет несколько целей, его основная задача – группировать элементы HTML, чтобы вы могли стилизовать их с помощью CSS. Это делает элемент div полезным для настройки вашего веб-сайта, чтобы он выглядел именно так, как вы хотите. Самое приятное то, что им легко пользоваться. Источник записи: https://blog.hubspot.com

Разделение вашего HTML

Вы можете представить себе веб-страницу в трех основных частях. У вас есть верхний и нижний колонтитулы, а между ними – основная часть. Но, глядя на любую веб-страницу, вы можете увидеть, что тело также состоит из разделов. Скорее всего, там есть раздел для продуктов и услуг, отзывов, членов команды, контактной информации и многого другого.

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

Такое изменение стиля возможно из-за элемента разделения содержимого в HTML. Этот элемент, более известный как «div», может разделить вашу веб-страницу на разделы, чтобы вы могли настраивать их таргетинг с помощью уникальных свойств CSS.

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

Что такое тег div в HTML?

В HTML тег div представляет собой общий контейнер на уровне блока для других элементов.

Давайте посмотрим на несколько ключевых терминов в этом определении.

Во-первых, div – это «общий» контейнер, потому что он не описывает содержимое, которое он содержит. Другие элементы, такие как

и , четко описывают содержимое, которое они содержат, и известны как семантические элементы. По возможности всегда следует использовать семантический элемент поверх div.

Во-вторых, div – это контейнер уровня блока. Чтобы понять, что это означает, давайте сравним div с элементом span, который является встроенным контейнером. Есть несколько ключевых различий между контейнером на уровне блока и встроенным контейнером. Например, div всегда начинается в отдельной строке, а диапазон остается в строке (в строке – понятно?). Div также занимает всю ширину страницы, а диапазон – нет. Это означает, что если у вас есть несколько div подряд, они будут отображаться друг над другом на передней панели. С другой стороны, пролеты могут существовать бок о бок. Последнее важное отличие заключается в том, что вы можете определить высоту и ширину div, но не можете определить диапазон.

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

Что делает div?

Тег div технически ничего не делает. Это может помочь организовать HTML-файл в разделы на задней панели, но это не повлияет на то, как эти разделы отображаются на передней панели. Однако он позволяет легко стилизовать эти разделы с помощью CSS.

Чтобы стилизовать эти разделы с помощью CSS, вы должны добавить атрибут class или ID к элементу div. Затем вы будете использовать селектор CSS для применения уникальных свойств стиля к элементам, содержащимся в div.

Прежде чем мы погрузимся в пример с CSS, давайте сначала рассмотрим пример элемента div без стиля.

Вот HTML:

 
   <body>
<h1>What does the div element do?</h1>
<div>
  <h2>This is a heading in a div element</h2>
  <p>This is some text in a div element.</p>
</div>
<p>This is some text outside the div element. Notice how it looks the same as the other paragraph.</p>
</body>

Вот результат на передней панели:

Источник изображения

Теперь, когда вы знаете, что элемент div ничего не делает сам по себе, вам может быть интересно, зачем вы вообще его использовали. Ниже мы рассмотрим несколько вариантов использования.

Зачем использовать div в HTML?

Чаще всего вы будете использовать элемент div для группировки разделов кода, на которые вы хотите настроить таргетинг с помощью CSS. Вы можете стилизовать их так, чтобы они выглядели иначе, чем другие разделы на странице, или расположить их иначе. Вы также можете использовать атрибут div и language, чтобы изменить язык определенного раздела на странице.

Начнем с самого простого примера. Чтобы изменить язык определенного раздела на веб-странице, просто поместите элементы внутри div. Затем добавьте атрибут языка и установите для него нужный язык. Для этой демонстрации я установил французский язык.

Вот HTML:

 
   <body>
<h1>What does the div element do?</h1>
<div lang="fr">
  <h2>This is a heading in a div element</h2>
  <p>This is some text in a div element.</p>
</div>
<p>This is some text outside the div element. Notice how it looks the same as the other paragraph.</p>
</body>

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

Вы начнете тем же способом изменить стиль div, но вместо добавления языкового атрибута вы добавите атрибут ID или класса. Затем вы используете соответствующий селектор, чтобы добавить нужный CSS.

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

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

Вот CSS:

 
   .myDiv {
  border: 5px outset #660066;
  background-color: #888888;    
  text-align: center;
  color: #FFFFFF;
}

Вот HTML:

 
   <body>
<h1>What does the div element do?</h1>
<div class="myDiv">
  <h2>This is a heading in a div element</h2>
  <p>This is some text in a div element.</p>
</div>
<p>This is some text outside the div element. Like the first heading outside the div element, this paragraph is unstyled.</p>
</body>

Вот результат на передней панели:

Источник изображения

Теперь давайте посмотрим на пример, когда вы использовали бы div для изменения позиционирования или макета раздела вашей веб-страницы. Вы можете найти этот и многие другие примеры в посте «Вот разница между Flexbox, CSS Grid и Bootstrap».

Скажем, я хочу создать сетку flexbox с шестью столбцами. Я бы начал с создания шести элементов

, а затем разместил их внутри другого элемента

. Я бы добавил класс .flex-container к этому родительскому div.

Вот HTML:

 
   <body>
<h1>Flexbox Container</h1>
<p>Notice how the flex items shrink and expand as the browser is resized, but do not fill the entire container once the viewport exands beyond a particular point.</p>
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
</body>

Затем в разделе head моего документа или во внешней таблице стилей я бы использовал селектор классов .flex-container, чтобы сделать контейнер гибким. После установки для свойства display значение flex я бы указал высоту контейнера, а также цвет фона. Чтобы стилизовать элементы гибкости внутри контейнера, я бы использовал селектор .flex-container> div.

Вот CSS:

 
   .flex-container {
  display: flex;
  height: 250px;
  background-color: gray;
}
.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 60px;
  font-size: 48px;
}

Вот результат:

Источник изображения

Где тег

находится в HTML?

Div помещаются в основной раздел HTML-файла. Это четко обозначено тегами .

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

 
   <div class="myDiv">
  <h2>This is a heading in a div element</h2>
  <p>This is some text in a div element.</p>
</div>

Разделение вашего HTML

Div – это один из наиболее часто используемых элементов в HTML. Хотя он имеет несколько целей, его основная задача – группировать элементы HTML, чтобы вы могли стилизовать их с помощью CSS. Это делает элемент div полезным для настройки вашего веб-сайта, чтобы он выглядел именно так, как вы хотите. Самое приятное то, что им легко пользоваться.

Источник записи: https://blog.hubspot.com