HTML тег <div>
Узнайте, как использовать тег <div> для группировки HTML-элементов и их стилизации с помощью CSS. Примеры атрибутов class, id, style и других.
Тег <div> — это контейнер, предназначенный для определения раздела или секции. Это блочный элемент, который сам по себе не влияет на содержимое, но используется главным образом для группировки HTML-элементов с целью их стилизации с помощью CSS или обработки скриптами.
Поскольку <div> является блочным элементом, каждый такой элемент начинается с новой строки и растягивается на всю доступную ширину. Он не несёт никакого семантического смысла — это обычный универсальный блок. Используйте <div> для группировки блочного содержимого; для группировки или стилизации строчного содержимого (нескольких слов внутри предложения) лучше воспользоваться строчным аналогом — тегом <span>.
Позиционирование блоков, определяемых тегом <div>
Так как <div> является блочным элементом, перед ним и после него автоматически вставляется перенос строки.
Внутрь тега <div> можно помещать любые HTML-элементы, включая другой <div>.
Блочные элементы, такие как <div>, нельзя вкладывать внутрь тегов <p>: абзац будет разбит в том месте, где встречается тег <div>.
Для применения стилей внутри абзаца используйте тег <span>, который предназначен для строчных элементов.
Синтаксис
Тег <div> является парным. Содержимое записывается между открывающим (<div>) и закрывающим (</div>) тегами.
Пример HTML-тега <div>:
Пример HTML-тега <div>
<!DOCTYPE html>
<html>
<head>
<title>The <div> Tag</title>
</head>
<body>
<h1> The <div> Tag </h1>
<div style="background-color:#8ebf42">
<p>We use the <div> tag to group two paragraphs for applying a background to the text, and to add color to this
<span style="color:#1c87c9">word</span> we place it within <span> tag.</p>
<p> Pay attention, that the <div> tag is a block-level element, so a line break is placed before and after
it.</p>
</div>
</body>
</html><div> и семантические элементы
<div> — подходящий инструмент, когда нужен лишь универсальный блок для применения стилей или скриптов. Но если блок представляет смысловую область страницы — навигацию, заголовок, статью — предпочтите соответствующий семантический элемент HTML5. Семантические теги описывают что именно содержится внутри, что помогает поисковым системам, программам чтения с экрана и другим разработчикам понимать структуру разметки.
Сравните одну и ту же структуру, написанную двумя способами:
<!-- Before: generic divs, no meaning -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="main">...</div>
<div class="footer">...</div>
<!-- After: semantic elements, self-describing -->
<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>По умолчанию оба варианта отображаются одинаково, однако второй значительно доступнее и удобнее в сопровождении.
Остерегайтесь «div-супа». Обёртывание всего в вложенные элементы <div> — <div class="nav">, <div class="header"> и так далее — приводит к разметке, которую сложно читать, а вспомогательные технологии не получают от неё никакой полезной информации. Прежде чем добавить <div>, подумайте, не подойдёт ли лучше <nav>, <header>, <main>, <article>, <section> или <footer>.
<div> и <span>
Теги <div> и <span> — оба являются универсальными, лишёнными семантики контейнерами; разница между ними — в типе создаваемого блока:
<div>— блочный элемент. Начинается с новой строки, занимает всю доступную ширину и используется для группировки крупных фрагментов содержимого (абзацев, списков, других div).<span>— строчный элемент. Располагается в строке текста и используется для стилизации или выделения небольшого фрагмента содержимого — слова или фразы.
<p>The word <span style="color:#1c87c9">highlighted</span> sits inside the text flow.</p>
<div style="background-color:#8ebf42">
<p>This whole block is grouped and given a background.</p>
</div>Простое правило: используйте <div> для группировки блочного содержимого, а <span> — для обёртывания строчного содержимого.
При построении макетов приходится работать с множеством блоков, заданных тегом <div>. Позиционирование этих блоков лежит в основе вёрстки: правильное расположение элементов относительно друг друга на всех размерах экрана — одна из важнейших задач.
В зависимости от содержимого и целей страницы можно применять различные техники (или их комбинации) для определения положения каждого блока. Для современных макетов в первую очередь следует использовать CSS Grid (для двумерных макетов с рядами и колонками) и Flexbox (для одномерных рядов или колонок). Более старые техники, описанные ниже, — float, отрицательные отступы и абсолютное позиционирование — по-прежнему работают, но сегодня редко являются лучшим выбором.
CSS Grid
CSS Grid — это современный стандартный способ создания двумерных макетов, то есть макетов, в которых блоки <div> располагаются одновременно в рядах и колонках. Вы определяете сетку на контейнере с помощью display: grid и описываете её дорожки, после чего дочерние блоки автоматически заполняют ячейки.
Пример HTML-тега <div> с CSS Grid:
Пример HTML-тега <div> с CSS Grid
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
padding: 10px;
background-color: #1faadb;
}
.grid-container > div {
height: 60px;
border-radius: 3px;
background-color: #8ebf42;
}
</style>
</head>
<body>
<div class="grid-container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>Одна запись grid-template-columns: 1fr 1fr 1fr создаёт три равные колонки, а шесть блоков <div> автоматически переносятся в два ряда.
Flexbox
Когда нужно расположить элементы только по одной оси — в ряд или в колонку — Flexbox является наиболее подходящим инструментом. На современных сайтах макеты на основе float заменяются Flexbox и Grid. Главная идея Flexbox состоит в том, что с его помощью можно управлять выравниванием, направлением, порядком и размером элементов внутри контейнера.
Пример Flexbox с HTML-тегом <div>:
Пример HTML-тега <div> с Flexbox
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
align-items: center; /* Use another value to see the result */
width: 100%;
height: 200px;
background-color: #1faadb;
}
.flex-container > div {
width: 25%;
height: 60px;
margin: 5px;
border-radius: 3px;
background-color: #8ebf42;
}
</style>
</head>
<body>
<div class="flex-container">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>Свойство CSS float
Свойство CSS float, или «плавающие» элементы, позволяет размещать элементы рядом друг с другом или отдельно, что даёт возможность создавать различные типы макетов, включая многоколоночные страницы, боковые панели, сетки и т.д.
Пример HTML-тега <div> со свойством CSS float:
Пример HTML-тега <div> со свойством CSS float
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.content {
overflow: auto;
border: 3px solid #666;
}
.content div {
padding: 10px;
}
.content a {
color: darkblue;
}
.blue {
float: right;
width: 45%;
background-color: #1faadb;
}
.green {
float: left;
width: 35%;
background-color: #8ebf42;
}
</style>
</head>
<body>
<div class="content">
<div class="blue">
<p>This is some paragraph inside div tag.</p>
<a href="#">This is some hyperlink inside div tag.</a>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</div>
<div class="green">
<p>This is some paragraph inside div tag.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
</ol>
</div>
</div>
</body>
</html>Результат
Отрицательные отступы (устаревшая техника)
Отрицательные отступы можно применять как к статическим, так и к плавающим элементам, чтобы сдвигать блоки ближе друг к другу или делать их перекрывающимися.
Пример с отрицательными отступами:
Пример HTML-тега <div> с отрицательными отступами
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.content div {
padding: 2%;
}
.content a {
color: darkblue;
}
.main-content {
width: 30%;
margin-left: 32%;
}
.blue {
width: 25%;
margin-top: -10%;
background-color: #1faadb;
}
.green {
width: 20%;
margin: -35% auto auto 70%;
background-color: #8ebf42;
}
</style>
</head>
<body>
<div class="content">
<div class="main-content">
<a href="#">This is some hyperlink inside div tag.</a>
</div>
<div class="blue">
<p>This is some paragraph inside div tag.</p>
<a href="#">This is some hyperlink inside div tag.</a>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</div>
<div class="green">
<p>This is some paragraph inside div tag.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
</ol>
</div>
</div>
</body>
</html>Позиционирование relative+absolute
Если нужно расположить div относительно конкретного элемента, можно использовать комбинацию position: relative и position: absolute.
Пример позиционирования relative+absolute для HTML-тега <div>:
Пример HTML-тега <div> со свойством CSS position
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.content {
position: relative;
height: 400px;
border: 1px solid #666;
}
.content div {
position: absolute;
width: 35%;
padding: 10px;
}
.blue {
right: 20px;
bottom: 0;
background-color: #1faadb;
}
.green {
top: 10px;
left: 15px;
background-color: #8ebf42;
}
</style>
</head>
<body>
<div class="content">
<div class="blue">
<p>This is some paragraph inside div tag.</p>
</div>
<div class="green">
<p>This is some paragraph inside div tag.</p>
</div>
</div>
</body>
</html>position: relative не влияет на позиционирование элементов в нормальном потоке, если не добавить смещения.
Атрибуты
Тег <div> не имеет собственных атрибутов. На практике он использует глобальные атрибуты — чаще всего id, class, style, data-* и aria-* — для стилизации, скриптинга или обеспечения доступности. Также поддерживаются атрибуты событий.
| Атрибут | Значение | Описание |
|---|---|---|
| align | left right center justify | Устарел. Использовался для выравнивания содержимого внутри тега <div>. Не поддерживается в HTML5 — вместо него используйте свойство CSS text-align. |