Grassetto HTML: i tag b, strong e il CSS

Che cos'è il grassetto HTML

Il grassetto HTML è il testo che il browser disegna con lettere più spesse. Ci sono tre modi per ottenerlo. Prima di tutto, il tag <b>. Poi il tag <strong>. Infine, il CSS può mettere in grassetto qualsiasi testo con font-weight.

Sullo schermo i tre sembrano uguali. Tuttavia, non significano la stessa cosa. Uno è solo uno stile. Un altro dice al lettore che quelle parole contano. E il terzo va nel foglio di stile, non nel testo.

Questa guida spiega quale usare e quando. Poi vedremo cosa fa il grassetto HTML per la SEO, quanto è troppo e come sistemare una pagina in cui quasi ogni riga è in grassetto. Il nostro SEO Checker gratuito segnala proprio quest'ultimo problema, quindi spieghiamo anche la sua regola.

Il tag del grassetto HTML: b

L'elemento <b> è il tag più vecchio per il grassetto HTML. Ci metti dentro le parole e il browser le mostra in grassetto. Ecco l'esempio più semplice:

<p>Aggiungi <b>due tazze</b> di farina.</p>

Oggi lo standard HTML dà a <b> un ruolo limitato. Segna parole che devono risaltare, ma che non sono più importanti del resto. Per questo non aggiunge nulla al significato. Cambia solo l'aspetto delle parole.

Quando usare il tag b

Usa <b> quando vuoi che l'occhio si fermi su una parola, ma non stai avvisando né sottolineando nulla. Per esempio:

• Parole chiave in un riassunto, così si legge al volo.
• Nomi di prodotti in una recensione.
• Le prime parole di una breve notizia, che alcuni siti mettono in grassetto.
• Parole di un elenco che il lettore deve ritrovare in fretta.

L'HTML Living Standard definisce <b> l'ultima risorsa. In altre parole, scegli prima un tag con un significato vero. Poi usa <b> solo quando nient'altro va bene.

Il tag strong

Anche il tag <strong> mostra il testo in grassetto. Tuttavia, porta anche un messaggio. Dice che quelle parole sono importanti, serie o urgenti.

<p><strong>Attenzione:</strong> stacca la spina prima di aprire il dispositivo.</p>

Quel significato conta. I motori di ricerca e gli strumenti di IA leggono il tag. Inoltre, alcuni screen reader possono annunciarlo, se l'utente attiva questa opzione. Così <strong> dice a tutti loro, e ai tuoi lettori, quali parole pesano di più.

Quando usare il tag strong

• Un avviso, come il rischio di perdere dati.
• Una condizione chiave, come una scadenza o un prezzo.
• L'unica frase di una sezione lunga che nessuno deve perdere.

Puoi anche metterne uno dentro l'altro. Il testo in due tag <strong> conta più di quello in uno solo. In ogni caso, quasi nessuna pagina ne ha bisogno. Se annidi spesso, probabilmente è il testo da riscrivere.

strong o b in HTML

Spesso ci si chiede quale sia "migliore". In realtà, la domanda giusta è quale sia vera per le tue parole. Ecco la risposta breve.

• <b> significa "guarda qui". Aggiunge solo stile.
• <strong> significa "questo conta". Aggiunge significato e stile.
• Entrambi sono in grassetto di default, perché il browser li mostra così.
• Entrambi sono HTML5 valido. Nessuno è vecchio o vietato.

Quindi fatti una domanda. Se leggessi la frase ad alta voce, calcheresti queste parole? Se sì, usa <strong>. Se vuoi solo che attirino l'occhio, usa <b>. E se il grassetto fa parte del design, come l'etichetta di un pulsante, usa invece il CSS.

E il corsivo? Funziona allo stesso modo. Il tag <em> aggiunge enfasi, mentre <i> cambia solo l'aspetto. Di conseguenza, le coppie tornano: strong ed em portano significato, b e i portano stile.

Testo in grassetto con il CSS

Quando il grassetto fa parte del design, va nel CSS. Titoli, pulsanti, link del menu e intestazioni di tabella sono buoni esempi. La proprietà che serve è font-weight.

.price {
  font-weight: 700;
}

I valori vanno da 100, sottile, a 900, molto spesso. Il testo normale è 400 e il grassetto è 700. Puoi anche scrivere bold al posto di 700, perché significano la stessa cosa.

bold, bolder e i numeri

La parola bolder significa un gradino più spesso del testo genitore. Sembra comodo. Tuttavia, il risultato dipende dal font. Se un font non ha il peso 800, il browser può imitarlo o saltarlo. Perciò i numeri fissi sono più prevedibili.

Una nota sui font

Un web font è bello in grassetto solo se carichi il suo file in grassetto. Altrimenti il browser allarga le lettere normali per imitarlo. Quel finto grassetto sembra sfocato. Quindi carica il peso 700 di ogni font che vuoi mettere in grassetto.

Infine, il CSS può anche togliere il grassetto. Per esempio, strong { font-weight: 600; } alleggerisce un po' il testo strong su tutto il sito. Il significato resta, perché il tag è ancora lì.

Il grassetto aiuta la SEO?

Un po', e solo quando è onesto. Google ha detto che legge il testo in grassetto come un indizio sul tema di un passaggio. Ma è un indizio piccolo. Non solleva una pagina debole, e non sostituisce mai titoli chiari e un buon testo.

