HTML тег <em>
Тег HTML <em> обозначает смысловое ударение, меняет значение фразы и интонацию у экранных читалок. Синтаксис, доступность, примеры.
Тег HTML <em> обозначает смысловое ударение — ту часть предложения, которую вы произнесли бы с особым ударением голоса, и именно это ударение меняет смысл фразы. Это семантический элемент: курсивное отображение, которое вы видите в браузерах, — лишь стиль по умолчанию, а не суть тега.
Произнесите вслух эти два предложения и обратите внимание, как ударение меняет смысл:
<p><em>Cats</em> are great pets.</p> <!-- Cats specifically, not other animals -->
<p>Cats are <em>great</em> pets.</p> <!-- how great they are -->Поскольку <em> несёт смысловую нагрузку, а не только внешний вид, он относится к фразовому содержимому HTML — строчным элементам, которые отражают структуру и намерение текста.
<em> нельзя заменять курсивом CSS. Используйте <em>, когда ударение является частью смысла текста; font-style: italic применяйте лишь тогда, когда нужен наклонный шрифт без изменения смысла.
Почему стоит использовать <em> вместо CSS-курсива (доступность)
Причина выбирать <em> вместо визуального стиля — доступность и семантика. <em> имеет чётко определённый смысл — смысловое ударение, — который спецификация HTML предписывает вспомогательным технологиям передавать; этот смысл остаётся в разметке, где с ним могут работать инструменты, поисковые системы и будущие браузеры. Курсив, заданный с помощью CSS, не несёт никакой семантики: это чисто визуальный эффект. (На практике современные mainstream-экранные читалки пока не меняют интонацию для <em> по умолчанию, но семантическое различие по-прежнему важно и ничего не стоит.)
Это ключевое отличие от тега <i>: <i> тоже отображается курсивом по умолчанию, но явно не несёт смыслового ударения. Он предназначен для текста другого голоса или настроения (технические термины, иностранные фразы, таксономические названия, мысли), а не для выделения смысла.
Если нужно пометить что-то как важное, а не выделенное, используйте <strong> — <strong> сигнализирует о высокой важности, серьёзности или срочности, тогда как <em> — о смысловом ударении. Эти два тега независимы и могут сочетаться.
Вложение <em> для усиления ударения
Согласно спецификации HTML, каждый уровень вложенного <em> увеличивает степень ударения. Это полезно, когда одно выделенное слово внутри уже выделенной фразы должно выделяться ещё сильнее:
<p><em>Please, <em>do</em> remember to call.</em></p>Здесь вся фраза выделена, а слово «do» выделено на один уровень сильнее. Браузеры по-прежнему отображают каждый уровень курсивом по умолчанию, но вложенность сообщает о нарастающем уровне ударения вспомогательным технологиям и другим инструментам, читающим структуру документа.
Синтаксис
Тег <em> используется парами. Содержимое пишется между открывающим (<em>) и закрывающим (</em>) тегами.
Пример HTML-тега <em>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>It is a normal paragraph</p>
<p>The important part of the text is <em>shown in italic</em>.</p>
</body>
</html>Результат
Атрибуты
Тег <em> поддерживает глобальные атрибуты и атрибуты событий.
Стилизация тега <em>
Поскольку смысл заключён в теге, внешний вид полностью подвластен вам с помощью CSS. Курсив по умолчанию — лишь условность: вы можете переопределить стиль <em> для конкретного дизайна, сохранив семантику и доступность.
Например, если курсив не вписывается в оформление страницы, можно отобразить ударение как жирный красный текст:
<style>
.notice em {
font-style: normal; /* drop the default slant */
font-weight: bold;
color: #c0392b; /* draw the eye with color */
}
</style>
<p class="notice">You <em>must</em> save before closing the editor.</p>Слово «must» по-прежнему несёт смысловое ударение для экранных читалок — изменилось только его визуальное представление. Это разделение смысла (<em>) и представления (CSS) — именно то, ради чего стоит использовать семантический тег.