Контейнеры: теги <div> и <span> и их роль в разметке

Почему нужны контейнеры?

Представьте, что HTML — это стройка 🏗️. Теги <div> и <span> — это универсальные контейнеры, как коробки или ящики для инструментов. Они помогают группировать элементы, управлять стилями и создавать структуру, когда нет подходящего семантического тега (например, <article> или <nav>).

Ключевая разница:
- <div> — блочный элемент (занимает всю ширину, переносит содержимое на новую строку).
- <span> — строчный элемент (встраивается в текст, не нарушая поток).

Тег <div> — строительный блок страницы

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

<div class="user-card">
  <h3>Анна Ковалёва</h3>
  <p>Frontend-разработчик</p>
  <button>Написать</button>
</div>

Что произошло?
- Мы объединили заголовок, текст и кнопку в логический блок.
- Теперь можно стилизовать всю карточку целиком (например, добавить рамку или тень через CSS).

Пример из жизни:
Верстаем ленту новостей. Каждая новость — это <div> с внутренними элементами (<h2>, <p>, <img>).

Тег <span> — точечный акцент

Нужен для выделения фрагментов текста или мелких элементов без разрыва строки.

<p>Срок доставки: <span class="highlight">24 часа</span>.</p>

Зачем?
- Можно покрасить слово «24 часа» в красный через CSS (.highlight { color: red; }).
- Или добавить анимацию при наведении.

Где встречается:
- Подсветка поисковых результатов.
- Изменение части текста через JavaScript (например, счётчик).

Когда использовать <div> и <span>?

Практика: создаём мини-проект

Соберём простую галерею с подписями:

<div class="gallery">
  <div class="photo">
    <img src="sunset.jpg" alt="Закат">
    <span class="caption">Пляж в Бали, 2023</span>
  </div>
  <div class="photo">
    <img src="mountain.jpg" alt="Горы">
    <span class="caption">Альпы, зимний поход</span>
  </div>
</div>

Разбор:
- Внешний <div> — контейнер галереи.
- Внутренние <div> — карточки фото.
- <span> — подпись к каждому изображению (строчный элемент).

Важные нюансы

1. Семантика важна! Если есть подходящий тег (<header>, <footer>), используйте его вместо <div>.
2. Не злоупотребляйте. Вложенность <div> в <div> («div soup») усложняет поддержку кода.
3. CSS и JavaScript. Контейнеры часто используют для подключения стилей или скриптов (через class или id).

👉 Запомните: <div> и <span> — ваши лучшие друзья в вёрстке, но дружба должна быть осмысленной!

Проверь себя

1. Как сделать кнопку с текстом «Купить» и красной ценой внутри?
2. Что выбрать для обёртки всего сайта: <div>, <span> или <main>?
3. Как выделить слово в абзаце курсивом и цветом?

Ответы:
1. <button>Купить за <span style="color: red;">199₽</span></button>
2. <div> (если нет семантического аналога).
3. <p>Важно: <span style="color: blue; font-style: italic;">срочно</span>!</p>