Теги div и span — в чём разница

Справочник · HTML и CSS · 1 минута чтения

<div> и <span> — теги без собственного смысла: они ничего не сообщают о содержимом и нужны, чтобы сгруппировать элементы и оформить их в CSS. Разница — в том, как они ведут себя на странице:

Что	`<div>`	`<span>`
Вид элемента	блочный (`display: block`)	строчный (`display: inline`)
Где начинается	с новой строки	внутри строки текста
Ширина	на всю ширину родителя	по содержимому
`width`, `height`	работают	не работают
Для чего	блоки страницы: карточки, колонки, обёртки	кусочек текста: слово, цена, значок

HTML

<div class="card">
  <h2>Яблочный пирог</h2>
  <p>Время приготовления — <span class="time">1 час</span>.</p>
</div>

CSS

.card {
  padding: 16px;
  border: 1px solid #ddd;
}

.time {
  color: #c62828;
  font-weight: 700;
}

<div> здесь — рамка карточки, <span> выделяет цветом два слова, не разрывая строку.

Сначала — смысловые теги

Прежде чем ставить <div>, проверьте, нет ли тега по смыслу. Они ведут себя как <div>, но говорят поисковикам и программам чтения с экрана, что внутри:

Вместо `<div>` для…	Тег
шапки сайта	`<header>`
меню	`<nav>`
основного содержимого	`<main>`
раздела с заголовком	`<section>`
статьи, новости, карточки товара	`<article>`
боковой колонки	`<aside>`
подвала	`<footer>`

И для текста: важное — <strong>, ударение — <em>, а <span> — только когда нужен просто «крючок» для CSS или JavaScript. Страница, сплошь собранная из <div>, работает, но для поисковиков и программ чтения с экрана она менее понятна.

Что можно класть внутрь

В <div> — что угодно: текст, абзацы, списки, другие <div>, картинки.
В <span> — только строчное содержимое: текст, ссылки, <strong>, картинки. Блоки (<div>, <p>, списки) внутрь <span> класть нельзя.
<div> нельзя класть внутрь <p>: браузер закроет абзац перед <div> сам, и оформление разъедется.

Подводные камни

width у <span> не действует — это строчный элемент. Если нужен размер — display: inline-block.
Лишние <div> «на всякий случай» — каждый уровень вложенности усложняет CSS. Обёртка нужна, когда у неё есть задача: рамка, фон, раскладка Flexbox или Grid.
Вид меняется в CSS — display превращает <span> в блок, а <div> — в строчный элемент. Но выбирать тег по внешнему виду не нужно: тег — по смыслу, вид — в CSS.