HTML тег <i>
Тег HTML <i> выделяет текст иным голосом или настроением — иностранные фразы, термины, таксономические названия, мысли — отображается курсивом.
Тег HTML <i> выделяет фрагмент текста, который выделяется из окружающего текста, поскольку написан иным голосом или настроением. По умолчанию он отображается курсивом, однако его назначение семантическое, а не декоративное. В этой главе объясняется, что на самом деле означает тег <i>, чем он отличается от <em>, когда его использовать и как он воспринимается вспомогательными технологиями.
Что на самом деле означает <i>
В HTML5 <i> обозначает текст, который выделяется из обычного изложения без дополнительного смыслового ударения. Типичные варианты использования:
- Иностранные слова или фразы —
<i lang="la">in situ</i>,<i lang="fr">déjà vu</i>. - Технические термины, вводимые или именуемые, например название метода в учебном пособии.
- Таксономические (научные) названия —
<i>Homo sapiens</i>,<i>Felis catus</i>. - Названия кораблей или судов —
<i>HMS Beagle</i>. - Мысли персонажа, цитируемые в тексте повествования.
Браузер отображает всё перечисленное курсивом, однако смысл таков: «этот фрагмент текста концептуально иной», а не «произнесите это громче».
Для иностранных слов добавьте атрибут lang (например lang="la" для латыни). Это указывает программам чтения с экрана переключить правила произношения и помогает инструментам перевода пропускать текст, который не нужно переводить.
<i> и <em>
Это самое важное различие:
<em>передаёт смысловое ударение — слово, которое вы произнесли бы с большей силой, чтобы изменить смысл предложения. «Именно ты съел мой обед?» — указывает на конкретного человека.<i>передаёт иной голос или настроение без дополнительного ударения — иностранный термин, мысль, название вида.
Простой тест: если при чтении вслух вы естественно выделяете слово голосом — используйте <em>. Если слово просто иного рода (иностранное, техническое, название-как-термин) — используйте <i>.
Связанные элементы, сочетающие презентационную и семантическую функцию:
<b>— привлекает внимание (ключевые слова, названия продуктов) без дополнительной важности.<strong>— обозначает текст с высокой важностью, серьёзностью или срочностью.<cite>— название цитируемого творческого произведения (книга, фильм, статья).<mark>— текст, выделенный для справки или по релевантности.
Доступность
Элемент <i> не имеет неявной роли ARIA и не передаёт смысловое ударение программам чтения с экрана — они не изменят интонацию для текста в <i>. Таким образом, <i> является лишь подсказкой о виде текста, а не о его важности.
В связи с этим, если ударение действительно должно быть доступно пользователям вспомогательных технологий (от него зависит смысл предложения), вместо <i> используйте <em>, который программы чтения с экрана могут передавать с голосовым выделением. Оставьте <i> для случаев, когда курсив указывает на категорию, а не на выразительность.
Синтаксис
Тег <i> используется парами. Содержимое записывается между открывающим (<i>) и закрывающим (</i>) тегами.
Пример HTML-тега <i>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<!-- Foreign phrase, with lang for correct pronunciation -->
<p>The samples were examined <i lang="la">in situ</i> before removal.</p>
<!-- Taxonomic name -->
<p>The domestic cat is <i>Felis catus</i>.</p>
<!-- A character's thought -->
<p>She paused at the door. <i>What if no one is home?</i></p>
</body>
</html>Атрибуты
Тег <i> поддерживает глобальные атрибуты и атрибуты событий.
Стилизация тега <i>
Сохраняйте <i> для его семантического назначения и используйте CSS только для изменения внешнего вида — нет необходимости заменять его несемантическим элементом. Например, можно оставить курсив по умолчанию и при этом изменить цвет:
<style>
i {
color: #555;
}
</style>
<p>The domestic cat is <i>Felis catus</i>.</p>Если курсив нужен только по визуальным причинам без семантического смысла, предпочтительнее использовать свойство CSS font-style на обычном элементе вместо добавления тега <i>.