Тег <​div​> в HTML: зачем он нужен и как работает

Большинство веб-страниц состоит из контейнеров, которые группируют элементы и управляют их расположением. Один из самых популярных — тег <​div​>. Если коротко, это универсальный контейнер для удобного управления стилями HTML-элементов.

Тег <​div​> (от division — секция, раздел) — блочный элемент HTML, который используется для создания контейнеров на веб-странице. Тег помогает структурировать контент: объединять текст, изображения, формы и другие элементы в логические блоки.

Содержание

• Зачем нужен <​div​> в языке HTML, какой у него базовый синтаксис и как его используют
• Как работают атрибуты <​div​>: стилизация, вложенность и другие особенности
• Советы и лайфхаки по использованию <​div​>
• Типичные ошибки при работе с <​div​>
• Практика: создание макетов с <​div​>, Flexbox и Grid Layout
• Домашнее задание

Зачем нужен тег <​div​>

Тег <​div​> — универсальный блочный контейнер, который не несёт семантического значения. В отличие от тегов вроде <article> или <section>, он ничего не говорит о смысле содержимого внутри. В контейнеры <​div​> можно положить что угодно: текст, картинки, другие теги, целые фрагменты интерфейса. Именно поэтому он используется как основной строительный блок вёрстки, особенно когда нужно сгруппировать элементы или задать им стили.

Использовать <​div​> в HTML-документе просто. Чтобы создать блочный контейнер, достаточно поместить контент между открывающим тегом <​div​> и закрывающим тегом </div>:

<​div​>
    <h1>Привет, Мир!</h1>
    <h2>Это пример контейнера <code>&lt;div&gt;</code>.</h2>
</div>

Вот так будет выглядеть в браузере приведённый выше пример кода:

На следующем изображении показана область, занимаемая тегом <​div​>. Обратите внимание на то, что сам контейнер по умолчанию невидимый:

Тег <​div​> — блочный элемент, как параграфы, списки, <pre>, заголовки или таблицы. Это значит, что блок <div​> занимает всю доступную ширину родительского элемента (по умолчанию 100% экрана). Если добавить ещё один блок <​div​> после предыдущего, он начнётся с новой строки:

<!-- Первый div -->
<​div​>
    <span>Это 1-й контейнер DIV</span>
</div>
<!-- Второй div -->
<​div​>
    <span>Это 2-й контейнер DIV</span>
</div>

Несмотря на то что в примере контент каждого из контейнеров заключён в строчные теги <span>, содержимое разных блоков <​div​> будет начинаться с новой строки.

Зоны разных тегов <​div​> на изображении для наглядности обведены разными цветами, а ширина страницы продлена до конца:

Комбинируя блоки <​div​>, можно строить любые макеты — от простых колонок до сложных интерфейсов. Этот тег позволяет группировать элементы, управлять их расположением и создавать документы со структурой любой сложности.

Раньше для сложных макетов часто использовали вложенные <​div​> с позиционированием и float, но сегодня в ходу более гибкие и удобные инструменты — CSS Grid и Flexbox. Они дают больше контроля над вёрсткой и избавляют от необходимости плодить лишние контейнеры.

Атрибуты тега <​div​>: стилизация, вложенность и другие особенности

Тег <​div​> поддерживает различные атрибуты, такие как id, class, style и другие. Вложенные <​div​> позволяют группировать элементы в сложные структуры.

Атрибут title

Атрибут title задает текст всплывающей подсказки, которая отображается при наведении курсора на содержимое контейнера:

<!-- Пример с title -->
<div title="Подсказка, привет!"> Основной текст </div>

Атрибуты id и class

Атрибут id — уникальный идентификатор элемента. Его используют как для стилизации с помощью CSS, так и для обращения к элементу по его id через JavaScript:

<!-- Пример с id -->
<div id="box01"> Какой-то контент 1 </div>

Атрибут class указывает имя одного или нескольких классов для контейнера. Классы используются для стилизации с помощью CSS, позволяя применять одинаковые стили к группе тегов <​div​>.

<!-- Пример с class -->
<div class="classA"> Какой-то контент 2 </div>
<!-- Пример с множеством class -->
<div class="classA classB classC"> Какой-то контент 3 </div>

Если нужно использовать несколько классов, просто перечислите их через пробел в значении атрибута class.

Атрибут contenteditable

Атрибут contenteditable позволяет пользователю редактировать содержимое элемента прямо на странице. Он принимает значения true (разрешает редактирование) и false (запрещает):

<div contenteditable="true">Имя: </div>

При наведении на содержимое элемента на веб-странице появится курсор. Пользователь сможет удалить существующий текст или ввести свой. Например: «My name is …»:

