Клавиша / esc

<em>

Придаёт особый смысл отдельным словам или фразам в тексте.

Время чтения: меньше 5 мин

Кратко

Скопировано

Тег <em> добавляет тексту внутри смысловой акцент.

Пример

Скопировано

Текст внутри <em> по умолчанию выделяется курсивом при помощи font-style: italic.

        
          
          <p>Коты <em>обожают</em> кошачью мяту.</p>
          <p>Коты <em>обожают</em> кошачью мяту.</p>

        
        
          
        
      
Открыть демо в новой вкладке

Как пишется

Скопировано

Используйте <em> для смыслового выделения куска текста и не используйте его для просто курсива — для этого нужен тег <i>. При этом <em> также не задуман для придания важности тексту — для этого подойдёт <strong>.

Можно вкладывать <em> друг в друга — семантическое ударение будет усиливаться с каждым уровнем вложенности (например, будет постепенно нарастать интонация у скринридеров).

        
          
          <p>  <em>    Этого не ожидал никто,    <em>даже известный своим природным чутьём Джимми</em>  </em>.</p>
          <p>
  <em>
    Этого не ожидал никто,
    <em>даже известный своим природным чутьём Джимми</em>
  </em>.
</p>

        
        
          
        
      
Открыть демо в новой вкладке

Доступность

Скопировано

Хотя <em> считается элементом семантической вёрстки, у него пока нет встроенной роли emphasis. Так что для скринридеров это простой текст, который они никак не выделяют интонацией.

Чтобы магия произошла и скринридер понял, что слово или фраза крайне важные, достаточно стилизовать элемент с помощью font-style: italic. Если у пользователя скринридера включена специальная настройка, он услышит небольшое изменение в озвучивании такого текста.

Несмотря на эту странность, всё равно лучше использовать <em> вместо <i>. Так ваша вёрстка будет валидной и в будущем, когда у тега появится встроенная роль emphasis, вам не нужно будет переписывать код.