Guida HTML interattiva: Grassetto e corsivo

Q: Come metto il testo in grassetto in HTML?

Racchiudilo in quando le parole sono importanti ( Warning: ), oppure in quando vuoi solo che risaltino senza importanza in più, come il nome di un prodotto. Entrambi appaiono in grassetto di default.

Q: Che differenza c'è tra e ?

significa che il testo è importante, serio o urgente. attira l'attenzione sul testo senza attribuirgli importanza, come le parole chiave in un riassunto. Hanno lo stesso aspetto; la differenza è il significato, che conta per lettori di schermo, motori di ricerca e altri sviluppatori.

Q: Come metto il testo in corsivo in HTML?

Usa per l'enfasi che cambia il senso di una frase ("io l'ho detto" con l'accento su "io"), e per il testo con un tono diverso: parole straniere, termini tecnici, nomi di navi, pensieri. Entrambi appaiono in corsivo.

Q: Come metto il testo in grassetto e corsivo insieme?

Annida i tag: text . Chiudili nell'ordine inverso a quello di apertura. Con il CSS, imposta sia font-weight: bold sia font-style: italic su un solo elemento.

Q: Posso mettere il testo in grassetto con il CSS?

Sì: font-weight: bold (o 700) su qualsiasi elemento. Usa il CSS quando il grassetto è solo visivo, come l'etichetta di un pulsante o lo stile di un'intestazione di tabella, e i tag HTML quando le parole stesse sono importanti o enfatizzate.

Grassetto e corsivo in HTML: i tag strong, b, em e i

Metti il testo in grassetto in HTML con o , e in corsivo con o . Scopri quale tag usare e quando, come unire grassetto e corsivo e come ottenerli invece con il CSS.

Questa pagina include editor eseguibili: modifica, esegui e vedi subito l'output.

Di Kevin Spektor, Cofondatore e CTO

Pubblicato il Sep 24, 2026

Come mettere il testo in grassetto in HTML

Racchiudi il testo in  o . Entrambi lo rendono grassetto:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bold</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
  </style>
</head>
<body>
  <p><strong>Warning:</strong> unplug the device before opening it.</p>
  <p>The <b>Pro</b> plan includes offline mode.</p>
</body>
</html>

Sembrano identici. La differenza è in quello che dicono del testo.

strong o b

Tag	Significato	Esempio
`<strong>`	Contenuto importante, serio o urgente	`<strong>Do not</strong> share your password.`
`<b>`	Risalta, ma senza importanza in più	Parole chiave in un riassunto, il nome di un prodotto, le prime parole di un articolo

Scegli  quando alzeresti la voce o vuoi che chi legge non se lo perda. Scegli  quando il grassetto è una convenzione visiva per quel tipo di testo. Se nessuno dei due va bene e vuoi solo uno stile, usa uno  con una classe e il CSS.

Corsivo: em e i

La coppia del corsivo segue la stessa idea:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Italics</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
  </style>
</head>
<body>
  <p>I <em>never</em> said she took the money.</p>
  <p>I never said <em>she</em> took the money.</p>
  <p>The word <i lang="fr">déjà vu</i> comes from French, and the ship was the <i>Endurance</i>.</p>
</body>
</html>

Tag	Significato	Esempio
`<em>`	Enfasi: spostarla cambia il senso della frase	`I <em>never</em> said that.`
`<i>`	Tono diverso: parole straniere, termini tecnici, nomi di navi, pensieri	`<i lang="la">et cetera</i>`

Le prime due frasi qui sopra usano le stesse parole e significano cose diverse per via di dove si trova . Quando  segna una frase in un'altra lingua, aggiungi un attributo lang perché i lettori di schermo la pronuncino bene.

