Тег em в HTML - полное руководство по семантическому выделению текста

Введение

Тег em в HTML используется для смыслового, или иначе логического, выделения текста. Это не просто «сделать текст курсивом», а показать браузеру, скринридерам и поисковым системам, что в данном фрагменте есть особый смысловой акцент.

В этой статье мы подробно разберем, как работает тег em, чем он отличается от i, как влияет на доступность и SEO, как правильно применять его в реальной вёрстке и чего лучше избегать. Я покажу вам примеры кода и пояснения, чтобы вы могли уверенно использовать em в своих проектах.

Что такое тег em и зачем он нужен

Семантический смысл тега em

Тег em (от «emphasis») обозначает логическое ударение в тексте. Его ключевая задача — не внешний вид, а именно семантика.

Когда вы пишете:

<p>Я <em>действительно</em> этого не говорил.</p>

// Здесь мы логически подчёркиваем слово "действительно" // Смысл фразы меняется по сравнению с ней без выделения

Вы сообщаете:

• браузеру — этот фрагмент имеет особый смысловой акцент;
• скринридерам — нужно произнести это слово с измененной интонацией;
• поисковым системам — этот участок текста важен с точки зрения смысла.

Визуально большинство браузеров по умолчанию отображают em курсивом. Но это лишь стандартный стиль. При желании вы можете переопределить его с помощью CSS.

Отличие em от i

Очень часто начинающие разработчики спрашивают: если и em и i выглядят как курсив, в чем разница?

Смотрите, как это выглядит в коде:

<p>Эта фраза содержит <em>смысловой акцент</em>.</p>
<p>А здесь используется <i>просто курсив</i> без указания смысла.</p>

// — логическое ударение, влияет на семантику и доступность // — визуальное оформление, как правило курсив, без доп. смысла

Кратко:

• em — семантический тег:
  • подчеркивает важность или изменение смысла;
  • учитывается скринридерами как логическое ударение;
  • влияет на структуру текста для поисковиков.
• i — презентационный тег:
  • используется, когда курсив нужен чисто визуально;
  • не сообщает семантики, только оформление;
  • часто применяют для терминов из других языков, имен кораблей, внутренних названий, без добавления смыслового акцента.

Правильный подход: если вам важно именно смысловое выделение — используйте em. Если вам нужно просто наклонное начертание без изменения смысла — используйте CSS (font-style: italic;) или i, если это особый текст (например, слово на латинице в русском тексте).

Синтаксис и базовое использование тега em

Базовый синтаксис

Синтаксис у em самый простой — парный тег:

<p>Это <em>важный</em> фрагмент текста.</p>

// — открывающий тег // — закрывающий тег // Между ними — текст, на который ставим логический акцент

Тег em — строчный (inline) элемент. Это означает, что его:

• можно использовать внутри параграфов p, заголовков h1–h6, списков, ссылок и других строчных или блочно-строчных элементов;
• нельзя использовать так, чтобы он напрямую содержал блочные элементы (например, div, section).

Пример корректного использования:

<h2>Это <em>действительно</em> важно</h2>

// Мы подчёркиваем смысловое слово внутри заголовка // Заголовок остаётся корректным с точки зрения HTML-структуры

Пример некорректного использования:

<!-- НЕКОРРЕКТНО: блочный div внутри строчного em -->
<p>
  <em>
    <div>Текст</div>
  </em>
</p>

// Так делать не нужно — нарушается модель потока HTML // В современных браузерах это, скорее всего, "починят", но это неверная разметка

Где уместно применять em

Давайте разберемся на примерах, когда em действительно помогает:

1. Уточнение смысла:

<p>Я сказал <em>всем</em> прийти вовремя.</p>

// Логический акцент на "всем" меняет оттенок смысла // Без выделения фраза была бы нейтральнее

2. Противопоставление:

<p>Я просил сделать это <em>сегодня</em>, а не завтра.</p>

// Мы подчёркиваем срочность и различие с "завтра"

3. Вежливое усиление:

<p>Я буду вам <em>очень</em> признателен за помощь.</p>

// Выделение "очень" как усиление благодарности

4. Уточнение в инструкции:

<p>Нажмите <em>только одну</em> кнопку.</p>

// "только одну" — важная часть инструкции, ошибка приведёт к неправильному действию

В таких случаях em помогает донести до пользователя не просто текст, а интонацию и акцент.

Вложенный em и степени акцента

Вложенные уровни логического ударения

Интересная особенность em: его можно вкладывать внутрь самого себя. Тогда уровень логического ударения усиливается.

Пример:

<p>Я <em>правда <em>очень</em> устал</em> сегодня.</p>

// Внешний — общий акцент на "правда ... устал" // Внутренний — ещё более сильный акцент на "очень"

Семантика здесь такая:

