Урок 2.3 — Выделяем текст: strong, em

В уроке 5 разделов. Изучайте по порядку.

Тег <strong> — парный тег. Он говорит браузеру: «содержимое внутри имеет высокую важность». Браузер показывает такой текст жирным, но смысл глубже. Представьте объявление: «Внимание! Срок сдачи — пятница!». Слово «Внимание» критическое. Вот тут и нужен <strong> — он добавляет смысловую нагрузку.

Программы чтения с экрана (скринридеры) читают текст внутри <strong> с другой интонацией — громче и твёрже. Поисковые системы тоже обращают внимание на текст в <strong> — они понимают, что этот текст важнее остального. Когда использовать <strong>? Для предупреждений («Осторожно!», «Внимание!»), ключевых терминов, критически важных инструкций, дат и сроков, на которые нужно обратить внимание, любых слов, которые вы произнесли бы с нажимом в голосе.

Главное правило: если слово можно убрать без потери смысла — не оборачивайте его в <strong>. Используйте тег только когда действительно хотите подчеркнуть важность. Не выделяйте целые абзацы — если всё «важно», то не важно ничего.

<p><strong>Внимание!</strong> Срок подачи заявок истекает через 3 дня.</p>
<p>Используйте <strong>только</strong> качественные материалы.</p>
<p>Этот раздел является <strong>обязательным</strong> для заполнения.</p>
<p>Дата сдачи проекта: <strong>15 июля 2026 года</strong>.</p>
<p>Пароль должен содержать <strong>не менее 8 символов</strong>.</p>

Обратите внимание: в разных примерах выделены разные части предложения. В первом — целое слово-предупреждение. Во втором — слово «только», указывающее на единственно верный вариант. В третьем — «обязательным», подчёркивающее необходимость. В каждом случае <strong> несёт свою смысловую нагрузку.

Можно ли использовать <strong> внутри других тегов? Да. Помещайте его внутрь абзаца <p>, заголовка <h1>–<h6>, элемента списка <li>, ссылки <a> — куда угодно. Не вкладывайте <strong> сам в себя несколько раз — это не усилит эффект. Если нужно выделить целую фразу, оберните её целиком в один тег, а не каждое слово отдельно.

Тег <em> (от emphasis — «ударение») — парный тег. Он показывает, что текст нужно произносить с логическим ударением. В браузере отображается курсивом. Но, как и strong, смысл глубже визуального изменения.

Произнесите фразу «Я сказал, что нужно сделать это сегодня» с ударением на «нужно». А теперь — с ударением на «сказал». Смысл меняется! В первом случае вы настаиваете на срочности. Во втором — подчёркиваете, что уже говорили. Именно для таких нюансов и нужен <em>.

Когда использовать <em>? В случаях, когда при чтении вслух вы сделали бы интонационное ударение. Например: «Я очень рад вас видеть» (усиление эмоции), «Это единственный способ» (уникальность), «Он не хотел никого обидеть» (опровержение). В русском языке <em> часто используется для противопоставления: «Не ты должен мне, а я тебе».

Важное отличие от strong: strong — это громкость и твёрдость (как восклицательный знак), а em — это интонация и гибкость (как изменённый тон голоса). Strong говорит «обрати внимание, это важно», а em — «произнеси это с определённой интонацией».

<p>Я <em>очень</em> рад вас видеть! — усиление эмоции.</p>
<p>Это <em>единственный</em> способ решить проблему. — уникальность.</p>
<p>Он <em>не</em> хотел никого обидеть. — опровержение.</p>
<p>Ты <em>сам</em> так решил, я не навязывал. — выделение субъекта.</p>
<p>Я <em>же</em> тебе говорил! — раздражение / напоминание.</p>

Последний пример: «Я же тебе говорил!». Частица «же» здесь выделена не для красоты — она несёт эмоциональную нагрузку раздражения или удивления. <em> передаёт эту эмоцию. Без выделения фраза звучала бы просто констатацией факта.

Можно ли вкладывать <em> внутрь <strong> или наоборот? Да. Например: <strong>Важно: <em>никогда</em> не делайте этого!</strong>. Здесь strong подчёркивает общую важность предупреждения, а em добавляет интонационное ударение на слове «никогда». Такая комбинация усиливает эффект. Но не злоупотребляйте — если выделить всё, то не будет выделено ничего.

