Работа с текстом: выделения с помощью <strong>, <em>, <span>, <br> и <hr>

Зачем нужны теги для текста? ✨

Текст без выделений — как пицца без сыра: съедобно, но скучно! В HTML есть 5 ключевых инструментов для управления текстом:
- <strong> и <em> — смысловое выделение
- <span> — стилевое выделение
- <br> и <hr> — управление структурой

Давайте разберём каждый на реальных примерах!

<strong> vs <b>: сила смысла 💪

<strong> не просто делает текст жирным — он добавляет семантический акцент. Браузеры и скринридеры понимают: это важная информация!

<p>Перед выходом <strong>обязательно проверьте</strong> заряд батареи.</p>

👉 Что происходит:
- Визуально — жирный текст
- Для поисковиков и скринридеров — ключевая фраза

<b> тоже делает текст жирным, но без смысловой нагрузки. Используйте его для визуального выделения:

<p>Термин <b>HTML</b> расшифровывается как HyperText Markup Language.</p>

<em> vs <i>: нюансы наклона 🎭

<em> добавляет смысловое ударение, меняя интонацию при чтении:

<p>Это <em>невероятно</em> важный момент!</p>

👉 Браузер отобразит курсив, а скринридер изменит интонацию на выделенном слове.

<i> — чисто визуальный курсив для: - Иностранных слов: <i>Lorem ipsum</i> dolor sit amet
- Названий: фильм <i>Интерстеллар</i>

(Пример: скринридер выделит голосом <em>, но не <i>)

<span>: точечный контроль 🎨

Универсальный контейнер для стилизации через CSS. Сам по себе не меняет текст, но позволяет:

<p>Срок акции: <span class="highlight">до 31 декабря</span></p>

.highlight {
  background-color: yellow;
  font-weight: bold;
}

🔥 Где применять:
- Подсветка ключевых слов
- Изменение цвета части текста
- Добавление анимаций к отдельным словам

<br> и <hr>: невидимые герои ⚡

Перенос строки <br>

Используйте вместо <p> для коротких строк без смыслового разделения:

<p>Улица<br>Горького,<br>дом 23</p>

❌ Ошибка новичков:

<p>Текст</p>
<p>продолжается</p>  <!-- Лишние отступы! -->

Горизонтальная линия <hr>

Разделяет смысловые блоки:

<section>Контент первого раздела</section>
<hr>
<section>Второй раздел</section>

Современный вариант — с CSS:

<hr class="modern">

.modern {
  border: 0;
  height: 2px;
  background: linear-gradient(to right, blue, purple);
}

Практика: собираем всё вместе 🧩

Создаём уведомление с: - Важным заголовком (<strong>)
- Ударением в тексте (<em>)
- Цветным выделением (<span>)
- Чётким разделением (<hr>)

<div class="alert">
  <strong>Внимание!</strong>
  <hr class="alert-line">
  <p>Система будет <em>недоступна</em> 
  <span class="time">с 23:00 до 05:00</span>.</p>
</div>

.alert { border: 1px solid #ffcc00; padding: 15px; }
.time { color: red; font-weight: bold; }
.alert-line { border-color: #ffcc00; }

Главные правила 🏆

1. <strong> и <em> — для смысла
2. <b> и <i> — только для визуала
3. <span> + CSS > лишние теги
4. <br> — для адресов и стихов, <hr> — для разделения
5. Всегда проверяйте, как скринридер прочитает ваш текст

Для глубокого погружения смотрите разбор Данилы Бежина о семантике: YouTube-канал. ```

(Примеры адаптированы под реальные сценарии, код можно копировать и сразу использовать в проектах!) 🚀