Выделяем важное: strong, em, mark — в чём разница на практике (HTML)

В HTML есть несколько тегов, которые визуально делают текст заметнее. Но браузеры и скринридеры (программы для чтения с экрана) понимают их по‑разному. Разберём на примерах, когда использовать strong, когда em, а когда mark, и как это влияет не только на внешний вид, но и на доступность и семантику страницы.

strong: смысловое усиление, важность

Тег <strong> говорит: «это важно». Это не просто «пожирнее», а именно смысловая важность: предупреждение, ключевое условие, критичное ограничение.

Что делает браузер и скринридер: выделяет жирным и может интонационно подчеркнуть важность при озвучивании.

Пример

<p>
  Обратите внимание: <strong>оплата должна поступить до 15 числа</strong>,
  иначе заказ будет отменён.
</p>

Когда уместно:

• условия и ограничения;
• предупреждения и ошибки;
• ключевые требования в инструкциях;
• важные выводы.

Не стоит использовать <strong> только ради жирного шрифта. Для чисто визуального эффекта лучше применять CSS.

em: логическое ударение, интонация

Тег <em> передаёт логическое ударение — то, как мы бы произнесли фразу вслух. Он меняет интонацию, а не просто делает текст жирным.

Что делает браузер и скринридер: обычно выделяет курсивом и интонационно подчёркивает слово при озвучивании, будто мы его «выделяем голосом».

Пример

<p>
  Это не просто <em>обычный</em> отчёт — он содержит данные за три года.
</p>

Если прочитать вслух, слово «обычный» прозвучит с ударением, и смысл изменится. Без <em> фраза будет нейтральной.

Ещё пример с разной интонацией:

<p>
  Ты <em>точно</em> уверен?
</p>

Здесь акцент на сомнении, а не на важности.

Когда уместно:

• чтобы передать интонацию;
• подчеркнуть контраст или уточнение;
• показать сомнение, удивление, уточнение смысла.

mark: выделение как «подсветка»

Тег <mark> семантически означает «выделено маркером», как будто кто‑то взял жёлтый маркер и подчеркнул текст. Чаще всего его используют для:

• результатов поиска (найденные совпадения);
• выделения текущего фрагмента в контексте;
• акцента на изменениях или важных местах в документе.

Что делает браузер: по умолчанию подсвечивает жёлтым фоном (стиль может отличаться в разных браузерах). Скринридеры обычно просто читают текст, без специальной интонации, но сам факт выделения семантически понятен.

Пример: результаты поиска

<p>
  Мы нашли 3 документа, где встречается слово <mark>API</mark>.
</p>

Пример: выделение важного фрагмента в инструкции

<p>
  Перед запуском убедитесь, что параметр <mark>timeout</mark> установлен корректно.
</p>

Когда уместно:

• подсветка найденных слов;
• выделение ключевых терминов в учебном тексте;
• указание на изменения в сравнении версий документа.

Практические различия: сводим вместе

Частые ошибки и как их избежать

1. Использовать теги только ради стиля. Если нужно просто жирное или курсивное начертание без смысловой нагрузки — лучше CSS:
   css

   .highlight {
     font-weight: bold;
   }

2. Путать важность и интонацию. <strong> — это «это критично», <em> — «я делаю здесь ударение».
3. Подсвечивать всё подряд через <mark>. Этот тег лучше использовать точечно, иначе теряется смысл «выделенного маркером».

Пример комплексной разметки

Допустим, у нас есть предупреждение с интонацией и подсветкой ключевого термина:

<p>
  <strong>Внимание:</strong> перед изменением параметра <mark>retry_count</mark>
  убедитесь, что вы понимаете последствия. Это <em>необратимое</em> действие.
</p>

Внимание: перед изменением параметра retry_count
убедитесь, что вы понимаете последствия. Это необратимое действие.

Разбор:

• <strong>Внимание:</strong> — сразу даёт понять, что дальше идёт важное сообщение.
• <mark>retry_count</mark> — подсвечиваем конкретный параметр, чтобы его было легко найти.
• <em>необратимое</em> — передаём интонацию: действие нельзя отменить.

Важное про стили

По умолчанию браузеры стилизуют эти теги, но вы можете переопределить стили через CSS, не теряя семантики:

strong {
  font-weight: 700;
  color: #d32f2f; /* можно добавить цвет для большей заметности */
}
 
em {
  font-style: italic;
}
 
mark {
  background-color: #fff3cd;
  color: #856404;
}

Главное правило: семантика важнее внешнего вида. Даже если вы поменяете стили, смысл тегов останется понятным для скринридеров и поисковых систем.