А что если нужно просто сделать текст курсивным без смысловой нагрузки? Например, выделить иностранное слово (de facto) или название корабля (RMS Titanic)? Для таких случаев есть тег <i>. Про разницу между em и i поговорим в следующем разделе. Запомните главное: <em> — это смысл, а не внешний вид.

Когда вы только начинаете изучать HTML, вас может смутить, что есть сразу два тега для жирного текста (strong и b) и два для курсива (em и i). Зачем? Всё просто: <strong> и <em> — это семантические теги. Они несут смысловую нагрузку. <b> и <i> — это презентационные теги. Они отвечают только за внешний вид.

Слово «семантика» звучит сложно, но на деле означает просто «смысл». Семантический тег говорит не только браузеру, но и другим программам (поисковикам, скринридерам): «вот это важно», «вот это с акцентом». Презентационные теги просто говорят: «сделай это жирным», «сделай это курсивом» — и всё.

<!-- Семантическая разметка (правильно) -->
<p><strong>Внимание!</strong> Перед началом работы <strong>обязательно</strong>
отключите питание. <em>Ни в коем случае</em> не касайтесь оголённых проводов.</p>

<!-- Презентационная разметка (менее правильно) -->
<p><b>Внимание!</b> Перед началом работы <b>обязательно</b>
отключите питание. <i>Ни в коем случае</i> не касайтесь оголённых проводов.</p>

Визуально обе версии выглядят одинаково — жирный и курсивный текст. Но для скринридера разница огромна. В первом варианте скринридер прочитает «Внимание» с повышенной громкостью, а «Ни в коем случае» — с изменённым тоном. Во втором он просто прочитает текст ровно, без эмоциональной окраски. Для незрячего пользователя это критически важно.

Как же выбрать? Задайте себе вопрос: «Я выделяю текст, потому что он важен по смыслу, или потому что хочу, чтобы он выглядел жирным/курсивным?» Если по смыслу — strong/em. Если только внешний вид — b/i или CSS. В современной веб-разработке приоритет: семантические теги → презентационные теги → CSS.

Вы уже знаете, что strong и em — семантические теги. Но почему это так важно? Почему нельзя просто использовать b и i? Визуально результат одинаковый. Давайте разберём все причины.

1. Доступность (a11y). Миллионы людей используют скринридеры — программы, читающие экран вслух. Когда скринридер встречает strong или em, он меняет интонацию голоса: strong читается громче и твёрже, em — с другим тоном. b и i скринридеры игнорируют. Представьте, что вы читаете инструкцию по безопасности, а скринридер не выделяет предупреждения голосом. Это может быть опасно.

2. SEO (поисковая оптимизация). Поисковые системы, такие как Google и Яндекс, анализируют семантическую структуру страницы. Текст внутри strong и em получает больший вес при ранжировании. Это значит, что важные ключевые слова, обёрнутые в strong, поисковик будет считать более релевантными. b и i на SEO не влияют.

3. Семантическая вёрстка. HTML5 изначально проектировался как семантический язык. Использование тегов по назначению — профессиональный стандарт. Когда другой разработчик читает ваш код, он сразу понимает, какой текст важен, а какой — просто выделен визуально. Это облегчает поддержку проекта. Семантический код сам себя документирует.

4. Будущая совместимость. Стандарты HTML развиваются. Презентационные теги (b, i) считаются устаревшими в том смысле, что их использование не рекомендуется, если есть семантическая альтернатива. Семантические теги, напротив, останутся и будут только укреплять свои позиции. Используя strong/em сегодня, вы пишете код, который будет актуален и через 10 лет.

5. Универсальность. Семантические теги не привязаны к конкретному визуальному отображению. Сегодня браузеры показывают strong жирным, а em курсивом. Но с появлением новых устройств (очки дополненной реальности, голосовые ассистенты) способ отображения может измениться. Семантическая разметка останется понятной для любых устройств, а презентационная потеряет смысл.

<!-- Презентационный подход (менее правильно) -->
<p><b>Распродажа!</b> Скидки до <i>50%</i> на всю мебель.
<b>Торопитесь!</b> Количество товара <i>ограничено</i>.</p>