Soprattutto, il grassetto aiuta le persone. Chi legge al volo guarda prima i titoli e poi le parole in grassetto. Quindi, se le tue parole in grassetto riassumono ogni sezione, i lettori restano di più. Ed è proprio questo che vogliono vedere i motori di ricerca.

Quando il grassetto fa male

Il grassetto smette di funzionare quando ce n'è troppo. Se metà pagina è in grassetto, non risalta niente. Peggio ancora, una pagina piena di parole chiave in grassetto sembra keyword stuffing. Per questo audit come Seobility, e anche il nostro strumento, lo segnalano.

Quanto grassetto è troppo

Non esiste un limite ufficiale. In ogni caso, gli strumenti di audit concordano sulla forma del problema. Il nostro SEO Checker conta ogni <b> e ogni <strong> della pagina. Poi mostra un avviso in tre casi.

1. Troppi. La pagina ha più di 20 passaggi in grassetto, e più di uno ogni 40 parole.
2. Ripetuti. Lo stesso testo è in grassetto più di una volta, come una parola chiave in ogni paragrafo.
3. Troppo lunghi. Un passaggio in grassetto supera i 70 caratteri, cioè una frase intera.

La prima regola cresce con la pagina. Una guida di 4.000 parole regge più grassetto di una scheda prodotto di 300. Invece, la seconda e la terza regola valgono per ogni pagina, perché una ripetizione o una frase in grassetto non aiutano mai il lettore.

Perché una frase intera in grassetto è un problema

Una frase in grassetto si legge male. Le lettere spesse stancano sui tratti lunghi. Inoltre, se la frase è così importante, forse merita un titolo o un riquadro. Entrambi risaltano più del grassetto.

Come correggere il troppo grassetto

La correzione è soprattutto lavoro di testo, non di codice. Così ogni pagina richiede solo pochi minuti. Ecco l'ordine che seguiamo sui siti dei clienti.

Passo 1: trova ogni grassetto

Analizza la pagina con il SEO Checker. Poi apri la scheda Elements, dove il testo in grassetto compare con il suo conteggio. Oppure cerca <b> e <strong> nel codice sorgente.

Passo 2: elimina le ripetizioni

Tieni il primo grassetto di ogni espressione ed elimina il resto. Una parola chiave non diventa più forte la terza volta. Infatti, il lettore smette di notarla dopo la prima.

Passo 3: accorcia i passaggi lunghi

Riduci ogni frase in grassetto alle due o tre parole che la reggono. Per esempio, invece di mettere in grassetto tutta la frase "Fai un backup dei file prima di aggiornare", scrivi "Fai un backup dei file prima di aggiornare".

Passo 4: sposta il grassetto di design nel CSS

Etichette, prezzi e intestazioni di tabella sono design. Quindi dai loro una classe e una regola font-weight al posto di un tag. In questo modo non contano più come testo in grassetto.

<!-- Prima -->
<p><b>Prezzo:</b> 29 €</p>

<!-- Dopo -->
<p><span class="label">Prezzo:</span> 29 €</p>

.label { font-weight: 700; }

Passo 5: controlla il risultato

Incolla il nuovo markup nell'editor HTML online e confrontalo con il vecchio. Poi analizza di nuovo la pagina pubblicata. L'avviso dovrebbe sparire. Il video qui sotto mostra tutto il processo su una pagina di esempio.

Grassetto in WordPress, Markdown ed email

Quasi nessuno scrive il grassetto HTML a mano. Invece, lo scrive un editor al posto tuo. Per questo conviene sapere cosa produce ognuno.

WordPress

Il pulsante del grassetto nell'editor a blocchi, o Ctrl+B, scrive <strong>. Per un'enfasi vera va bene. Ma molti autori lo premono solo per rendere il testo più bello. Di conseguenza, gli articoli WordPress finiscono spesso con troppo grassetto. In quel caso, usa piuttosto un titolo o un blocco con stile.

Markdown

In Markdown, due asterischi per lato mettono il testo in grassetto: **così**. Quasi tutti gli strumenti lo trasformano in <strong>. Il nostro convertitore da Markdown a HTML ti mostra l'HTML esatto che ottieni.

L'email è diversa, perché le app di posta tolgono quasi tutto il CSS. Perciò <b> e <strong> sono più sicuri di una classe in un'email. Entrambi funzionano in tutte le caselle principali.

Errori comuni

• Mettere in grassetto una parola chiave in ogni paragrafo per "aiutare la SEO". Sembra stuffing.
• Mettere in grassetto un paragrafo intero perché risalti. Un titolo o una nota fanno meglio.
• Usare <strong> per etichette di design. Usa il CSS, così il tag conserva il suo significato.
• Scrivere <b><strong> insieme. Ne basta uno.
• Caricare un web font senza il suo file in grassetto, che dà un finto grassetto sfocato.
• Usare il vecchio tag <font> o stili in linea. Sposta lo stile nel tuo CSS.

Ognuno di questi errori si corregge facilmente quando lo vedi. Per questo un'analisi veloce viene prima di tutto. Se vuoi ogni dettaglio, vale la pena leggere la pagina MDN sull'elemento strong.

Domande e risposte