Tag HTML <i>
A tag HTML <i> marca texto em voz ou humor alternativo — termos estrangeiros, técnicos, nomes taxonômicos, pensamentos — exibido em itálico. Veja exemplos.
A tag HTML <i> marca um trecho de texto que se destaca da prosa ao redor por estar em uma voz ou humor diferente. Por padrão, é renderizado em itálico, mas seu propósito é semântico, não decorativo. Este capítulo explica o que a tag <i> realmente significa, como ela difere de <em>, quando utilizá-la e como ela se comporta para tecnologias assistivas.
O que <i> realmente significa
No HTML5, <i> representa texto que se distingue da prosa normal sem implicar nenhuma ênfase de stress adicional. Os usos típicos incluem:
- Palavras ou expressões estrangeiras —
<i lang="la">in situ</i>,<i lang="fr">déjà vu</i>. - Termos técnicos sendo introduzidos ou nomeados, como o nome de um método em um tutorial.
- Nomes taxonômicos (científicos) —
<i>Homo sapiens</i>,<i>Felis catus</i>. - Nomes de navios ou embarcações —
<i>HMS Beagle</i>. - O pensamento de um personagem citado inline dentro de uma prosa narrativa.
O navegador renderiza todos esses casos em itálico, mas o significado é "este trecho de texto é conceitualmente distinto," e não "diga isso em voz mais alta."
Para palavras estrangeiras, adicione o atributo lang (por exemplo, lang="la" para latim). Isso instrui os leitores de tela a alternar as regras de pronúncia e ajuda as ferramentas de tradução a ignorar textos que não devem ser traduzidos.
<i> vs. <em>
Esta é a distinção mais importante:
<em>transmite ênfase de stress — a palavra que você pronunciaria com mais força para mudar o sentido de uma frase. "Foi você que comeu meu almoço?" aponta o dedo para uma pessoa específica.<i>transmite uma voz ou humor alternativo sem ênfase adicional — um termo estrangeiro, um pensamento, um nome de espécie.
Um teste rápido: se ao ler o texto em voz alta você naturalmente apoiaria na palavra, use <em>. Se a palavra simplesmente é de um tipo diferente (estrangeira, técnica, um nome parecido com título), use <i>.
Elementos irmãos relacionados, apresentacionais mas semânticos:
<b>— chama atenção (palavras-chave, nomes de produtos) sem importância adicional.<strong>— marca texto de forte importância, seriedade ou urgência.<cite>— o título de uma obra criativa citada (livro, filme, artigo).<mark>— texto destacado por referência ou relevância.
Acessibilidade
O elemento <i> não possui papel ARIA implícito e não transmite ênfase de stress para leitores de tela — um leitor de tela não alterará seu tom para texto <i>. Portanto, <i> é apenas uma indicação sobre o tipo de texto, não sobre sua importância.
Por isso, se a ênfase genuinamente precisa chegar aos usuários de tecnologia assistiva (o significado da frase depende disso), use <em> em vez disso, pois os leitores de tela podem anunciá-lo com ênfase vocal. Reserve <i> para casos em que o itálico se refere a categoria, e não a força.
Sintaxe
A tag <i> vem em pares. O conteúdo é escrito entre as tags de abertura (<i>) e fechamento (</i>).
Exemplo da tag 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>Atributos
A tag <i> suporta os Atributos Globais e os Atributos de Evento.
Estilizando a tag <i>
Mantenha <i> para seu significado semântico e use CSS apenas para ajustar sua aparência — não é necessário substituí-lo por um elemento não semântico. Por exemplo, você pode manter o padrão de itálico enquanto altera a cor:
<style>
i {
color: #555;
}
</style>
<p>The domestic cat is <i>Felis catus</i>.</p>Se você quiser itálico apenas por uma razão visual sem intenção semântica, prefira a propriedade CSS font-style em um elemento comum em vez de adicionar uma tag <i>.