Tag HTML <em>
Il tag HTML <em> indica l'enfasi vocale, cambia il significato della frase e il modo in cui i lettori di schermo la leggono.
Il tag HTML <em> indica l'enfasi vocale — la parte di una frase che diremmo con un accento vocale maggiore, nel modo in cui l'enfasi può cambiare il significato di una frase. È un elemento semantico: la resa in corsivo che si vede nei browser è solo lo stile predefinito, non lo scopo del tag.
Leggi queste due frasi ad alta voce e nota come l'enfasi ne cambia il significato:
<p><em>Cats</em> are great pets.</p> <!-- Cats specifically, not other animals -->
<p>Cats are <em>great</em> pets.</p> <!-- how great they are -->Poiché <em> porta un significato piuttosto che una semplice apparenza, appartiene al phrasing content di HTML — elementi inline che marcano la struttura e l'intento del testo in prosa.
<em> non è intercambiabile con un corsivo CSS. Usa <em> quando l'enfasi fa parte di ciò che il testo significa; ricorri a font-style: italic solo quando vuoi un testo inclinato senza cambiare il significato.
Perché usare <em> invece del corsivo CSS (accessibilità)
Il motivo per scegliere <em> rispetto allo stile visivo è l'accessibilità e la semantica. <em> porta un significato definito — enfasi vocale — che la specifica HTML dice che le tecnologie assistive dovrebbero comunicare, e quel significato rimane nel markup dove strumenti, motori di ricerca e futuri user agent possono agire su di esso. Il testo in corsivo semplice con stile CSS non comunica nulla di semantico: è un effetto puramente visivo. (In pratica, i principali screen reader attuali non cambiano ancora l'accento vocale per <em> per impostazione predefinita, ma la distinzione semantica è comunque importante e non costa nulla.)
Questo è il contrasto chiave con il tag <i>: <i> esegue anch'esso il rendering in corsivo per impostazione predefinita, ma porta esplicitamente nessuna enfasi vocale. È destinato al testo in una voce o umore alternativo (termini tecnici, frasi straniere, nomi tassonomici, un pensiero), non per enfatizzare il significato.
Se hai bisogno di marcare qualcosa come importante piuttosto che enfatizzato, usa <strong> — <strong> segnala importanza forte, serietà o urgenza, mentre <em> segnala enfasi vocale. I due sono indipendenti e possono essere combinati.
Annidare <em> per un'enfasi maggiore
Secondo la specifica HTML, ogni livello di <em> annidato aumenta il grado di enfasi. Ciò è utile quando una parola enfatizzata all'interno di una frase già enfatizzata deve risaltare ulteriormente:
<p><em>Please, <em>do</em> remember to call.</em></p>Qui l'intera frase è enfatizzata, e la parola "do" è enfatizzata di un livello in più. I browser eseguono ancora il rendering di ogni livello in corsivo per impostazione predefinita, ma l'annidamento comunica il crescente livello di enfasi alle tecnologie assistive e agli altri strumenti che leggono la struttura del documento.
Sintassi
Il tag <em> viene usato in coppia. Il contenuto è scritto tra il tag di apertura (<em>) e quello di chiusura (</em>).
Esempio del tag HTML <em>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>It is a normal paragraph</p>
<p>The important part of the text is <em>shown in italic</em>.</p>
</body>
</html>Risultato
Attributi
Il tag <em> supporta gli Attributi Globali e gli Attributi Evento.
Applicare stili al tag <em>
Poiché il significato risiede nel tag, l'aspetto visivo è interamente controllabile con CSS. Il corsivo predefinito è solo una convenzione — puoi ridefinire lo stile di <em> per un dato design mantenendo intatta la semantica e l'accessibilità.
Ad esempio, in un contesto in cui il corsivo si scontra con il resto della pagina, potresti presentare l'enfasi come testo rosso in grassetto:
<style>
.notice em {
font-style: normal; /* drop the default slant */
font-weight: bold;
color: #c0392b; /* draw the eye with color */
}
</style>
<p class="notice">You <em>must</em> save before closing the editor.</p>La parola "must" mantiene comunque l'enfasi vocale per gli screen reader — è cambiata solo la sua resa visiva. Questo disaccoppiamento tra significato (<em>) e presentazione (CSS) è esattamente il motivo per cui vale la pena usare il tag semantico.