Атрибут style — стилизация тега <​div​> с помощью CSS

Элемент <​div​> можно стилизовать разными способами. Один из них — использование атрибута style. Например, добавим контейнеру рамку и зададим фон:

<!-- Красный контейнер с рамкой -->
<div style="background-color: red; border: solid;">
    Контейнер №1
</div>
<!-- Жёлтый контейнер с рамкой -->
<div style="background-color: yellow; border: solid;">
    Контейнер №2
</div>

Атрибут style позволяет применять CSS-стили напрямую к тегу, в нашем случае — к <​div​>. Например, свойство background-color задаёт цвет фона, а border: solid добавляет рамку. В примере используются цветовые константы red и yellow для фона контейнера:

Такой способ считается довольно топорным: он засоряет HTML-разметку и плохо масштабируется. Лучше выносить стили в CSS и использовать классы — это чище, гибче и проще в поддержке.

Вложенные теги <​div​>

Тег <​div​> может быть вложен в другой <​div​>, позволяя создавать многоуровневые структуры для более точного управления контентом. Один из способов стилизации — использование CSS-классов, которые задаются через атрибут class.

Рассмотрим пример такой структуры в HTML:

<div class="container"> 
    container
    <div class="header">Заголовок</div>
    <div class="content">
        content
        <div class="article">Статья 1</div>
        <div class="article">Статья 2</div>
        /content
    </div>
    <div class="footer">Подвал</div>
    /container
</div>

Используя селекторы классов в CSS, задаём разные цвета каждому блоку <​div​>:

.container { background-color: yellow; }
.header    { background-color: blue;   }
.content   { background-color: red;    }
.article   { background-color: white;  }
.footer    { background-color: green;  }

Таким образом, используя вложенные <​div​> и применяя к ним стили через CSS, мы создали базовую структуру веб-страницы:

Тег <​div​> помогает группировать элементы, но не всегда уместен. Важно понимать разницу между ним и семантическими тегами, а также знать, когда его использование оправданно, а когда лучше обойтись без него.

Отличие <​div​> от семантических тегов

Семантические теги — это контейнеры, которые сразу указывают на тип содержимого внутри. Они делают код понятнее, улучшают доступность и структурируют страницу. К таким тегам относятся <header>, <nav>, <article>, <footer> и другие.

Тег <​div​> не несёт семантической нагрузки — он просто создаёт блок без указания на его смысл.

Когда и почему не нужно использовать тег <​div​>

❌ Когда есть семантические теги (<header>, <section> или <article>).

Использование семантических тегов делает структуру кода более понятной как разработчикам, так и поисковым системам.

Пример архитектуры с использованием <​div​>:

<div class="header"> 
    <h1>Заголовок</h1>
</div>

<div class="main">
    <div class="article">
        <p>Содержимое</p>
    </div>
</div>

<div class="footer">
    <p>2025 Skillbox</p>
</div>

Пример той же архитектуры с семантическими тегами:

<header> 
    <h1>Заголовок</h1>
</header>

<main>
    <article>
        <p>Содержимое</p>
    </article>
</main>

<footer>
    <p>2025 Skillbox</p>
</footer>

❌ Когда элемент сам по себе несёт семантическую нагрузку (<button>, <a>, <form>).

Тег <a> — стандартный элемент для создания гиперссылок. Использовать <​div​> для этой цели тоже можно, но это нарушает логику HTML, усложняет код и ухудшает его доступность:

<div class="link" onclick="location.href='https://skillbox.ru'">
    Начать обучение
</div>

В таком случае лучше использовать созданный для гиперссылок тег <a>:

<a href="https://skillbox.ru">Начать обучение</a>

❌ Когда <​div​> используется «на всякий случай», без реальной нужды.

Такой подход загромождает код и усложняет его восприятие. Перед созданием нового <​div​> стоит проверить, нет ли более подходящего семантического тега или возможности обойтись без дополнительного контейнера.

Когда <​div​> точно нужен

✅ Когда нужно сгруппировать элементы и применить к ним общие стили или логику поведения.

С помощью <​div​> удобно сгруппировать элементы по их смыслу и как бы связать в единый объект. Например, это может быть карточка товара для маркетплейса либо карточка информации о пользователе.

<div class="card">
    <h2>Название</h2>
    <p>Описание карточки</p>
    <button>Действие</button>
</div>

✅ Когда нужно динамически управлять контейнером, используя JavaScript.

Пример ниже показывает, как удобно управлять контейнером <​div​> и его атрибутом id с помощью JavaScript в режиме реального времени:

<script>
    function test() {
        const container = document.getElementById('dynamic-container');
    // дальнейший код ...
    }
