Tag HTML per la formattazione del testo
Tag HTML per la formattazione del testo: tag semantici come strong ed em vs. tag presentazionali come b e i, con esempi pratici.
HTML fornisce un insieme di elementi inline per la formattazione del testo. Si dividono in due gruppi, e comprendere la differenza tra loro è la cosa più importante di questa pagina.
- Tag semantici (logici) descrivono cosa significa il testo — che una parola è importante, enfatizzata, un termine definito o un'abbreviazione. Esempi:
<strong>,<em>,<mark>,<abbr>. - Tag presentazionali (fisici) descrivono come il testo dovrebbe apparire — in grassetto, corsivo, sottolineato — senza dire nulla sul suo significato. Esempi:
<b>,<i>,<u>,<small>.
Perché la distinzione è importante
Due elementi possono apparire identici nel browser eppure avere significati molto diversi:
- Screen reader e accessibilità. Uno screen reader può cambiare il tono della voce per
<strong>ed<em>, segnalando importanza ed enfasi a un utente non vedente. Non lo fa per<b>e<i>, che sono silenziosi e puramente visivi. - SEO. I motori di ricerca danno peso al markup semantico. Avvolgere una frase chiave in
<strong>comunica ai crawler che è rilevante;<b>cambia solo il font. - Manutenibilità. Il significato rimane corretto quando il CSS cambia. Se in seguito decidi che il testo importante debba essere rosso anziché in grassetto,
<strong>significa ancora "importante" e basta aggiornare lo stile.
Una buona regola pratica: scegli prima il tag semantico. Usa un tag presentazionale solo quando vuoi specificamente un effetto visivo privo di significato sottostante.
Esaminiamo nel dettaglio ciascun tag di formattazione.
I tag <h1>-<h6>
I tag <h1>-<h6> vengono utilizzati per definire le intestazioni HTML. In HTML esistono 6 livelli di intestazioni: <h1> definisce l'intestazione più importante e <h6> quella meno importante.
Esempio dei tag HTML <h1>-<h6>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>Risultato
I tag <b> e <strong>
Entrambi vengono visualizzati in grassetto per impostazione predefinita, ma hanno significati diversi in HTML5.
- Il tag
<strong>è un tag semantico che contrassegna il testo come avente forte importanza, serietà o urgenza — contenuto che il lettore non dovrebbe perdere. - Il tag
<b>è un tag presentazionale che contrassegna il testo come stilisticamente distinto dalla prosa circostante senza trasmettere importanza aggiuntiva — ad esempio il nome di un prodotto, una parola chiave in un indice o la frase iniziale di un articolo.
Quale scegliere? Se il grassetto esiste per segnalare importanza, usa <strong>. Se vuoi solo il grassetto come convenzione tipografica senza significato aggiunto, usa <b> (o, meglio, applica lo stile con CSS).
Esempio dei tag HTML <b> e <strong>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>We use the <strong> tag to highlight the importance <strong> of this part of the text</strong>.</p>
<p>The <b> tag is a physical tag that stands for <b>bold text</b>.</p>
</body>
</html>I tag <i> e <em>
Entrambi vengono visualizzati in corsivo per impostazione predefinita, ma hanno significati distinti in HTML5.
- Il tag
<em>è un tag semantico che indica enfasi accentuata — il tipo che cambia il significato di una frase ("Io adoro l'HTML" vs. "Io adoro l'HTML"). Uno screen reader può pronunciarlo con maggiore enfasi. - Il tag
<i>è un tag presentazionale per il testo in una voce o umore alternativo: un termine tecnico, una frase in lingua straniera, un pensiero, il nome di una nave o altro contenuto tradizionalmente reso in corsivo — senza implicare enfasi.
Quale scegliere? Se stai enfatizzando una parola in modo che venga letta ad alta voce con accento, usa <em>. Per una convenzione tipografica in corsivo senza enfasi, usa <i>.
Esempio dei tag HTML <i> e <em>:
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph</p>
<p>The important part of the text is defined <em> in italic</em>.</p>
<p><i>Lorem ipsum</i>, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. </p>
</body>
</html>Il tag <pre>
Il tag <pre> viene utilizzato per definire testo preformattato. I browser mostrano il testo racchiuso preservando gli spazi bianchi e le interruzioni di riga.
Esempio del tag HTML <pre>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<pre>Spaces
and line breaks
within this element
are shown as typed.
</pre>
</body>
</html>Il tag <mark>
Il tag <mark> viene utilizzato per presentare una parte del testo come evidenziata o sottolineata a scopo di riferimento.
Esempio del tag HTML <mark>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Learn the HyperText Markup Language on <mark>W3Docs.com</mark>.</p>
</body>
</html>Risultato
Il tag <small>
Il tag <small> riduce la dimensione del font del testo di un livello rispetto alla dimensione base del documento (da medium a small, o da x-large a large). Il tag contiene di solito elementi di importanza secondaria come avvisi di copyright, commenti a margine o note legali.
Esempio del tag HTML <small>:
<!DOCTYPE html>
<html>
<head>
<title>Usage of the SMALL tag</title>
</head>
<body>
<p>The interest rate is only 10%*</p>
<small>* per day</small> /
</body>
</html>I tag <del> e <s>
Il tag <del> specifica una parte del testo che è stata eliminata dal documento. I browser visualizzano questo testo con una riga di cancellazione.
Esempio del tag HTML <del>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p> She likes <del>violets</del> snowdrops․</p>
</body>
</html>Il tag <s> contrassegna testo che non è più accurato o pertinente — ad esempio un vecchio prezzo accanto a uno scontato. (Nota: <s> non è pensato per le eliminazioni in un documento modificato; usa <del> per quello.)
Esempio del tag HTML <s>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p><s>I am studying in high school.</s></p>
<p>I am studying in a university.</p>
</body>
</html>Il contenuto di entrambi i tag viene visualizzato con una riga di cancellazione. Tuttavia, nonostante la somiglianza visiva, questi tag non possono sostituirsi: <del> significa "rimosso in una modifica", mentre <s> significa "non più accurato".
I tag <ins> e <u>
Il tag <ins> definisce il testo che è stato inserito (aggiunto) nel documento, solitamente come complemento di <del>. Il contenuto viene visualizzato sottolineato per impostazione predefinita.
Esempio del tag HTML <ins>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>She likes <del>violets</del> <ins>snowdrops</ins>․</p>
</body>
</html>Risultato
In HTML5 il tag <u> rappresenta un'annotazione non articolata e non testuale — testo contrassegnato con uno stile (una sottolineatura per impostazione predefinita) che porta un significato non espresso nel testo stesso. Gli usi tipici sono segnalare una parola scritta in modo errato o contrassegnare nomi propri nel testo cinese. Evita <u> per decorazione pura, poiché gli utenti potrebbero scambiare una sottolineatura per un link; usa invece CSS text-decoration.
Esempio del tag HTML <u>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Here we used <u>the <u> tag</u>.</p>
</body>
</html>I tag <sub> e <sup>
Il tag <sub> definisce il testo in pedice. Il testo in pedice si trova al di sotto della linea di base degli altri simboli della riga e ha un font più piccolo. Il tag <sup> definisce il testo in apice, posizionato leggermente al di sopra della normale riga di testo e relativamente più piccolo rispetto al resto. La linea di base attraversa il bordo superiore o inferiore dei simboli.
Esempio dei tag HTML <sub> e <sup>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>The formula of water is H<sub>2</sub>O, and the formula of alcohol is C<sub>2</sub>H<sub>5</sub>OH </p>
<p>E = mc<sup>2</sup>, where E — rest energy, m — mass, c — the speed of light. </p>
</body>
</html>Risultato
Il tag <dfn>
Il tag <dfn> contrassegna l'istanza definitoria di un termine — il punto nel testo in cui il termine viene definito, non ogni occorrenza in cui appare. È un tag semantico; i browser lo rendono in corsivo per impostazione predefinita, ma quello stile è incidentale e può essere modificato con CSS.
Esempio del tag HTML <dfn>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p><dfn>HTML</dfn> (HyperText Markup Language ) — The standardized markup language for documents on the World Wide Web. Most web pages contain a description of the markup in the language HTML</p>
</body>
</html>Altri elementi di testo semantici
HTML dispone di diversi altri tag inline che aggiungono significato a tipi specifici di testo. Non servono per lo stile — ciascuno descrive cosa è il testo:
<abbr>— un'abbreviazione o acronimo, es.<abbr title="HyperText Markup Language">HTML</abbr>. L'attributotitlefornisce l'espansione completa al passaggio del mouse.<cite>— il titolo di un'opera citata (un libro, un film, un articolo, ecc.).<q>— una breve citazione inline; il browser aggiunge automaticamente le virgolette.<code>— un frammento di codice di un computer, mostrato con un font monospazio.<kbd>— input da tastiera che l'utente deve digitare, es. Ctrl + C.<samp>— output di esempio da un programma o sistema.<var>— una variabile in un'espressione matematica o in un contesto di programmazione.
Esempio di elementi di testo semantici:
<!DOCTYPE html>
<html>
<body>
<p>The <abbr title="HyperText Markup Language">HTML</abbr> spec is huge.</p>
<p>As stated in <cite>The HTML Handbook</cite>:
<q>Use the right element for the job.</q></p>
<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to run <code>document.title</code>.</p>
<p>The program printed <samp>Hello, world!</samp> where <var>x</var> = 5.</p>
</body>
</html>Tag obsoleti — Da non utilizzare
Alcuni vecchi tag di formattazione sono stati rimossi dallo standard HTML. Potrebbero ancora funzionare nei browser, ma non dovresti mai usarli — sostituisci la presentazione con CSS e il significato con tag semantici:
| Tag obsoleto | Cosa faceva | Usa invece |
|---|---|---|
<font> | Impostava colore, dimensione, carattere | CSS color, font-size, font-family |
<center> | Centrava il contenuto | CSS text-align: center o margin: auto |
<tt> | Testo teletype / monospazio | <code>, <kbd>, <samp>, o CSS font-family: monospace |
<strike> | Testo barrato | <del> / <s>, o CSS text-decoration: line-through |
<big> | Testo più grande | CSS font-size |
Tag strutturali: <p>, <br> e <hr>
I prossimi tre tag non sono tag di formattazione del testo — strutturano il flusso dei contenuti piuttosto che applicare stili alle parole inline — ma sono strettamente correlati e vale la pena trattarli qui.
Il tag <p> definisce il paragrafo. I browser aggiungono automaticamente un margine di 1em prima e dopo ogni paragrafo.
Esempio del tag HTML <p>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>The first paragraph</p>
<p>The second paragraph</p>
</body>
</html>Il tag <br> inserisce un'interruzione di riga singola. A differenza del tag <p>, non viene aggiunto un rientro vuoto prima della riga.
Esempio del tag HTML <br>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document.</title>
</head>
<body>
<h1>How to use the <br /> tag</h1>
<p> We can insert the <br /> tag inside the paragraph, <br /> to transfer a part of the text to another line if necessary.</p>
</body>
</html>In HTML5 il tag <hr> definisce un cambiamento tematico tra elementi a livello di paragrafo in una pagina HTML. Nelle versioni precedenti di HTML veniva usato per disegnare una linea orizzontale sulla pagina separando visivamente il contenuto. In HTML5 l'elemento ha un significato semantico.
Esempio del tag HTML <hr>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Football</h1>
<p>A team sport involving kicking a ball to score a goal. </p>
<hr />
<h1>Basketball</h1>
<p>A game that is played between two teams of five players.</p>
</body>
</html>