Справочник · HTML

Тег <em>: логическое ударение

Редакция PraktumОбновлено 24 октября 20266 мин чтенияУровень: новичок

Тег <em> отмечает логическое ударение — слово, на которое падает интонация и от которого зависит смысл фразы. Браузер по умолчанию показывает его курсивом, но курсив — лишь оформление: em выбирают по смыслу, а для простого наклона текста есть CSS и тег i.

Минимальный пример

<p>Я <em>просил</em> сохранить файл.</p>
<p>Я просил сохранить <em>файл</em>.</p>

Слова одинаковые, а смысл разный. В первой фразе спорят о том, была ли просьба. Во второй — о том, что именно нужно было сохранить. em фиксирует это ударение в разметке, так же как интонация в устной речи.

Синтаксис

em — строчный парный элемент: открывающий и закрывающий тег, внутри — текст или другие строчные элементы. Атрибутов у него нет, кроме глобальных (class, lang, title). Внутри em нельзя класть блоки вроде div или p.

<p>Это <em>очень</em> важно.</p>
<p>Нет, это <em>совсем <em>не</em> так</em>.</p>

Вложенный em означает более сильное ударение внутри уже выделенного фрагмента. Применяй это редко: двойное ударение в тексте почти всегда можно переписать понятнее.

em, strong, i, b и mark

Проверка простая: прочитай фразу вслух. Если слово хочется произнести с нажимом — это em. Если фрагмент важен, даже когда его читают ровным голосом, — strong. Если это термин или слово из другого языка — i.

em или i

Оба тега выглядят курсивом, но значат разное. i не добавляет ударения: он выделяет текст, который звучит «другим голосом» — научные термины, иностранные слова, названия кораблей, мысли героя. Для иностранного слова добавь атрибут lang, чтобы скринридер прочитал его с правильным произношением:

<p>Подход <i lang="en">mobile first</i> начинает вёрстку с узкого экрана.</p>
<p>Подход mobile first <em>начинает</em>, а не заканчивает вёрстку с телефона.</p>

Оформление em через CSS

em {
  font-style: italic;   /* стиль браузера по умолчанию */
}

/* в интерфейсе вместо курсива — цвет */
.note em {
  font-style: normal;
  color: #2a62d9;
}

Если в дизайне ударение показывают цветом или подчёркиванием, меняй стиль em в CSS, а тег оставляй прежним. И наоборот: если нужен просто наклонный текст без смысла (подпись, оформление цитаты), пиши font-style: italic в стилях нужного блока, а не оборачивай текст в em.

Как em читают скринридеры

Большинство скринридеров в настройках по умолчанию не меняют голос на em и strong — такие объявления быстро утомляют. Поэтому смысл фразы не должен держаться только на выделении: если ударение критично («не удаляйте файл»), лучше переписать предложение так, чтобы оно было понятно и без курсива. Но разметка всё равно полезна: она сохраняется при копировании, видна поисковикам и ИИ, и пользователь может включить объявление форматирования.

em и поиск

Выделение ключевых слов через em или strong не поднимает страницу в поиске: поисковики давно не учитывают такие теги как отдельный сигнал, а переспам выделениями выглядит неестественно. Используй em там, где он нужен читателю, — этого достаточно.

em или strong

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

• Ставят em ради курсива в подписях и оформлении.
• Путают em с strong: выделяют ударением предупреждение, которое должно быть важным.
• Пишут иностранные слова в em вместо i lang="en".
• Выделяют через em половину абзаца — ударение теряет смысл.
• Кладут внутрь em блочные элементы вроде p или div.

Доступность

Не полагайся на курсив как на единственный носитель смысла: многие скринридеры его не озвучивают, а курсивный текст хуже читается людьми с дислексией. Для длинных фрагментов курсив неудобен — выделяй короткие слова и фразы. Иностранные слова размечай атрибутом lang, чтобы их правильно произнесли.

Поддержка браузерами

Тег em существует со времён первых версий HTML и поддерживается всеми браузерами. Стиль по умолчанию во всех браузерах одинаковый — курсив.

<p>Я сказал <em>завтра</em>, а не сегодня.</p>
<p><strong>Внимание: доступ закроется в полночь.</strong></p>
<p>Мы используем подход <i lang="en">mobile first</i>.</p>

<style>
  .note em { font-style: normal; color: #2a62d9; }
</style>