<em>

Тег <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, вам не нужно будет переписывать код.