Тег em отмечает слово или фразу, на которую падает логическое ударение: если перенести ударение на другое слово, смысл предложения изменится. Название - от английского emphasis, «акцент». Тег парный, закрывающий обязателен, собственных атрибутов нет, только глобальные. Он входит в стандарт и не устарел, а курсивом браузер выводит его по умолчанию.
<p>Я <em>вчера</em> купил хлеб.</p>В этой статье
Что означает тег em в HTML
В устной речи ударение меняет смысл: одну и ту же фразу можно произнести так, что она ответит на разные вопросы. Тег em переносит эту разницу в разметку.
<p><em>Я</em> вчера купил хлеб.</p>
<p>Я <em>вчера</em> купил хлеб.</p>
<p>Я вчера купил <em>хлеб</em>.</p>Первое предложение отвечает на вопрос «кто купил?», второе - «когда?», третье - «что?». Слова везде одни и те же, а смысл разный, поэтому em и считают смысловым тегом, а не оформительским.
Пример: сдвиньте акцент по предложению
Нажимайте на слова: отмеченное слово становится наклонным, вокруг него появляются теги em, а под предложением написано, на какой вопрос оно теперь отвечает.
Отсюда правило применения: em прописывают там, где при чтении вслух вы бы выделили слово голосом и где от этого зависит смысл. Если нужно не изменить смысл, а предупредить читателя, подходит strong.
Тег em или i: как выбрать
Оба тега выводятся курсивом, поэтому на экране их не различить. Различается то, что вы сообщаете читателю и программам.
Проверочный вопрос: изменится ли смысл, если произнести предложение с ударением на другом слове? Если да, нужен em. Если слово выделено потому, что оно звучит «чужим голосом» - иностранное слово, название яхты, мысль героя, - нужен i. Разбор с нуля есть в уроке курса: Чем em отличается от i .
<p>Он назвал проект <em>своим</em>, а не нашим.</p>
<p>Яхта <i>Витязь</i> вышла из порта.</p>| Признак | em | i |
|---|---|---|
| Что сообщает | На слово падает ударение, от него зависит смысл | Текст звучит «другим голосом»: термин, иностранное слово, название |
| Пример | «Он назвал проект своим» | Название яхты, латинское название вида |
| Вид по умолчанию | Курсив | Курсив |
| Роль в структуре доступности (Chromium 141) | emphasis | Отдельной роли нет |
| Вложенность | Каждый уровень усиливает акцент | Смысла не имеет |
Как выглядит em и как это изменить
У тега прописано font-style: italic, то есть наклонный шрифт. Свойство font-style отвечает за наклон: значение italic даёт курсив, значение normal - обычный прямой текст.
em {
font-style: normal;
font-weight: 600;
color: #b3261e;
}С таким правилом акцент выводится не наклонным, а полужирным и цветным. Смысл тега при этом остаётся прежним. Если же курсив нужен только для оформления, без ударения, его задают классом, а em для этого не берут.
Вложенный em и em внутри курсива
Стандарт считает акцент относительным: чем больше у фрагмента предков em, тем сильнее на нём ударение.
<p>Не <em>просто</em> хорошо, а <em>очень <em>хорошо</em></em>.</p>У слова «просто» здесь один тег em, у «очень» тоже один, а у второго «хорошо» два, поэтому ударение на нём сильнее всего. Но браузер эту разницу не рисует: мы проверили в Chromium 141, и у всех уровней вычисленное значение font-style одно и то же - italic. Есть и второй случай: если em находится в тексте, который уже курсивный, акцент не виден вовсе.
Пример: как выглядит em в четырёх случаях
В каждой строке показан вид окружающего текста и вид em, а под ними вывод: видна ли разница. Значения посчитаны скриптом прямо в кадре.
Чтобы акцент был виден внутри курсива, вложенному em возвращают прямое начертание. В типографике так принято: выделение внутри наклонного текста набирают прямым шрифтом.
em em,
i em {
font-style: normal;
}Первый селектор делает прямым вложенный em, второй - em внутри тега i. Для любого другого курсивного родителя селектор строится так же: родитель, пробел, em.
Тег em в HTML и em в CSS: это разные вещи
Слово em встречается в двух местах, и к одному и тому же оно не относится. Тег em - это разметка акцента. Единица em в CSS - это размер, который считается от размера шрифта.
<em>слово</em>p {
font-size: 1.5em;
}Первая запись отмечает слово с ударением. Вторая делает шрифт абзаца в полтора раза крупнее шрифта родителя. Друг с другом они не связаны: единица em ничего не выделяет, а тег em не задаёт размер. Про единицы измерения подробно в уроке: Размер шрифта и единицы измерения: px, em, rem .
Читают ли em программы чтения с экрана
В Chromium 141 элемент попадает в структуру доступности с ролью emphasis, мы проверили это на пустой странице. У i такой роли нет. Но озвучит ли акцент программа чтения с экрана, зависит от самой программы.
NVDA по умолчанию читает слова внутри em ровным голосом. Запрос на озвучивание em и strong в трекере NVDA касается обоих тегов и на сентябрь 2024 года оставался открытым, актуальный статус мы не проверяли. Справочник Дока пишет то же самое: программы чтения пока читают em как обычный текст. Про JAWS и VoiceOver подробнее на странице strong: мы их не проверяли.
Поэтому смысл, который держится только на ударении, лучше подкрепить словами. Вместо голого выделения в «Я вчера купил хлеб» можно написать «Я купил хлеб именно вчера»: так смысл дойдёт до каждого читателя.
Частые ошибки
Почти все ошибки с этим тегом растут из одной привычки: считать его синонимом курсива.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
em ради курсива: название книги, цитата | Тексту приписано ударение, которого в речи нет | Для названий брать i, для оформления - CSS |
em вокруг целого абзаца | Ударение на всём равносильно отсутствию ударения | Отмечать одно-два слова |
em вместо strong для предупреждения | Читатель получает акцент, а не срочность | Использовать strong |
Ожидание, что вложенный em будет выглядеть иначе | Браузер выводит все уровни одинаково | Различать уровни стилем em em |
em внутри курсивного блока без сброса | Акцент не виден | Вернуть прямое начертание: em em или i em |
