HTML · справочник

Теги div и span

div и span — нейтральные контейнеры. Они ничего не сообщают о назначении содержимого, зато помогают объединить элементы для стилей или JavaScript.

Когда нужен div

div группирует несколько элементов в один блок. Например, внутри карточки можно собрать изображение, заголовок и описание, а затем оформить весь блок одним классом.

<div class="product-card">
  <img src="chair.jpg" alt="Синее кресло">
  <h2>Кресло</h2>
  <p>Мягкая модель для гостиной.</p>
</div>

Когда нужен span

span выделяет небольшой фрагмент внутри строки и не создаёт отдельный абзац. Его удобно использовать для цены, метки или части текста, которой нужен класс.

<p>Цена: <span class="price">4 990 ₽</span></p>

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

Если блок является навигацией, статьёй, секцией или подвалом, выбирай nav, article, section или footer. Нейтральный контейнер нужен, когда подходящего смыслового элемента действительно нет.

Частые ошибки

• Строить всю страницу только из div.
• Помещать блочные элементы внутрь span.
• Использовать span вместо ссылки или кнопки.
• Добавлять контейнер, который не нужен ни стилям, ни логике.

Связанные темы

Семантические теги · Тег section · Тег article