</script>

✅ При создании макетов — в связке с CSS Flexbox или CSS Grid Layout.

Поскольку <​div​> не несёт семантического значения, но является удобным контейнером, его часто используют в сочетании с CSS Flexbox и Grid Layout для создания адаптивных макетов.

Типичные ошибки при работе с тегом <div​>

Тег <​div​> — полезный инструмент для группировки элементов, но неправильное его использование может привести к проблемам. Чрезмерная вложенность, отсутствие семантики или идентификаторов усложняют код, делают его менее читаемым и затрудняют поддержку.

Вот типичные ошибки, которых стоит избегать:

• Создание спагетти из <​div​>.

<!-- История плохого кода -->

<​div​>
    <​div​>
        <​div​>
            <​div​>Слишком много вложенных div</div>
        </div>
    </div>
</div>

Такой код трудно читать, а менять и поддерживать его ещё сложнее.

• Чрезмерное использование <​div​> вместо семантических блоков.

<!-- История плохого кода — 2-->

<​div​>Название</div>
<​div​>Заголовок</div>
<​div​>Основной контент</div>
<​div​>Подвал</div>
<​div​>Уже и сам не помню, что это за семантический блок, 
оставлю div...</div>

Избыток <​div​> усложняет код, а также затрудняет дальнейшую стилизацию и ухудшает структуру страницы.

• Отсутствие классов и идентификаторов.

<!-- История плохого кода — 3-->

<​div​>Красное название</div> <!-- class? id? -->
<​div​> <!-- class? id? -->
     А тут красивый параграф
</div>
<​div​> <!-- class? id? -->
     Ещё один блок с красивой границей вокруг
</div>

Без классов и идентификаторов работать с <​div​> в CSS и JavaScript сложнее. В большом объёме кода это затрудняет стилизацию, усложняет поиск нужных элементов и может привести к дублированию.

Практика: создание макетов с <​div​>, Flexbox и Grid Layout

Сделаем два макета мини-маркетплейса. В первом создадим окно навигации, используя <​div​> и Flexbox, во втором — каталог товаров, оформленный с помощью Grid Layout.

Семантические теги в этой практике использовать не будем; наша задача — показать, как разные технологии CSS работают с <​div​>.

Упражнение 1: организуем навигацию с помощью <​div​> и Flexbox

Сначала соберём главное окно маркетплейса с логотипом и псевдонавигацией. Для этого создадим файл index.html и добавим следующий код:

<!DOCTYPE html>
<html lang="ru">
    <head>
        <title>Skillbox Marketplace</title>
        <meta charset="UTF-8">
        <!-- Подключаем стили CSS, которые будут добавлены далее --> 
        <link rel="stylesheet" href="nav.css">
    </head>
    <body>

        <!-- Логотип, первый контейнер -->
        <div class="logo">
            <p>Skillbox</p>
            <p>Marketplace</p>
        </div>

        <!-- Главное меню -->
        <!-- Да, это плохой код, но в рамках урока будем использовать контейнеры div -->
        <div class="main">
            <div class="menu">Главная</div>
            <div class="menu">Личный кабинет</div>
            <div class="menu">О нас</div>
        </div>
    </body>
</html>

Здесь два основных контейнера <​div​>: один для логотипа, другой — для навигации, и внутри него тоже используются <​div​>. В браузере этот код отобразится следующим образом:

Теперь создаём файл nav.css в той же папке, где находится HTML-документ, и добавляем стили для всех контейнеров <​div​>:

body {
    margin: 0; /* Убираем отступы вокруг страницы */
    background-color: #f0f0f0; /* Устанавливаем светло-серый цвет фона для страницы */
}
/* Стилизуем div-контейнер логотипа */
.logo {
    font-family: 'Arial', sans-serif; /* Шрифт для логотипа */
    font-size: 24px; /* Размер шрифта */
    font-weight: bold; /* Жирное начертание */
    color: #333; /* Цвет текста */
    text-transform: uppercase; /* Преобразуем текст в верхний регистр */
    letter-spacing: 2px; /* Пробел между буквами */
    background-color: #ffffff; /* Белый фон логотипа */
    padding: 10px 20px; /* Внутренние отступы вокруг текста */
}
/* Стилизуем общую разметку всех div-элементов внутри контейнера main с помощью Flexbox*/
.main {
    display: flex; /* Включаем Flexbox */        
    justify-content: space-around; /* Равномерно распределяем элементы по горизонтали */
    background-color: #333; /* Устанавливаем тёмно-серый цвет фона */
}
/* Стилизуем текст div-элементов контейнеров menu */
.menu {
    color: white; /* Устанавливаем белый цвет текста для ссылок */
    text-decoration: none; /* Убираем подчёркивание у ссылок */
}