• первый уровень em — обычное логическое ударение;
• второй (вложенный) em — усиленное ударение, как будто вы произносите это слово с ещё большей интонацией.

Скринридеры могут интерпретировать вложенный em как дополнительное усиление. Некоторые из них меняют тон или громкость.

Как это выглядит в браузере

По умолчанию большинство браузеров стилизуют вложенный em как обычный курсив внутри курсива. Внешний вид может не сильно отличаться, но семантическая структура будет сохранена.

Вы можете переопределить стили для вложенных уровней через CSS, если хотите подчеркнуть визуально:

<style>
  em {
    font-style: italic; /* Базовое выделение курсивом */
  }

  em em {
    font-weight: bold;  /* Углубленный акцент — делаем ещё и жирным */
  }
</style>

<p>Я <em>правда <em>очень</em> устал</em> сегодня.</p>

// em — просто курсив // em em — курсив + жирный шрифт, как более сильный акцент

Обратите внимание, как этот фрагмент кода решает задачу: мы сохраняем семантику HTML, а визуальную часть настраиваем в CSS.

Взаимодействие em с другими тегами форматирования

em и strong

em и strong — два основных семантических тега для выделения текста:

• em — логическое ударение (интонация, акцент);
• strong — важность, значимость, серьезность.

Их можно сочетать. Покажу вам, как это реализовано на практике:

<p>
  Пожалуйста, <strong><em>никогда</em></strong> не удаляйте эту директорию.
</p>

// — логический акцент на слове "никогда" // — подчёркивает критическую важность всей конструкции // Вместе — "очень сильно важно и акцентировано"

Здесь и смысл, и визуальное оформление будут явно показывать пользователю, что это ключевая часть фразы.

Другой вариант:

<p>
  <strong>Важно</strong> — внимательно прочитайте инструкцию,
  особенно раздел <em>о возможных ошибках</em>.
</p>

// — слово "Важно" как маркер значимости // — логический акцент внутри фразы, на нужном фрагменте

em и i, b, span

Можно комбинировать em с другими тегами:

<p>
  Этот термин <i>latinus</i> используется <em>очень редко</em>.
</p>

// — слово на латинице, стилистический курсив // — логическое ударение на "очень редко"

Или:

<p>
  Стоимость может <em><span class="highlight">существенно</span></em> измениться.
</p>

// — логический акцент // — дополнительная кастомная подсветка через CSS

CSS-пример:

<style>
  .highlight {
    background-color: yellow;   /* Фон для визуального выделения */
    padding: 0 2px;
  }
</style>

// Мы используем span только для визуального эффекта // Семантику (логический акцент) по-прежнему задаёт em

Важно: порядок вложения лучше продумывать. Обычно внутренним тегом делают тот, который отвечает за более «частную» задачу (например, спецподсветка).

Доступность и тег em

Как скринридеры обрабатывают em

Для технологий ассистивного доступа (скринридеры, голосовые помощники) em — полезный маркер. Они могут:

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

То есть пользователь, который не видит визуальное оформление, всё равно получает подсказку, что это слово или фраза сказаны «с акцентом».

Но важно помнить:

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

em и ARIA

Часто спрашивают, нужно ли добавлять какие-то aria-атрибуты к em. В большинстве случаев — нет. Сам по себе em уже достаточно семантичен.

Если вы хотите добавить дополнительное пояснение, можно использовать aria-label или aria-describedby, но это скорее относится к более сложным интерфейсам (кнопки, ссылки), а не к обычному тексту.

Простой пример, когда достаточно одного em:

<p>
  При оплате уделите внимание полю <em>Назначение платежа</em>.
</p>

// Здесь и визуально, и семантически видно важное место // Для скринридеров доп. ARIA обычно не требуется

em и SEO

Влияет ли em на ранжирование

Тег em — не «магический» тэг для продвижения. Он не поднимает страницу в выдаче сам по себе. Но он помогает:

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

Поисковые системы учитывают семантические теги (em, strong, h1–h6 и другие) при анализе текста. Они помогают им понять:

• какие слова и фразы в тексте несут основной смысл;
• какие элементы являются важными пояснениями или уточнениями.

Если вы разумно выделяете с помощью em действительно значимые фразы (а не просто «напичкали» текст ключевыми запросами), это работает на пользу контента.

Как использовать em в текстах для SEO

Рекомендации:

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

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

<p>
  При разработке интерфейсов <em>доступность</em> играет 
  не меньшую роль, чем визуальный дизайн.
</p>

// Мы подчёркиваем слово "доступность" как ключевое понятие // Это важно и для смысла, и для поисковиков

Стилизация тега em с помощью CSS

Переопределение стандартного курсивного стиля

По умолчанию em отображается курсивом. Но вы не обязаны следовать этому стилю.

Например, можно сделать его жирным без курсива:

<style>
  em {
    font-style: normal;   /* Отменяем курсив */
    font-weight: 600;     /* Делаем полужирным */
  }
</style>

<p>Это <em>важный</em> фрагмент текста.</p>

// Семантика остаётся прежней — логический акцент // Визуально мы показываем акцент через жирное начертание

Или, например, выделить цветом:

<style>
  em {
    font-style: normal;        /* Без курсива */
    color: #d9534f;           /* Красный цвет текста */
  }
</style>

<p>Параметр <em>обязателен для заполнения</em>.</p>

// Здесь акцент делается через цвет, а не наклон шрифта

Комбинированные стили

Теперь вы увидите, как это выглядит в коде, когда мы хотим сделать несколько уровней акцента:

<style>
  em {
    font-style: italic;      /* Базовый курсив */
  }

  em.em-strong {
    font-style: italic;      /* Оставляем курсив */
    font-weight: bold;       /* Добавляем жирное начертание */
    color: #c00;             /* И красный цвет для усиления */
  }
</style>

<p>Это <em>важная</em> информация.</p>
<p>А это <em class="em-strong">критически важная</em> информация.</p>

// Первый — обычный логический акцент // Второй — усиленный акцент, выделенный и стилями, и семантически

Обратите внимание, что мы не нарушаем семантику: в обоих случаях используется em, просто в одном случае — дополнительный класс, подчеркивающий уровень важности.

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

В пользовательских инструкциях

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

<ol>
  <li>Откройте раздел <em>Настройки</em> в верхнем меню.</li>
  <li>Перейдите во вкладку <em>Безопасность</em>.</li>
  <li>
    Включите опцию <em>Разрешить вход только по одноразовому коду</em>.
  </li>
</ol>

// Мы выделяем названия пунктов интерфейса и важных опций // Пользователю легче глазами находить нужные элементы // Скринридер также логически подчёркивает важные части инструкции

В FAQ и справке

<p>
  Если вы забыли пароль, используйте ссылку 
  <em>Забыли пароль</em> на странице входа.
</p>

// Элемент интерфейса (название ссылки) выделен логическим акцентом // Так читателю проще сопоставить текстовую инструкцию с реальным UI

В юридических и договорных текстах

Особенно важно правильно расставлять акценты в юридических текстах:

<p>
  Клиент обязуется <em>самостоятельно</em> сохранять свои учетные данные
  и <em>не передавать</em> их третьим лицам.
</p>

// Выделяем ключевые смысловые слова, влияющие на ответственность // Акцент помогает не «утонуть» в большом объеме текста

В уведомлениях и предупреждениях

<p>
  Внимание — после нажатия кнопки 
  <em>Удалить безвозвратно</em> восстановить данные будет невозможно.
</p>

// Название кнопки выделено, чтобы пользователь правильно её идентифицировал // Логический акцент дополнительно подчёркивает серьёзность действия

Типичные ошибки и антипаттерны

Ошибка 1 — использование em только как «курсива»

Неправильно:

<p><em>Приветствие</em> пользователя выводится в верхней части страницы.</p>

// Здесь "Приветствие" — просто название раздела в тексте статьи // Логического ударения по смыслу нет — курсив используется ради оформления

Лучше:

<p><span class="term">Приветствие</span> пользователя выводится в верхней части страницы.</p>

и стили:

<style>
  .term {
    font-style: italic;  /* Оформляем курсивом, но без семантики em */
  }
</style>

// Для просто «красивого» курсива мы используем CSS или другие теги // Семантический em — только там, где есть реальный смысловой акцент

Ошибка 2 — избыточное использование em

Если вы выделите em каждое второе слово, логический акцент потеряется. Скринридерам будет сложно, текст станет «кричащим».

Нежелательно:

<p>
  Это <em>очень</em> важное <em>предупреждение</em>, 
  которое <em>обязательно</em> нужно <em>прочитать</em>.
</p>

// Слишком много акцентов — внимание рассеивается

Лучше выбрать один-два ключевых фрагмента:

<p>
  Это очень важное <em>предупреждение</em>, 
  которое обязательно нужно прочитать.
</p>

// Смысл сохранился, акцент стал понятнее

Ошибка 3 — использовать em вместо strong

Если вам нужно подчеркнуть именно важность, а не логический акцент, лучше использовать strong.

Неправильно:

<p>
  <em>Важно</em> — перед обновлением сделайте резервную копию базы данных.
</p>

// Здесь мы говорим о важности, а не об интонации в речи

Правильнее:

<p>
  <strong>Важно</strong> — перед обновлением сделайте резервную копию базы данных.
</p>

// strong — семантически корректнее для обозначения важности

Можно добавить и em, если хотите акцентировать конкретную часть:

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

// strong — важность всего замечания // em — логический акцент на конкретных действиях

