Тег <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.


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

<dl>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<option>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<ul>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<video>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<datalist>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<caption>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<ins>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023