Tag HTML <i>
Il tag HTML <i> segna testo in una voce o umore alternativo — frasi straniere, termini tecnici, nomi tassonomici, pensieri — mostrato in corsivo.
Il tag HTML <i> contrassegna un'estensione di testo che si distingue dalla prosa circostante perché si trova in una voce o umore diverso. Per impostazione predefinita viene reso in corsivo, ma il suo scopo è semantico, non decorativo. Questo capitolo spiega cosa significa davvero il tag <i>, come si differenzia da <em>, quando utilizzarlo e come si comporta con le tecnologie assistive.
Cosa significa davvero <i>
In HTML5, <i> rappresenta testo che si distingue dalla prosa normale senza implicare alcuna enfasi di stress aggiuntiva. Gli usi tipici includono:
- Parole o frasi straniere —
<i lang="la">in situ</i>,<i lang="fr">déjà vu</i>. - Termini tecnici che vengono introdotti o nominati, come il nome di un metodo in un tutorial.
- Nomi tassonomici (scientifici) —
<i>Homo sapiens</i>,<i>Felis catus</i>. - Nomi di navi o imbarcazioni —
<i>HMS Beagle</i>. - Il pensiero di un personaggio citato inline all'interno della prosa narrativa.
Il browser mostra tutti questi elementi in corsivo, ma il significato è "questa sequenza di testo è concettualmente distinta," non "di' questo più forte."
Per le parole straniere, aggiungere l'attributo lang (ad esempio lang="la" per il latino). Questo indica agli screen reader di cambiare le regole di pronuncia e aiuta gli strumenti di traduzione a saltare il testo che non dovrebbe essere tradotto.
<i> vs. <em>
Questa è la distinzione più importante:
<em>trasmette enfasi di stress — la parola che si direbbe con maggiore forza per cambiare il significato di una frase. "Sei tu che hai mangiato il mio pranzo?" indica il dito su una persona specifica.<i>trasmette una voce o umore alternativo senza enfasi aggiuntiva — un termine straniero, un pensiero, il nome di una specie.
Un test rapido: se leggendo il testo ad alta voce naturalmente insisteresti sulla parola, usa <em>. Se la parola è semplicemente di un tipo diverso (straniera, tecnica, un nome simile a un titolo), usa <i>.
Elementi correlati che sono sia presentazionali che semantici:
<b>— attira l'attenzione (parole chiave, nomi di prodotti) senza importanza aggiuntiva.<strong>— segna testo di forte importanza, serietà o urgenza.<cite>— il titolo di un'opera creativa citata (libro, film, articolo).<mark>— testo evidenziato per riferimento o rilevanza.
Accessibilità
L'elemento <i> non ha un ruolo ARIA implicito e non trasmette alcuna enfasi di stress agli screen reader — uno screen reader non cambierà il proprio tono per il testo <i>. Quindi <i> è puramente un suggerimento sul tipo di testo, non sulla sua importanza.
Per questo motivo, se l'enfasi deve davvero raggiungere gli utenti di tecnologie assistive (il significato della frase dipende da essa), usa invece <em>, che gli screen reader possono annunciare con stress vocale. Riserva <i> per i casi in cui il corsivo riguarda la categoria, non la forza.
Sintassi
Il tag <i> va a coppie. Il contenuto viene scritto tra il tag di apertura (<i>) e il tag di chiusura (</i>).
Esempio del 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>Attributi
Il tag <i> supporta gli Attributi Globali e gli Attributi di Evento.
Stilizzare il tag <i>
Mantieni <i> per il suo significato semantico e usa CSS solo per regolarne l'aspetto — non è necessario sostituirlo con un elemento non semantico. Ad esempio, puoi mantenere il corsivo predefinito cambiando il colore:
<style>
i {
color: #555;
}
</style>
<p>The domestic cat is <i>Felis catus</i>.</p>Se vuoi il corsivo solo per una ragione visiva senza alcun intento semantico, preferisci la proprietà CSS font-style su un elemento normale invece di aggiungere un tag <i>.