Форматирование текста: strong, em, mark

<strong>, <em>, <mark> — семантические inline-элементы для выделения текста с конкретным смысловым значением; их следует отличать от чисто визуальных <b> и <i>.

Зачем нужно

HTML разделяет смысловое выделение и визуальное оформление. <strong> означает «важно», <em> — «акцент при прочтении», <mark> — «релевантно в текущем контексте». Screen reader может произносить <strong> и <em> с изменённой интонацией. <b> и <i> — чисто визуальные, без семантики, их используют только для стилевых нужд без смыслового значения.

Где используется

  • <strong> — предупреждения, ключевые термины, критически важная информация
  • <em> — акцентированное чтение, иностранные слова, технические термины
  • <mark> — результаты поиска, подсветка релевантного текста, пометки в цитатах
  • <b> — названия продуктов, ключевые слова без важности
  • <i> — иностранные слова, технические термины, мысли персонажа

Примеры использования

<strong> — сильная важность

<p>
  <strong>Внимание:</strong> не удаляйте этот файл — он нужен для запуска системы.
</p>

<p>
  Пароль должен содержать <strong>не менее 12 символов</strong>.
</p>

<em> — акцент (emphasis)

<p>Я сказал, что <em>можно</em> это сделать, а не что <em>нужно</em>.</p>

<p>
  Используй семантический элемент <em>вместо</em> дивов,
  когда это имеет смысл.
</p>

<mark> — выделение (highlight)

<!-- Результат поиска -->
<p>
  Вы искали «<mark>семантика</mark>». Найдено 5 вхождений.
</p>

<!-- Подсветка в цитате -->
<blockquote>
  Любой код без тестов — <mark>легаси-код</mark> по определению.
</blockquote>

Визуальные элементы <b> и <i>

<!-- <b> — ключевые слова, названия без усиленного значения -->
<p>Нажмите <b>Сохранить</b> для применения изменений.</p>
<p>Ингредиенты: <b>мука</b>, <b>яйца</b>, <b>сахар</b>.</p>

<!-- <i> — иностранный текст, термин, курсив без акцента -->
<p>
  Принцип <i>separation of concerns</i> — основа модульной архитектуры.
</p>
<p>Корабль назывался <i>Аврора</i>.</p>

Вложенность

<p>
  <strong>Критически важно:</strong> перед удалением данных
  <em>всегда</em> создавай резервную копию.
</p>

Сравнение элементов

Элемент Семантика Визуал по умолчанию Когда использовать
<strong> Высокая важность Жирный Предупреждения, критическое
<b> Нет Жирный Ключевые слова, названия
<em> Акцент при чтении Курсив Интонационный акцент
<i> Нет Курсив Термины, иностранные слова
<mark> Релевантность Жёлтый фон Поиск, пометки
<s> Неактуально Зачёркнутый Устаревшая цена, удалённое
<u> Аннотация Подчёркнутый Орфографические ошибки

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

Ошибка Почему плохо Как правильно
<strong> для всего жирного Теряется семантика важности Жирный без смысла — <b> или CSS font-weight
<em> вместо <i> для терминов Акцент должен быть смысловым Для стилевого курсива — <i>
CSS font-weight: bold на <span> вместо <strong> Нет семантики Используй семантические элементы
<mark> для декоративной подсветки Смешивает семантику и визуал Декоративная подсветка — через CSS-класс

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

Ресурсы