Тег i отмечает фрагмент, который в тексте звучит «другим голосом»: технический термин, иностранное слово, мысль автора, латинское название. Название - от английского italic, «курсив». Тег парный, закрывающий обязателен, собственных атрибутов нет, только глобальные. Он входит в стандарт и не устарел, а по умолчанию браузер выводит его курсивом.
<p>Она посмотрела на часы и подумала: <i>Опять опоздал.</i></p>В этой статье
Что делает тег i в HTML
Стандарт HTML перечисляет случаи, когда текст принято набирать курсивом, но ударения на нём нет и важным его не считают. Справочник MDN называет такие: технический термин, слово или фраза на другом языке, мысли автора и латинское название вида.
Пример: четыре случая, где нужен i
Нажимайте на кнопки: в каждом случае отмеченный кусок выделен курсивом, вокруг него показаны теги i, а под текстом написано, что именно отмечено. У иностранных слов в теге виден атрибут lang.
Общее у всех случаев одно: выделенное звучит иначе, чем остальной текст, но читателю не сообщается ни «это важно», ни «здесь ударение». Для важности есть strong, для ударения - em.
Тег i или em: как выбрать
Оба тега выводятся курсивом, поэтому на экране их не различить, а различаются они по смыслу. Полный разбор с таблицей есть на странице Тег em или i , здесь только проверочный вопрос.
Изменится ли смысл предложения, если произнести его с ударением на этом слове? Если да - нужен em. Если слово просто звучит иначе (термин, чужой язык, мысль автора) - нужен i. Если курсив нужен только для красоты - класс и CSS.
<p>Она подумала: <i>Опять опоздал.</i></p>
<p>Я <em>вчера</em> купил хлеб.</p>
<p>Чайник <b>Аква-2</b> греет быстро.</p>
<p class="caption">Подпись под фото.</p>Пример: подберите тег к ситуации
Под каждой ситуацией четыре кнопки. После выбора появляется разбор: верно или нет и почему. Внизу подсчёт ответов. Выбор можно менять.
Про тег для жирного шрифта без смысла важности есть страница b.
Как выглядит i и как изменить стиль
У тега прописано font-style: italic: свойство font-style отвечает за наклон, значение italic даёт курсив, значение normal - обычный прямой текст. Мы проверили в Chromium 141: у вложенных i и у i внутри курсивного текста значение то же самое, поэтому там отметка не видна, как и у em. Подробности - в разделе Вложенный em и em внутри курсива .
i {
font-style: normal;
color: #1f4f99;
}
i:lang(en) {
color: #b3261e;
}Первое правило убирает наклон и красит все i в синий, то есть отметка остаётся, но выглядит иначе. Второе правило красит в красный только те, у которых указан английский язык: селектор :lang(en) выбирает элементы по атрибуту lang. О нём следующий раздел.
Атрибут lang и правила записи
Слова на другом языке принято отмечать не только курсивом, но и атрибутом lang: он сообщает язык фрагмента. В значении пишут код языка: en - английский, de - немецкий, fr - французский, la - латинский.
<p>Как говорят англичане, <i lang="en">better late than never</i>.</p>Других атрибутов у i нет, работают только глобальные: class, id, title и остальные. Тег парный: закрывающий </i> обязателен. Внутри допустимы только текст и другие строчные теги, блочные вроде p или div вкладывать нельзя.
<p>Слово <i lang="de">Fernweh</i> означает тоску по дальним странам.</p>
<i><p>Так нельзя: абзац внутри i.</p></i>Тег i и иконки: почему i встречается в чужом коде
В чужом коде можно увидеть <i class="fa fa-home"></i>: так подключают иконку. Многие библиотеки иконок, например Font Awesome, в примерах писали иконку именно тегом i - он короткий, и в него ничего не нужно вкладывать.
Со стороны смысла это не подходит: иконка не текст, звучащий другим голосом, и тег здесь взят лишь как пустой контейнер. Есть и практическая неприятность: правило вроде i { color: #1f4f99; } заденет и иконки, и настоящие курсивные слова сразу.
<!-- так встречается в чужом коде -->
<i class="fa fa-home"></i> Главная
<!-- так лучше писать самому -->
<span class="icon" aria-hidden="true"></span> ГлавнаяСвою иконку лучше оформлять тегом span с классом или встроенным SVG. Атрибут aria-hidden="true" скрывает иконку от программ чтения с экрана, когда рядом есть текст с тем же смыслом. Чужой код с i ломать не нужно: он работает.
Читают ли i программы чтения с экрана
В Chromium 141 у элемента i нет отдельной роли в структуре доступности, а у em есть роль emphasis. Как программы чтения произносят текст внутри i, в том числе с атрибутом lang, мы не проверяли.
Поэтому смысл, который держится только на курсиве, лучше подкрепить словами. Мысль автора проще отметить пояснением «подумала», а иностранное слово - словами «как говорят англичане»: так смысл дойдёт до каждого читателя.
Частые ошибки
Большинство ошибок с этим тегом сводится к одной привычке: считать его кнопкой «курсив».
| Ошибка | Что происходит | Как исправить |
|---|---|---|
i вместо em для акцента | Слову приписан другой голос вместо ударения, смысл предложения не задан | Использовать em |
i для названия книги или фильма | Для названий произведений в стандарте есть отдельный тег | Использовать cite |
i на весь абзац | Длинный курсив читать тяжело, и «другой голос» пропадает | Отмечать только нужную фразу |
i только ради красоты | Тег обещает особый голос, а там просто оформление | Класс и font-style: italic |
i для иконок в своём коде | Правило для i заденет и иконки, и слова | span с классом или SVG |