<!-- Семантический подход (правильно) -->
<p><strong>Распродажа!</strong> Скидки до 50% на всю мебель.
<strong>Торопитесь!</strong> Количество товара ограничено.</p>

В семантической версии мы использовали strong для «Распродажа!» и «Торопитесь!», потому что это важные призывы к действию. Проценты и слово «ограничено» — просто информация, не требующая смыслового выделения. В презентационной версии автор просто сделал жирным и курсивом то, что ему показалось нужным визуально, без учёта смысла.

Ещё один важный момент: strong и em можно комбинировать. Если нужно подчеркнуть особую важность с акцентом, вложите один тег в другой. Но не делайте вложений больше одного уровня — это избыточно.

<p><strong><em>Никогда</em></strong> не передавайте пароль третьим лицам.</p>
<p><strong>Предупреждение: <em>все</em> поля обязательны.</strong></p>

Этот код читается скринридером: «[громко и твёрдо] [с интонацией] Никогда [обычным голосом] не передавайте пароль третьим лицам». Максимально эффективно.

Теперь, когда вы разобрались с теорией, пора применить знания на практике. Ваша задача — оформить абзац текста, используя только <strong> и <em>. Никаких других тегов форматирования. Работаем только с теми тегами, которые изучили в этом уроке.

Представьте, что вы пишете инструкцию для нового сотрудника. Текст уже готов, но он никак не оформлен — сплошная «стена текста». Задача: прочитать текст, понять, какие слова требуют выделения, и расставить strong и em.

Исходный текст (неотформатированный):

Внимание! Это очень важно. Рабочий день начинается в 9:00.
Опоздания недопустимы. Если вы опаздываете, обязательно
предупредите руководителя. Перерыв на обед — с 13:00 до 14:00.
Использовать мобильный телефон в рабочее время можно только
в личных целях в исключительных случаях.
Пароль от компьютера нужно менять каждый месяц.
Никому не сообщайте свой пароль!

А теперь — ваша версия с разметкой:

<p><strong>Внимание!</strong> Это <strong>очень важно</strong>.
Рабочий день начинается <strong>в 9:00</strong>.
<strong>Опоздания недопустимы</strong>. Если вы опаздываете,
<strong>обязательно</strong> предупредите руководителя.
Перерыв на обед — с 13:00 до 14:00.
Использовать мобильный телефон в рабочее время можно
<em>только</em> в личных целях <em>в исключительных случаях</em>.
Пароль от компьютера нужно менять <strong>каждый месяц</strong>.
<strong><em>Никому</em></strong> не сообщайте свой пароль!</p>

Логика: «Внимание!» — strong (предупреждение), «очень важно» — strong (серьёзность), «в 9:00» — strong (точное время), «Опоздания недопустимы» — strong (правило), «обязательно» — strong (необходимость), «только» — em (интонация), «в исключительных случаях» — em (редкость), «каждый месяц» — strong (интервал), «Никому» — strong+em (усиление).

Теперь ваша очередь! Вот задание для самостоятельной работы:

<!-- Расставьте strong и em в этом тексте -->
<p>Важно! Срок сдачи проекта — пятница.
Не забудьте проверить все файлы перед отправкой.
Руководитель обязательно проверит вашу работу,
поэтому отнеситесь к заданию серьёзно.
Не откладывайте на последний момент!</p>

Подумайте, какие слова здесь самые важные (strong) и на каких нужно сделать интонационное ударение (em).

<p><strong>Важно!</strong> Срок сдачи проекта — <strong>пятница</strong>.
<strong>Не забудьте</strong> проверить <em>все</em> файлы перед отправкой.
Руководитель <strong>обязательно</strong> проверит вашу работу,
поэтому отнеситесь к заданию <em>серьёзно</em>.
<strong>Не откладывайте</strong> на последний момент!</p>

Ваш вариант может отличаться — и это нормально! Разные люди по-разному расставляют смысловые акценты. Главное, чтобы вы осознанно выбирали между strong (важность) и em (интонация).

Скопируйте любой пример в HTML-файл, откройте в браузере и посмотрите, как strong и em выглядят на реальной странице. Экспериментируйте с разметкой и наблюдайте, как меняется восприятие текста.

Поздравляю! Вы завершили урок 2.3. Теперь вы умеете осмысленно использовать strong и em для выделения текста.