Ошибка 4 — вложение блочных элементов внутрь em

Как уже обсуждали, em — строчный элемент. Вкладывать в него div, p, section и другие блочные элементы — нарушение разметки.

Если вам нужно, чтобы акцент охватывал большую область, пересоберите структуру так, чтобы em оборачивал только текстовые фрагменты и строчные элементы.

Плохо:

<p>
  <em>
    <div>Содержимое</div>
  </em>
</p>

Хорошо:

<p><em>Содержимое</em></p>

или, если нужно оформить целый блок, работайте со стилями контейнера, а не с em:

<div class="emphasis-block">
  <p>Содержимое</p>
</div>

и стили:

<style>
  .emphasis-block {
    border-left: 4px solid #f0ad4e;  /* Визуальный акцент для блока */
    padding-left: 12px;
  }
</style>

// Логическое ударение на уровне блока решаем визуальным стилем // Семантику em используем локально, только для текста с реальным акцентом

Проверка и отладка использования em

Как понять, что вы используете em по назначению

Задайте себе несколько вопросов:

1. Если прочитать текст вслух, вы реально поставите интонационный акцент на этом фрагменте?
2. Если убрать em, исказится ли смысл фразы или станет менее ясным?
3. Помогает ли выделенный фрагмент пользователю лучше понять инструкцию, предупреждение или важную мысль?

Если ответы «да» хотя бы на один-два пункта — em, скорее всего, уместен.

Как проверить итоговую разметку

Несколько практических шагов:

• Откройте страницу с включенным CSS и без него (например, в инструментах разработчика можно отключить стили). Убедитесь, что текст остаётся понятным, а логические акценты прослеживаются.
• Используйте валидатор HTML (например, W3C Validator), чтобы убедиться, что em не содержит недопустимых элементов.
• Если есть возможность, проверьте поведение через скринридер (NVDA, VoiceOver, TalkBack) и послушайте, как текст читается с учётом em.

Заключение

Тег em в HTML — это инструмент для смыслового, логического выделения текста. Он не ограничивается курсивом и не сводится к визуальному оформлению. Правильное использование em:

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

Ключевой принцип — выделять em только те фрагменты, где логическое ударение действительно важно для понимания смысла. Визуальные эффекты лучше выносить в CSS, а там, где важна именно значимость (а не интонация), использовать strong.

Если вы будете относиться к em не как к «тегу курсива», а как к инструменту управления смысловыми акцентами, ваши тексты и интерфейсы станут заметно более выразительными и понятными.

Частозадаваемые технические вопросы

Как переопределить стиль em только в одном блоке, не затрагивая весь сайт

Используйте более специфичный селектор, привязанный к контейнеру:

<style>
  .article-content em {
    font-style: normal;   /* Только внутри блока .article-content */
    font-weight: 600;
  }
</style>

<div class="article-content">
  <p>Это <em>важный</em> текст в статье.</p>
</div>
<p>А здесь <em>em</em> останется курсивом по умолчанию.</p>

// Стиль применяется только к em внутри .article-content

Можно ли использовать em внутри ссылок a

Можно. Это частый кейс, например, когда вы хотите акцентировать слово в тексте ссылки:

<a href="/pricing">
  Узнать о <em>новых</em> тарифах
</a>

// em не ломает ссылку, а добавляет логический акцент внутри неё

Важно не вкладывать в a блоки, которые браузер не поддерживает (но современные HTML5-спецификации уже допускают блочные элементы внутри ссылок).

Как задать разные стили для первого и второго уровня вложенного em

Используйте вложенные селекторы:

<style>
  em {
    font-style: italic;       /* Первый уровень */
  }

  em em {
    font-style: italic;
    font-weight: bold;        /* Второй уровень */
    color: #d9534f;
  }
</style>

// em — общий стиль // em em — стиль при вложении одного em внутрь другого

Как безопасно изменить курсив em на мобильных устройствах

Можно использовать медиа-запросы, если курсив плохо читается на маленьких экранах:

<style>
  em {
    font-style: italic;
  }

  @media (max-width: 480px) {
    em {
      font-style: normal;     /* Отменяем курсив на мобилках */
      font-weight: 600;       /* Заменяем акцент на полужирный */
    }
  }
</style>

// На десктопах — курсив, на мобильных — более читаемый полужирный текст

Как быстро найти все места с em в проекте и проверить их корректность

1. Сделайте поиск по коду по строке <em (с открывающей угловой скобкой).
2. Просмотрите результаты и проверьте:
   • есть ли реальный логический акцент;
   • нет ли вложенных блочных элементов;
   • не дублируется ли смысл strong, где нужен именно strong.
3. При необходимости замените несемантические случаи на CSS-классы или i/span.

Использование поиска по проекту (например, в VS Code или любом IDE) — самый быстрый и надёжный способ ревизии применения em.