Tag HTML <b>
Il tag <b> viene usato per evidenziare in grassetto la parte di testo che vogliamo rendere più visibile all'utente
Il tag HTML <b> viene utilizzato per visualizzare una parte del testo in grassetto affinché si distingua. Il tag <b> modifica solo l'aspetto visivo; non ha alcun significato semantico (nemmeno per i motori di ricerca).
Questo capitolo è rivolto a chiunque scriva HTML e voglia mettere il testo in grassetto nel modo corretto. Scoprirai a cosa serve il tag <b> nell'HTML moderno, quando usarlo rispetto a CSS e come si differenzia da <strong>, <i> e <em> — quattro tag facili da confondere.
In HTML5, il tag <b> è destinato all'enfasi stilistica non semantica, come per evidenziare parole chiave, nomi di prodotti o etichette dell'interfaccia utente, anziché essere usato come alternativa ad altri tag.
Quando usare il tag <b>
In HTML5 il tag <b> ha uno scopo specifico e limitato: richiamare l'attenzione su una porzione di testo per motivi puramente stilistici, senza implicare che il testo sia più importante. La specifica HTML elenca tre casi classici:
- Parole chiave in un documento, ad esempio la prima occorrenza di un termine tecnico.
- Nomi di prodotti in una recensione o descrizione.
- La frase di apertura o le parole iniziali del paragrafo di un articolo.
<p><b>HTML</b> is the standard markup language for web pages.</p>
<p>The <b>Galaxy S24</b> ships with a brighter display this year.</p>
<p><b>In a hurry?</b> Skip to the summary below.</p>In ciascun caso il testo in grassetto si distingue visivamente, ma non è necessariamente più importante per il significato della frase — questa distinzione è ciò che separa <b> da <strong>.
Evita di usare il tag <b> per titoli e intestazioni. Usa invece i tag <h1>–<h6>, che hanno un significato nella struttura del documento.
<b> o CSS?
Se il tuo obiettivo è puramente visivo e legato a una regola di design — ad esempio "tutti i nomi di prodotti in questo catalogo sono in grassetto" — applicare il grassetto con la proprietà CSS font-weight è solitamente la scelta migliore, poiché lo stile risiede nel foglio di stile e può essere modificato in un unico punto. Utilizza il tag <b> quando il grassetto fa parte del contenuto stesso del documento (una parola chiave occasionale o un'introduzione), non un pattern di design ripetibile. In ogni caso, nessuno dei due approcci comunica importanza alle tecnologie assistive — per questo occorre <strong>.
Sintassi
Il tag <b> viene usato in coppia. Il contenuto è scritto tra il tag di apertura ( <b> ) e il tag di chiusura ( </b> ).
Esempio del tag HTML <b> :
Esempio del tag HTML <b> |W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document </title>
</head>
<body>
<p><b>This section of the text </b> has been rendered in bold,</p>
</body>
</html>L'aspetto predefinito dell'elemento <b> è il grassetto, ma questa resa in grassetto è solo lo stile predefinito del browser — puoi modificarla con CSS.
Testo in grassetto con CSS
Quando il grassetto è determinato dal design piuttosto che dal contenuto, impostalo con la proprietà CSS font-weight su un <span> (o qualsiasi elemento) invece di usare <b> ``. Questo mantiene lo stile riutilizzabile nel foglio di stile:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document </title>
<style>
.bold-text {
font-weight: 700;
}
</style>
</head>
<body>
<p>
<span class="bold-text">This section of the text </span>
has been rendered in bold.
</p>
</body>
</html> <b> vs <strong>
Sia l'elemento <b> che <strong> visualizzano il testo in grassetto per impostazione predefinita, quindi appaiono identici sullo schermo. La differenza sta nel significato:
<strong><b>
Ecco le stesse parole contrassegnate in entrambi i modi:
<!-- Importance reaches assistive tech -->
<p><strong>Warning:</strong> do not unplug the device while updating.</p>
<!-- Visual attention only, no extra importance -->
<p>The new <b>UltraView</b> monitor is now in stock.</p>Regola generale: se il grassetto significa qualcosa — questo testo è più importante e l'utente di uno screen reader dovrebbe saperlo — usa <strong> . Se vuoi solo un segnale visivo, usa <b> o CSS font-weight.
<b> vs <i> , <em> e <strong>
Questi quattro tag vengono spesso confusi perché due producono grassetto e due producono corsivo. Si dividono lungo la stessa linea di <b> e <strong> — visivo versus semantico:
| Tag | Stile predefinito | Trasmette importanza/enfasi? |
|---|---|---|
<b> | Grassetto | No — solo visivo |
<strong> | Grassetto | Sì — forte importanza |
<i> | Corsivo | No — solo visivo (voce alternativa, termini) |
<em> | Corsivo | Sì — enfasi accentuata |
Quindi <b> è il corrispettivo in grassetto di <i>, e <strong> è il corrispettivo in grassetto di <em>.
Accessibilità
Gli screen reader non assegnano al tag <b> alcun ruolo semantico — il testo viene annunciato esattamente come il testo circostante, senza variazioni di enfasi. Questo è intenzionale, poiché <b> è presentazionale. La conseguenza pratica: non usare mai <b> quando l'importanza del testo deve raggiungere gli utenti di tecnologie assistive. Se una frase è genuinamente più importante, contrassegnala con <strong> (o <em> per l'enfasi parlata) in modo che il significato venga trasmesso a tutti, non solo ai lettori vedenti.
Attributi
Il tag <b> supporta gli Attributi Globali e gli Attributi degli eventi.
Come applicare un attributo globale al tag HTML <b>
<p>The <b class="highlight" title="Important keyword">keyword</b> is emphasized here.</p>