Тег <div>
Описание
Тег <div> (от англ. "division" — раздел) является универсальным блочным контейнером для группировки элементов и применения стилей. Это нейтральный элемент без семантического значения.
<div>
<p>Это содержимое внутри div-контейнера</p>
<button>Кнопка</button>
</div>
<style>
.card {
border: 1px solid #ddd;
padding: 20px;
border-radius: 8px;
}
</style>
<div class="card">
<h3>Заголовок карточки</h3>
<p>Содержимое карточки</p>
</div>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.grid-item {
background: #f0f0f0;
padding: 20px;
}
</style>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</div>
Ключевые особенности:
- Блочный элемент (начинается с новой строки)
- Не имеет семантического значения
- Часто используется с атрибутами class и id
- Может содержать любые другие элементы
- Основной инструмент для CSS-верстки
Рекомендации по использованию:
- Используйте для группировки элементов и создания структуры
- Для семантических разделов предпочитайте теги вроде <section>, <article>
- Избегайте избыточного вложения div-элементов
- Сочетайте с современными CSS-технологиями (Flexbox, Grid)
Примеры применения:
- Создание каркаса страницы
- Группировка элементов для стилизации
- Построение сложных макетов
- Создание UI-компонентов
Тег <div> — фундаментальный строительный блок веб-страниц, обеспечивающий гибкость в структурировании контента.
Атрибуты
| accesskey | Определяет горячую клавишу для активации/фокусировки элемента |
| class | Задает один или несколько классов CSS для стилизации элемента |
| contenteditable | Указывает, может ли пользователь редактировать содержимое элемента |
| data-* | Используется для хранения пользовательских данных в элементах |
| dir | Определяет направление текста: слева направо (ltr) или справа налево (rtl) |
| hidden | Скрывает элемент, делая его невидимым и недоступным для пользователя |
| id | Уникальный идентификатор элемента в документе |
| lang | Определяет язык содержимого элемента |
| spellcheck | Указывает, должна ли проверяться орфография в содержимом элемента |
| style | Позволяет задавать CSS-стили непосредственно в атрибуте элемента |
| tabindex | Определяет порядок перехода между элементами при нажатии Tab |
| title | Задает всплывающую подсказку при наведении на элемент |
| translate | Указывает, должен ли переводиться текст внутри элемента |
| align | Определяет выравнивание содержимого (устарел в HTML5) |
Поддержка браузерами
 |
 |
 |
 |
 |
|---|---|---|---|---|
| 4.0 | 1.0 | 4.0 | 1.0 | 1.0 |