<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> — используется для определения содержимого, которое по касательной связано с основным содержимым веб-страницы.