HTML-тег <i>

HTML-тег <i> используется для отображения текста курсивом. Изначально он предназначался для типографских целей, таких как выделение или выделение иностранных слов, технических терминов или фраз. Однако сам по себе он не несёт никакой семантической нагрузки и в настоящее время используется в основном для стилизации, когда требуется выделение текста курсивом.

Тег <i> является фразовым тегом, и в современном использовании он часто фокусируется на стилизации текста для визуального представления, а не на выделении или семантике, с чем лучше справляется тег <em> .

Базовый синтаксис HTML-тега <i>

Базовая структура тега <i> : 

<i>Text to be italicized</i>

Текст, заключенный в тег <i> , будет отображаться курсивом.

Атрибуты HTML-тега <i>

  • Глобальные атрибуты: тег <i> поддерживает все глобальные атрибуты, такие как id , class , style и title .
  • Атрибуты событий: Тег <i> поддерживает атрибуты событий, такие как onclick , onmouseover и onkeydown .

Базовый пример HTML-тега <i>

Вот простой пример использования тега <i> для выделения текста курсивом: 

<!DOCTYPE html>
<html>
    <body>
        <p>This is a <i>simple example</i> of italicized text.</p>
    </body>
</html>
Базовый пример HTML-тега i

Пояснение: Слова «простой пример» выделены курсивом с использованием тега <i> .

Использование тега <i> для стилизации

Вы можете использовать тег <i> для стилизации определенных частей текста, таких как иностранные фразы или технические термины: 

<!DOCTYPE html>
<html>
    <body>
        <p>The term <i>et cetera</i> is often abbreviated as etc.</p>
        <p>The word <i>schadenfreude</i> is borrowed from German.</p>
    </body>
</html>
Использование тега i для стилизации

Пояснение: Тег <i> используется для выделения курсивом определенных слов, добавляя визуальное различие без передачи дополнительного семантического значения.

Стилизация тега <i> с помощью CSS

Вы можете применить CSS к тегу <i> для настройки стиля: 

<!DOCTYPE html>
<html>
    <head>
        <style>
            i {
                color: #007BFF;
                font-style: italic;
                font-size: 18px;
            }
        </style>
    </head>
    <body>
        <p>This is a <i>styled</i> example of italicized text.</p>
    </body>
</html>
Оформление тега i с помощью CSS

Результат: курсивный текст отображается синим цветом, имеет больший размер шрифта и курсивное начертание.

Использование <i> с программами чтения с экрана

Тег <i> служит исключительно для оформления и не обеспечивает семантического акцента. Если вы хотите добавить семантическое значение, рассмотрите возможность использования тега <em> , поскольку он выделяет текст для программ чтения с экрана и улучшает доступность.

Практическое применение тега <i>

  • Иностранные слова: Выделяйте курсивом слова или фразы, заимствованные из других языков.
  • Технические термины: различайте технический жаргон или новые термины, введенные в документ.
  • Визуальное оформление: добавьте визуальное отличие к определенным частям веб-страницы, где требуется выделить текст курсивом.
  • Несемантическое использование: используйте тег <i> в целях стилизации без передачи какого-либо дополнительного смысла.