HTML тег <div>
Значение и применение
Теги <div> и
<span>
представляют из себя универсальные пустые контейнеры, которые необходимо заполнить каким-либо содержанием, либо
сгруппировать вложенные элементы для их дальнейшей стилизации средствами CSS, и при необходимости динамически
манипулировать ими с использованием скриптов, например, на таком языке программирования как Javascript.
Тег <div> определяет любой отдельный блок содержимого и предназначен для
деления веб-страницы на фрагменты. Вы можете объединить любой набор логически связанных элементов в
единственном блоке <div>.
Этот элемент является блочным и это означает, что при стандартном display: block его содержимое будет
начинаться с новой строки, при этом элемент занимает всю доступную ширину. Не так давно, этот элемент занимал
абсолютный топ, посвященный делению страницы на логические составляющие, но с приходом HTML 5 было добавлено
достаточно семантических элементов, которые позволяют в некоторых ситуациях заменить тег <div> на
более осмысленный.
Прочитать о разметке страницы в HTML вы можете в следующей статье учебника: "Теги разметки страницы".
В отличии от блочного элемента <div> тег
<span>
является строчным и применяется к внутренним (inline) элементам страницы, то есть к словам, фразам, которые
находятся в пределах абзаца или небольшого фрагмента текста, оглавления и тому подобное.
Тег
<span>
вы можете использовать для таких задач как:
- Выделение участка текста определённым цветом, фоном или даже фоновым изображением.
- Изменение отдельным словам или фразам размера шрифта, семейства шрифта или типа шрифта.
- Создание различных форматирующих стилей для выбранного участка текста.
- Использование скриптовых языков программирования к выбранным текстовым участкам, например подсветка синтаксиса кода и так далее.
Поддержка браузерами
Спецификация: multipage
Поддерживается во всех основных браузерах с 2015 года.
| Возможность | Компьютеры | Мобильные | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
 Chrome |  Edge |  Firefox |  Opera |  Safari | Chrome Android | Firefox for Android | Opera Android |  Safari on iOS |  Samsung Browser |  WebView Android | WebView on iOS | |
div | 1 | 12 | 1 | 15 | 1 | 18 | 4 | 14 | 1 | 1.0 | 4.4 | 1 |
align | 1 | 12 | 1 | 15 | 3 | 18 | 4 | 14 | 2 | 1.0 | 4.4 | 2 |
поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
align |
left
|
Не поддерживается в HTML5. Определяет выравнивание содержимого внутри элемента. |
Примеры, попробуйте сами
Контейнер для группы
Переместите абзац внутрь div и сравните оформление.
index.html
<div class="card">
<h2>Блокнот</h2>
<p>Товар в наличии.</p>
</div>
<p>Текст вне контейнера.</p>
style.css
.card {
padding: 16px;
border: 2px solid #35658a;
}
Тони готовит пример…Отличия HTML 4.01 от HTML 5
Атрибутalign не поддерживается в HTML5.
Значение CSS по умолчанию
div {
display: block;
}
Поддержка глобальных атрибутов
Элемент поддерживает "глобальные атрибуты".
Атрибуты событий
Элемент поддерживает "атрибуты событий".