<div>
- 25 января 2023
Тег <div>
определяет раздел или секцию в HTML-документе. Это контейнер, который используется для группировки других элементов, таких как текст, изображения или другие теги, в разделы или блоки.
Синтаксис тега <div>
<div>
// какой-нибудь контент
</div>
Спецификация HTML
Тег является частью спецификации HTML Living Standard.
Семантический или нет
Тег не считается семантическим, так как не придает никакого конкретного значения содержимому.
Примеры использования
Создание раздела веб-страницы:
<div class="section">
<h2>Заголовок секции</h2>
<p>Какое-нибудь содержимое секции</p>
</div>
Группировка элементов формы:
<div class="form-group">
<label for="username">Username:</label>
<input type="text" id="username" name="username">>
</div>
Создание панели навигации:
<div class="nav-bar">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</div>
Для чего использовать тег <div>
- для объединения связанных элементов в группы;
- для создания раздела или блока содержимого;
- для применения стилей к определенному разделу содержимого;
- для создания сетки макета;
- для создания контейнера для кода JavaScript или CSS;
- для создания многократно используемого компонента или виджета;
- чтобы обернуть содержимое для использования с плагинами JavaScript или jQuery.
Атрибуты тега <div>
У тега <div>
нет специфических контентных атрибутов, но он поддерживает базовые атрибуты для стилизации.
Атрибут | Значение | Пример синтаксиса | Значение по умолчанию | Возможные значения | Обязательный или нет |
---|---|---|---|---|---|
class | Задает одно или несколько имен классов для элемента | <div class="example"> | Нет | Любое допустимое имя класса | Нет |
ID | Указывает уникальный идентификатор для элемента | <div id="example"> | Нет | Любое допустимое имя идентификатора | Нет |
style | Указывает встроенные CSS стили для элемента | <div style="color:red;"> | Нет | Любой допустимый CSS стиль | Нет |
title | Указывает дополнительную информацию об элементе | <div title="Example"> | Нет | Любой допустимый текст | Нет |
Глобальные атрибуты
Тег поддерживает все глобальные атрибуты HTML.
Ограничения
Если вы используете слишком много тегов <div>
для обёртывания содержимого, код может стать громоздким и трудночитаемым. В этом случае лучше использовать семантические теги <section>
или <article>
.
Поддержка браузеров
Тег поддерживается всеми современными браузерами.
Актуальная информация — на сaniuse.
Альтернативные теги
Существует несколько альтернативных тегов, которые вы можете использовать вместо тега <div>
, в зависимости от конкретного случая использования:
<section>
— используется для определения раздела веб-страницы;<article>
— используется для определения статьи или сообщения в блоге;<nav>
— используется для определения навигационной панели;<aside>
— используется для определения содержимого, которое по касательной связано с основным содержимым веб-страницы.
Актуальность
Тег <div>
не устарел и может использоваться в веб-разработке.
Хотите узнать больше об HTML-тегах?
Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023