Тег div (от английского division, «раздел») - универсальный блочный контейнер. Он собирает несколько элементов в один блок, чтобы к блоку можно было применить стиль, положение или скрипт. Сам по себе div ничего не значит и без стилей невидим: у него нет ни фона, ни рамки, ни отступов. Тег парный, закрывающий обязателен.
Проще всего div использовать, и потому его чаще всего берут не там, где надо. Если внутри собираются самостоятельная статья, раздел страницы или боковой блок, у них есть свои теги: article, section и aside. Если это обычный текст, нужен p, а часть строки оборачивают в span. Контейнер без смысла оставляют для случаев, когда подходящего тега нет.
<div class="card">
<p>Текст карточки</p>
</div>В этой статье
- Тег div в HTML: что это и для чего нужен
- Как использовать тег div: class, id, style и другие атрибуты
- Тег div блочный: ширина, высота, отступы и display
- Тег div внутри div, a, p и других тегов: что допустимо
- Тег div, p и span: чем отличаются
- Тег div и семантические теги: header, nav, main, footer и когда div нужен
- Тег div в CSS: цвет, фон, рамка, отступы и центрирование
- Тег div вместо кнопки и ссылки: почему не стоит, и добавление div скриптом
- Частые ошибки с тегом div
Тег div в HTML: что это и для чего нужен
Спецификация HTML описывает div как элемент без собственного смысла: он представляет своё содержимое и ничего к нему не добавляет. Внутри допустим блочный и строчный контент, а в dl тег служит обёрткой для пары dt и dd. Стандарт предлагает считать div элементом последней инстанции, когда подходящего тега нет.
Для чего нужен div. Первое - собрать элементы в блок для оформления: карточку, панель, колонку. Второе - выстроить макет: flex и grid в CSS применяют к контейнеру. Третье - найти блок из скрипта по class или id. Четвёртое - задать язык или направление сразу для группы абзацев через lang и dir.
Слова «без смысла» значат, что браузер не считает содержимое разделом, статьёй, навигацией или подвалом. Поэтому на вопрос «какие теги не имеют смысла согласно стандарту: div, article, section, span» верный ответ - div и span. Что делать, если смысл нужен, написано в разделе про семантические теги.
Как использовать тег div: class, id, style и другие атрибуты
Собственных атрибутов у div нет, только глобальные. Чаще всего нужны пять.
| Атрибут | Что делает | Пример |
|---|---|---|
class | Общий стиль или зацепка для многих блоков | <div class="card"> |
id | Уникальная метка для якоря или скрипта | <div id="offer"> |
style | Стиль прямо в теге, для разового случая | <div style="width: 200px"> |
lang | Язык сразу для группы абзацев | <div lang="en"> |
data-* | Данные для скрипта | <div data-id="42"> |
<div class="card" id="offer">
<p>Текст карточки</p>
</div>
<div lang="en">
<p>First paragraph.</p>
<p>Second paragraph.</p>
</div>Закрывающий тег обязателен: каждый открытый div нужно закрыть, иначе следующие блоки окажутся внутри незакрытого. Браузер закроет его сам в конце родителя: в замере <div>a<div>b</div> превратилось в <div>a<div>b</div></div>, но о месте ошибки не сообщит.
Атрибут align у div устарел и в HTML5 не допускается. Chrome его ещё понимает, но превращает в выравнивание текста: <div align="center"> центрирует текст внутри блока, а сам блок остаётся на всю ширину родителя. Для выравнивания блока используют CSS, способы разобраны в разделе про центрирование.
Тег div блочный: ширина, высота, отступы и display
По умолчанию div - блочный элемент (display: block): он начинается с новой строки, растягивается на всю ширину родителя, а высоту берёт по содержимому. В замере div в родителе шириной 300 px получил ширину 300 px и высоту 30 px, то есть одну строку текста.
| Свойство | Что происходит у div |
|---|---|
| Ширина | Как у родителя; заданная width действует |
| Высота | По содержимому; заданная height действует |
Пустой div | Высота 0, фон не виден |
| Вертикальные отступы соседей | Схлопываются: между отступами по 20 px получилось 20 px, а не 40 |
| Размер с padding и рамкой | При content-box ширина 100 px, padding 20 px и рамка 10 px дают 130 px; при border-box остаётся 100 px |
Пустой div без высоты не виден, даже если у него задан фон. Чтобы его увидеть, задают height или записывают в него содержимое. Строчным блок делает display: inline, но тогда width и height перестают действовать, и div ведёт себя как span. Проверьте режимы в кадре.
.box {
width: 120px;
height: 60px;
box-sizing: border-box;
}Пример: как ведёт себя div-блок
Выберите вариант. Кадр измеряет ширину и высоту div и расстояние между блоками.
Тег div внутри div, a, p и других тегов: что допустимо
Внутри div допустим блочный и строчный контент, в том числе другие div. Вложенные div - обычное дело: в замере три вложенных div остались без изменений. Но лишние обёртки ничего не дают и усложняют разметку.
div внутри p не допускается: абзац может содержать только строчный контент. Парсер закрывает абзац раньше: <p>a<div>b</div>c</p> превращается в <p>a</p><div>b</div>c<p></p>. Обратная запись, p внутри div, допустима.
div внутри a в HTML5 допустим: ссылка может оборачивать целый блок, например карточку. Между table и tr div записывать нельзя: в замере <table><div>x</div></table> браузер вынес div перед таблицей. Внутри ul, button и h1 стандарт div не допускает, но парсер оставляет запись как есть, поэтому ошибку видит только валидатор. В dl div допустим как обёртка для пары dt и dd.
Пример: как браузер разберёт вложенные теги
Выберите запись. Кадр показывает вашу разметку, разметку после разбора браузером и оценку по стандарту.
Тег div, p и span: чем отличаются
Три тега выглядят похожими, потому что без стилей просто показывают текст. Разница в том, что означает и как ведёт себя каждый.
| Признак | div | p | span |
|---|---|---|---|
| Смысл | Нет | Абзац текста | Нет |
| Тип | Блочный | Блочный | Строчный |
| Отступы по умолчанию | Нет | Есть вертикальные | Нет |
| Что можно вложить | Блочный и строчный контент | Только строчный контент | Только строчный контент |
| Для чего | Собрать блок из нескольких элементов | Абзац текста | Выделить фрагмент внутри строки |
Выбор такой: текст абзацем - p, блок из нескольких элементов - div, часть строки - span. Подробнее об отличии от span написано на странице про span, а об абзаце - на странице про p.
Тег div и семантические теги: header, nav, main, footer и когда div нужен
Раньше страницы собирали из div с классами header, menu, footer. В HTML5 для этого появились теги со смыслом. Их называют семантическими: браузер, поисковая система и вспомогательные технологии по ним понимают устройство страницы.
| Блок страницы | Какой тег вместо div |
|---|---|
| Шапка сайта | header |
| Меню | nav |
| Основное содержимое | main |
| Самостоятельная статья | article |
| Тематический раздел | section |
| Боковая колонка | aside |
| Подвал сайта | footer |
Заголовок тоже отмечают не div, а тегами h1 - h6. Блок с крупным шрифтом выглядит как заголовок, но для программ остаётся обычным блоком: так на вопрос, какой тег отвечает за заголовок для поисковой системы, ответ - h1, а не div.
Записывайте div там, где смысла нет: обёртка для стилей, колонка в сетке, карточка в списке, контейнер для скрипта. Проверьте в кадре, как меняется число блоков, которые понимает браузер.
Пример: div или тег со смыслом
Нажимайте на блоки. Кадр показывает разметку и число блоков, назначение которых понимает браузер.
Тег div в CSS: цвет, фон, рамка, отступы и центрирование
Внешний вид блока задают правила CSS: color для текста, background для фона, border для рамки, padding для внутренних отступов, margin для внешних, width и height для размеров. Правило лучше записывать для класса, а не для всех div страницы.
.card {
color: #1F2430;
background: #fff2c9;
border: 1px solid #b8b0a0;
padding: 12px;
width: 240px;
}Центрирование - частый вопрос, и ответ зависит от того, что центрировать. Блок по горизонтали центрирует margin: 0 auto при заданной ширине. Свойство text-align: center у родителя блок не сдвигает: оно центрирует текст и строчные элементы. Устаревший align действует как text-align. Для блока в центре родителя подходит flex: display: flex и justify-content: center.
.center {
width: 200px;
margin: 0 auto;
}Пример: способы центрирования div
Выберите способ. Кадр измеряет, оказался ли по центру родителя блок и текст внутри него.
Тег div вместо кнопки и ссылки: почему не стоит, и добавление div скриптом
Клик по div можно обработать скриптом, но это не превращает его в кнопку или ссылку. В замере div с обработчиком click сработал от мыши, но у него tabIndex равен -1: метод focus() фокус не дал, курсор остался обычным, а клавиша Tab пропустила его и перешла к настоящей кнопке. Читатель, который не пользуется мышью, до такого div не доберётся.
Поэтому для действия берут button, а для перехода - a с href. Если нужна ссылка вокруг целого блока, например карточки, в HTML5 можно обернуть div в a. Если div всё же нужен как элемент управления, ему добавляют tabindex="0", роль и обработку клавиш, но это лишняя работа по сравнению с button.
Создать div скриптом и добавить в другой блок можно методами createElement и append. Текст записывают свойством textContent: оно записывает строку как текст, а не как разметку.
const box = document.createElement('div');
box.className = 'card';
box.textContent = 'Новый блок';
document.querySelector('.list').append(box);Частые ошибки с тегом div
Ошибки с этим тегом связаны с выбором вместо семантических тегов, с вложенностью и с ожиданиями от блока.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
div вместо заголовка: <div class="title">Название</div> | Программы не считают блок заголовком, поисковая система теряет структуру | Использовать h1 - h6 |
Вся страница из div с классами header, menu, footer | Разметка разрастается, а назначения блоков программа не видит | Взять header, nav, main, footer и другие семантические теги |
div внутри p | Парсер закрывает абзац раньше: получается пустой p и лишний текст вне блока | Записывать div рядом с p или вокруг него |
text-align: center у родителя ради центрирования блока | Сдвигается текст, а блок остаётся на месте | Для блока: width и margin: 0 auto |
Пустой div с фоном без высоты | Высота 0, блок не виден | Задать height или записать содержимое |
Незакрытый <div> | Браузер закроет его в конце родителя, следующие блоки окажутся внутри | Закрывать каждый div и проверять вложенность |
div вместо кнопки: <div onclick="..."> | Клавиатурой его не активировать: он не получает фокус | Использовать button или a |
align="center" у div | Атрибут устарел: центрируется текст, а не блок | CSS: margin: 0 auto или flex |
Рамка и отступы без учёта box-sizing | При content-box ширина 100 px вместе с padding и рамкой даёт 130 px | Задать box-sizing: border-box |