Alcuni altri tag sono in corsivo di default: <cite> (il titolo di un'opera), <dfn> (un termine che si sta definendo), <address> e <var>. Usali quando sono adatti e lascia fare il resto al loro stile di default.

Grassetto e corsivo insieme

Annida un tag dentro l'altro e chiudili in ordine inverso:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bold italic</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
  </style>
</head>
<body>
  <p><strong><em>Bold and italic</em></strong></p>
  <p><em>Italic with a <strong>bold</strong> word inside</em></p>
  <p><b><i>b and i together</i></b></p>
</body>
</html>

text (chiuso nell'ordine sbagliato) viene comunque mostrato, ma il browser deve riparare l'albero e può spezzare i tuoi elementi; vedi i tag per capire com'è questa riparazione.

Grassetto e corsivo con il CSS

Quando lo stile è solo visivo (il titolo di una card, un prezzo, un'etichetta), usa il CSS sull'elemento stesso invece di aggiungere un tag. font-weight controlla il grassetto e font-style il corsivo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS bold and italic</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    .price { font-weight: bold; color: #16a34a; }
    .semi { font-weight: 600; }
    .note { font-style: italic; color: #4b5563; }
    .calm strong { font-weight: normal; color: #dc2626; }
  </style>
</head>
<body>
  <p>Price: <span class="price">$12</span></p>
  <p class="semi">font-weight: 600</p>
  <p class="note">A note set in italics with font-style.</p>
  <p class="calm"><strong>Still strong</strong>, shown in red instead of bold.</p>
</body>
</html>

L'ultima riga mostra che significato e aspetto sono separati: lo  mantiene il suo significato mentre il CSS gli dà uno stile diverso. Tutta la gamma di spessori (da 100 a 900) è spiegata nella pagina su font-weight in CSS.

Accessibilità

La maggior parte dei lettori di schermo non cambia voce per  o  con le impostazioni predefinite, quindi grassetto e corsivo sono soprattutto indizi visivi. Tutto ciò che l'utente non deve perdersi (un errore, un campo obbligatorio, una scadenza) deve essere chiaro dalle parole stesse, non solo dallo stile. Evita anche lunghi passaggi in corsivo o in grassetto: sono più difficili da leggere, soprattutto per chi ha la dislessia.

Errori comuni

Usare il grassetto come titolo. Una riga di testo in  sopra una sezione non è un titolo per i lettori di schermo. Usa <h2> o <h3> e dagli stile.
Usare  per lo stile. Se nel testo non c'è niente di importante, usa  o il CSS.
Mettere in grassetto un paragrafo intero. L'enfasi funziona quando è rara. Metti in grassetto una frase, non il paragrafo.
Chiudere i tag nell'ordine sbagliato. x, mai x.
Tag vecchi. Il tag  dei vecchi tutorial è obsoleto. Usa i tag qui sopra o font-weight.

Domande frequenti

Come metto il testo in grassetto in HTML?

Racchiudilo in  quando le parole sono importanti (Warning:), oppure in  quando vuoi solo che risaltino senza importanza in più, come il nome di un prodotto. Entrambi appaiono in grassetto di default.

Che differenza c'è tra e ?

 significa che il testo è importante, serio o urgente.  attira l'attenzione sul testo senza attribuirgli importanza, come le parole chiave in un riassunto. Hanno lo stesso aspetto; la differenza è il significato, che conta per lettori di schermo, motori di ricerca e altri sviluppatori.

Come metto il testo in corsivo in HTML?

Usa  per l'enfasi che cambia il senso di una frase ("io l'ho detto" con l'accento su "io"), e  per il testo con un tono diverso: parole straniere, termini tecnici, nomi di navi, pensieri. Entrambi appaiono in corsivo.

Come metto il testo in grassetto e corsivo insieme?

Annida i tag: text. Chiudili nell'ordine inverso a quello di apertura. Con il CSS, imposta sia font-weight: bold sia font-style: italic su un solo elemento.

Posso mettere il testo in grassetto con il CSS?

Sì: font-weight: bold (o 700) su qualsiasi elemento. Usa il CSS quando il grassetto è solo visivo, come l'etichetta di un pulsante o lo stile di un'intestazione di tabella, e i tag HTML quando le parole stesse sono importanti o enfatizzate.

Concetti correlati