HTML em e strong: enfasi, importanza e differenze rispetto a b e CSS

HTML <em> indica enfasi nell’intonazione in una frase, mentre <strong> indica forte importanza, serietà o urgenza. I browser generalmente li renderizzano rispettivamente come testo corsivo e grassetto, ma scegli un elemento in base al suo significato nel contesto piuttosto che alla sua apparenza predefinita.

In che modo em e strong differiscono?

Usali quando mettere enfasi su una parola particolare cambia il focus di una frase. In “Ho controllato il documento oggi,” enfatizzare “Ho” mette in evidenza chi lo ha controllato, mentre enfatizzare “oggi” mette in evidenza quando. strong evidenzia l'importanza del contenuto stesso, come un avvertimento che i lettori devono sapere o una conclusione importante.

Entrambi gli elementi funzionano all'interno delle frasi. Non avvolgere un intero paragrafo solo per farlo sembrare un grande titolo. Struttura i titoli del documento con h1 fino a h6 e applica l'enfasi significativa solo dove necessario.

Confronta il focus in un esempio completo

Salva questo documento come emphasis.html e aprilo in un browser. Confronta l'accento nelle prime due frasi, l'istruzione importante e la frase finale che utilizza solo lo stile visivo in grassetto.

<!doctype html>
<html lang="it">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Enfasi e importanza</title>
  <style>.visual-bold { font-weight: bold; }</style>
</head>
<body>
  <h1>Enfasi nel contesto</h1>
  <p><em>Io</em> ho controllato il documento oggi.</p><p>Io ho controllato il documento <em>oggi</em>.</p><p><strong>Controlla il backup prima di sostituire il file.</strong></p><p>Termini di questo documento: <b>elemento</b> e <b>attributo</b></p><p>Esempio visivo: <span class="visual-bold">Questa parte è in grassetto tramite CSS.</span></p></body>
</html>

Con stili comuni predefiniti, “Io” e “oggi” appaiono in corsivo, mentre l'istruzione di backup e i termini contrassegnati con b appaiono in grassetto. Anche lo span è in grassetto a causa del CSS, ma non diventa un elemento che esprime una forte importanza. I font e gli stili utente possono cambiare l'aspetto, quindi esprimi chiaramente il significato importante anche nel testo.

Distingui b dallo stile grassetto del CSS

Considerare b semplicemente come “strong senza significato” fa perdere il suo scopo: attira l’attenzione. Usa CSS quando l’aspetto è l’unico obiettivo. Allo stesso modo, non scegliere em solo perché vuoi testo in corsivo.

Rimuovere il corsivo di em o modificare il peso di strong tramite CSS preserva il significato espresso in HTML. Al contrario, rendere un span in grassetto non gli conferisce il significato di strong. Gli annunci effettivi delle tecnologie assistive variano a seconda dell'ambiente, quindi non si deve presumere che cambiamenti vocali specifici avvengano sempre. Vedere la MDN em reference, MDN strong reference e MDN b reference per le definizioni degli elementi.