Обратите внимание на свойство display в селекторе .main. По умолчанию у <div> значение display: block, из-за чего он занимает всю ширину экрана. В этом упражнении мы меняем его поведение, используя Flexbox.

Такой метод позволяет выстраивать элементы как по вертикали, так и по горизонтали, делая разметку более гибкой. Вот результат стилизации контейнера <​div​> с помощью Flexbox:

Упражнение 2: делаем карточки товаров с помощью <​div​> и Grid Layout

Теперь создаём каталог товаров. Для этого добавляем новый файл, например product.html, и вставляем следующий HTML-код:

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="UTF-8">
        <title>Skillbox Marketplace 2</title>
        <!-- Подключаем стили CSS, которые будут добавлены далее --> 
        <link rel="stylesheet" href="product.css">
    </head>
    <body>

        <!-- Родительский div-grid-контейнер --> 
        <div class="grid-container">
         
            <!-- Дочерние div-grid-контейнеры --> 
            <!-- Первая карточка --> 
            <div class="product">
                <div class="img">Изображение 1</div>
                <h2>Продукт 1</h2>
                <p>Цена: 100 рублей</p>
            </div>
            <!-- Вторая карточка --> 
            <div class="product">
                <div class="img">Изображение 2</div>
                <h2>Продукт 2</h2>
                <p>Цена: 200 рублей</p>
            </div>
        </div>
    </body>
</html>

В этом коде есть родительский контейнер <​div​>, внутри которого находятся дочерние <​div​>. Каждый из них содержит одинаковую структуру: изображение (в примере это тоже <​div​>), название <h2> и цену <p>. Без CSS в браузере всё отобразится следующим образом:

Создаём файл product.css в той же папке, где находится HTML-документ. Затем добавляем в него код для подключения Grid Layout:

/* Подключаем Grid Layout и настраиваем его */
.grid-container {
    display: grid; /* Включаем Grid Layout */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Автоматическое заполнение колонок */
    gap: 15px; /* Промежутки между элементами */
    padding: 20px; /* Внутренние отступы вокруг текста */
    max-width: 1000px; /* Максимальная ширина сетки */
    margin: auto; /* Центрируем сетку на странице */
}
/* Стилизуем общую карточку */
.product {
    background-color: white; /* Добавление фона */
    border: 1px solid #ccc; /* Добавление рамки */
    border-radius: 10px; /* Добавление округления рамки */ 
    padding: 10px; /* Добавление отступов */
    text-align: center; /* Центрируем текст внутри карточки */
}
/* Стилизуем макет изображения */
.product .img {
    width: 100%; /* Изображение занимает всю ширину карточки */
    border-radius: 10px; /* Закругление углов изображения */
    background-color: yellow; /* Добавление жёлтого фона */
}

Такой подход позволяет размещать <​div​> как по вертикали, так и по горизонтали, обеспечивая удобное расположение элементов.

Упражнения для тренировки

Закрепим всё, что прошли. Ниже — домашка из четырёх небольших заданий, где вам предстоит собрать простую страницу с навигацией и каталогом товаров, постепенно усложняя структуру карточек и управляя расположением элементов. Это важно сделать перед тем, как перейти к более сложным макетам.

Задание 1: объединяем предыдущий код

Объедините код двух предыдущих упражнений, добавив навигацию и каталог товаров. Это задание — мини-макет реального сайта, позволяющий закрепить навык работы с несколькими секциями на странице. Поможет вам лучше понять, как компоненты взаимодействуют между собой, как управлять их расположением с помощью Flexbox и Grid, и как собирать интерфейс из блоков.

Задание 2: меняем направление контейнеров

Измените направление контейнеров <​div​> в навигации на вертикальное. На практике это применяется, если навигация расположена сбоку — например, в боковой панели или мобильной версии сайта. Помогает компактно разместить пункты меню и упростить восприятие интерфейса.

Задание 3: усложняем структуру карточек

Добавьте внутри карточек новые <​div​> — например, для рейтинга товара или для кнопки «Добавить в корзину». Рейтинг, кнопки, подписи — типичные элементы интерфейса. Усложняя структуру, вы научитесь правильно организовывать разметку и управлять её отображением с помощью CSS.

Задание 4: экспериментируем с новыми карточками

Создайте 9–10 дополнительных карточек и поэкспериментируйте с их расположением в Grid Layout. Когда карточек больше, становится видно, как адаптируется сетка: куда перетекают блоки, как они выстраиваются по строкам и колонкам. Такой эксперимент — простой способ освоиться с поведением сетки в реальных интерфейсах.