Come usare grassetto e corsivo in HTML per i testi
È un tema piuttosto vecchio, ma ciclicamente torna nei discorsi social e in realtà anche nelle conversioni che abbiamo con i nostri utenti: il grassetto e il corsivo in HTML hanno un valore, oltre a quello estetico? C’è differenza nell’uso dei tag HTML strong e bold in un testo? E tra italic ed emphasized? E quanto l’uso di questi segnali dei font influiscono sulla SEO? Ecco allora qualche indicazione che speriamo possa chiarire la questione e tranquillizzare i SEO copywriter e gli editori, partendo da una considerazione generale: la gestione della tipografia non va fatta solo pensando all’effetto estetico, perché la scelta dei font, l’uso del grassetto e del corsivo o l’incremento delle dimensioni del carattere sono strumenti cruciali per migliorare l’utilità e la leggibilità dei contenuti che offriamo ai nostri lettori.
Che cos’è il grassetto in HTML
Il grassetto in HTML è un elemento di formattazione del testo che rende le lettere più spesse e scure rispetto al testo normale. In questo modo, possiamo guidare l’occhio del lettore verso informazioni rilevanti, migliorando la leggibilità del testo ed evidenziando concetti chiave per evitare che possano passare sotto traccia ed essere ignorati.
Questo effetto si ottiene tramite il tag <strong> o <b>. Sebbene entrambi i tag risultino visivamente simili, il <strong> porta con sé un significato semantico aggiuntivo: indica che il testo è di particolare importanza. Questo può avere implicazioni non solo per i lettori umani, ma anche per i motori di ricerca e le tecnologie assistive.
Come scrivere in grassetto: applicare lo strong a frasi o parole
Per applicare il grassetto a un segmento di testo dobbiamo racchiudere il testo desiderato all’interno dei tag <strong> o <b>. Ad esempio, <strong>questo testo è importante</strong> renderà il testo “questo testo è importante” in grassetto. È una pratica semplice, ma che può fare la differenza nella leggibilità e nell’organizzazione delle informazioni su una pagina web.
Scendendo in maggiori dettagli, scrivere in grassetto su una pagina web è un’operazione che può variare leggermente a seconda dell’ambiente in cui stiamo lavorando. In particolare, se usiamo un Content Management System (CMS) come WordPress, Joomla o Drupal abbiamo di solito a disposizione due modalità principali per applicare il grassetto – tramite l’editor visuale o direttamente nell’editor di codice HTML – a cui si aggiungono i comandi integrati da tastiera.
- Editor Visuale
La maggior parte dei CMS moderni offre un editor visuale, talvolta chiamato WYSIWYG (What You See Is What You Get), che permette di formattare il testo in modo simile a un elaboratore di testo tradizionale. Per applicare il grassetto:
- Selezioniamo il testo che vogliamo rendere in grassetto.
- Clicchiamo sul pulsante corrispondente, solitamente rappresentato da una “B” in grassetto.
- Il CMS automaticamente aggiungerà i tag HTML necessari senza che l’utente debba scrivere alcun codice.
- Editor di Codice HTML
Se preferiamo avere un controllo più diretto o se dobbiamo lavorare su aspetti più tecnici, possiamo passare alla visualizzazione del codice HTML, spesso accessibile tramite un pulsante come “Testo”, “Codice sorgente” o simili. In questa modalità:
- Troviamo il punto del testo dove desideriamo applicare il grassetto.
- Inseriamo il tag di apertura <strong>prima del testo da enfatizzare.
- Aggiungiamo il tag di chiusura </strong>subito dopo il testo in questione.
- Il risultato sarà simile a questo: <strong>Questo testo sarà in grassetto</strong>.
- Comandi Integrati
Alcuni editor di testo avanzati o ambienti di sviluppo integrato (IDE) possono offrire scorciatoie da tastiera per applicare rapidamente il grassetto. Ad esempio, potrebbe essere possibile selezionare il testo e premere un tasto o una combinazione di tasti (come Ctrl + B su Windows o Cmd + B su macOS) per incapsulare automaticamente il testo nei tag <strong>.
Che cos’è il corsivo in HTML
Il corsivo è un altro stile di formattazione che inclina leggermente le lettere verso destra, conferendo al testo un aspetto diverso rispetto al normale. In HTML, il corsivo si ottiene con i tag <em> o <i>. Analogamente al grassetto, il tag <em> ha un valore semantico che va oltre la pura estetica: indica che il testo ha un’enfasi particolare o è pronunciato con un tono diverso.
Spesso usato per citazioni, termini stranieri, titoli di opere o per esprimere un tono di voce diverso, il corsivo aiuta a creare una distinzione sottile ma significativa nel flusso del testo. È quindi un modo efficace per differenziare il tono o l’importanza di una frase o di una parola all’interno di un contesto più ampio.
Come scrivere in corsivo: applicare l’enfasi a frasi o parole
Per mettere in corsivo un pezzo di testo, si utilizzano i tag <em> o <i> in modo simile al grassetto. Ad esempio, <em>questo testo è enfatizzato</em> farà apparire “questo testo è enfatizzato” in corsivo.
Dal punto di vista pratico, valgono le indicazioni date in precedenza, e quindi queste sono le tecniche per inclinare il testo sia che operiamo in un CMS o in un editor di testo puro.
- Editor Visuale
Nell’ambiente user-friendly di un editor visuale, l’applicazione del corsivo è intuitiva:
- Selezioniamo la porzione di testo che desideriamo mettere in corsivo.
- Clicchiamo sull’icona corrispondente, spesso rappresentata da una “I” inclinata.
- Il sistema inserirà automaticamente i tag necessari per noi, senza che sia richiesto alcun intervento manuale nel codice.
- Editor di Codice HTML
In caso di approccio manuale o di maggiore precisione, l’editor di codice HTML è la strada da percorrere. Ecco i passaggi da seguire:
- Individuiamo nel testo il punto esatto dove vogliamo che appaia il corsivo.
- Inseriamo il tag di apertura <em>prima della frase o della parola da enfatizzare.
- Posizioniamo il tag di chiusura </em>immediatamente dopo il testo selezionato.
- Il codice risultante sarà qualcosa di simile a: <em>Questo testo sarà in corsivo</em>.
- Comandi Integrati
In alcuni editor di testo avanzati o IDE, potremmo avere a disposizione dei comandi rapidi per applicare il corsivo: in questo caso, basta selezionare il testo e utilizzare una scorciatoia da tastiera, come Ctrl + I su Windows o Cmd + I su macOS, per avvolgere il testo selezionato nei tag <em> in modo automatico.
Tag di enfasi dei font, il mito degli effetti SEO e l’impatto reale
Quando si parla di SEO, spesso si cade nel mito che ogni piccolo elemento di una pagina web possa essere un fattore di ranking per Google. Tuttavia, è importante distinguere tra ciò che effettivamente influisce sul posizionamento e ciò che invece migliora l’esperienza dell’utente – elemento assolutamente centrale e non trascurabile, ma che non implica una connessione diretta con il miglioramento della visibilità organica.
Ripartendo dalle basi: Google, con la sua complessa e sempre evolutiva intelligenza artificiale, ha l’obiettivo di fornire agli utenti i risultati più pertinenti e di qualità, e quindi anche intuitivamente si può comprendere che segnare una parola o una frase con i tag corsivo o grassetto non può certamente influenzare in maniera decisa gli algoritmi.
E allora, sgomberiamo subito il campo: non è mai stato negato che possa esserci un valore blando per la SEO nell’uso dei tag strong ed emphasized, ma ciò che ci importa è che di sicuro c’è un valore in termini di usabilità e leggibilità per le persone, che a colpo d’occhio possono individuare le parti di testo a cui si è deciso di dare rilievo.
Grassetto, corsivo ma non solo: l’evoluzione dei tag HTML nel web semantico
Quest’ultima affermazione si lega a doppio filo alla storia di questi tag HTML, che si sono evoluti nel corso del tempo per accompagnare il passaggio da un semplice linguaggio di markup a uno che cerca di comprendere e categorizzare il contenuto in modo più significativo, come da caratteristiche del cosiddetto Web semantico.
Fin dai primi passi del codice HTML erano presenti alcuni tag che consentivano di dare un aspetto diverso al testo nella resa dei browser: <b> era l’etichetta del grassetto, <i> quella del corsivo e <u> quella della sottolineatura. In tutti e tre i casi, si tratta di note dalla sola valenza grafica, che non aggiungevano informazioni particolari sulle parole evidenziate per i crawler. In altri termini, questi tag erano puramente presentazionali: indicavano al browser di visualizzare il testo in un certo modo, ma non fornivano alcun contesto o significato aggiuntivo. In un’epoca in cui il web era principalmente una collezione di documenti statici, questa semplicità era sufficiente.
Con l’introduzione di HTML 2.0 fino a HTML 5.0 si è assistito a un cambiamento significativo con l’aggiunta dei tag <strong> e <em>, progettati per aggiungere un livello di significato semantico al testo, non solo per cambiarne l’aspetto. Siamo appunto nel web semantico e la deprecazione definitiva dei vecchi tag è stata non solo formale, ma sostanziale: le nuove indicazioni hanno una capacità espressiva maggiore e comunicano un significato ben specifico, interpretabile dai crawler dei motori di ricerca.
Il web semantico è un’estensione del web attuale, in cui l’informazione è data in modo da essere comprensibile non solo agli esseri umani ma anche alle macchine. In questo contesto, l’importanza di tag semantici come <strong> e <em> è cresciuta, poiché consentono ai motori di ricerca e ad altri strumenti di analizzare meglio il contesto e il significato del contenuto. Anche altri tag presentazionali come <font> e <center> sono stati deprecati in favore di CSS (Cascading Style Sheets), che separa il design dalla struttura del contenuto, permettendo una maggiore flessibilità e accessibilità. Inoltre, HTML5 ha introdotto nuovi elementi semantici come <article>, <section>, <nav>, e <header>, che aiutano a definire la struttura e il layout del contenuto in modo più significativo.
Quali sono i tag html legati alla tipografia
La tipografia web è come il tono di voce di una conversazione: può influenzare non solo come le parole vengono percepite, ma anche come vengono comprese.
Come detto, già alle origini di HTML c’era la possibilità di utilizzare dei tag per “modificare” la presentazione visiva del testo onpage; i classici tag presentazionali erano comunemente usati per modificare l’aspetto del testo, e tra i principali ricordiamo:
- <b> rende il testo in grassetto. Nello specifico, il tag <b> è abbreviazione di bold (che in inglese significa grassetto) e indica una differenza stilistica e grafica di una o più parole rispetto al resto del testo, senza attribuire però segnali di importanza specifica di queste parti.
- <i> rende il testo in corsivo. Nello specifico, il tag <i> è abbreviazione di italic(che in inglese significa corsivo, come omaggio al tipografo veneziano Aldo Manuzio e allo stile di scrittura che ricorda la calligrafia) e rappresenta una porzione di testo in cui si esprime qualcosa (un tono o uno stato d’animo, ad esempio) che si discosta dal contenuto rimanente, senza aggiunta di altri significati o elementi di importanza.
- <u> sottolinea il testo. Nello specifico, il tag<u> è abbreviazione di underline (che in inglese significa sottolineato) ed è usato per sottolineare porzioni di testo e distinguerle da quelle vicine.
- <font> definisce il tipo di carattere, la dimensione e il colore del testo.
- <center> centra il testo nella pagina.
- <strike>o <s> mostra il testo con una linea che lo attraversa (strikethrough).
- <big> aumenta la dimensione del testo.
- <small> riduce la dimensione del testo.
Le successive revisioni e i vari aggiornamenti implementati in HTML con l’obiettivo di migliorare la semantica e la struttura dei documenti web hanno poi portato alla creazione di queste nuove marcature semantiche, “nuovi” tag o metodi che forniscono un contesto più ricco per i crawler dei motori di ricerca e migliorano l’accessibilità perché queste indicazioni hanno una capacità espressiva maggiore e comunicano un significato ben specifico, interpretabile dai crawler dei motori di ricerca:
- <strong> indica che il testo è di particolare importanza, con un’enfasi forte. Viene visualizzato in grassetto dai browser.
- <em> mostra un’enfasi (dalle iniziali di “emphasis” in inglese) che potrebbe influenzare il modo in cui il testo viene interpretato. Viene visualizzato in corsivo dai browser.
- CSS (Cascading Style Sheets): Al posto dei tag <font>e <center>, CSS viene utilizzato per definire stili come il tipo di carattere, la dimensione, il colore, l’allineamento e altri aspetti del design. Questo permette una maggiore separazione tra contenuto e presentazione.
- <mark> serve a evidenziare parti di testo.
- <del> indica il testo che è stato eliminato da un documento. Sostituisce <strike>o <s> per fornire un contesto semantico di testo cancellato.
- <ins> indica il testo che è stato inserito in un documento.
- <small> continua ad essere utilizzato, ma con un contesto semantico per indicare testo di minore importanza.
- <sub>e <sup> per la formattazione di testo in apice o in pedice, utili per formulazioni chimiche, matematiche o riferimenti.
L’uso di questi tag va oltre la semplice presentazione visiva: sono parte integrante della struttura semantica di una pagina web e, come tali, possono contribuire a migliorare l’accessibilità e la comprensione del contenuto da parte degli utenti e dei motori di ricerca, che continuano a perfezionare i loro algoritmi per comprendere meglio il contesto e la rilevanza del contenuto. In tal senso, possono flebilmente favorire la corretta indicizzazione e, potenzialmente, un miglior posizionamento nei risultati di ricerca. Ne consegue che sviluppatori e i content creator sono incoraggiati a utilizzare questi tag, anche per contribuire a un web più organizzato e comprensibile, dove il significato è tanto importante quanto la presentazione.
Cosa significa il grassetto con strong
Etichettare uno o più termini con il tag strong significa attribuire una rilevanza netta a questo testo: serve a tematizzare la pagina, può essere usato anche all’interno di heading e potrebbe aiutare a dare importanza anche alle keyword su cui stiamo puntando con la strategia SEO. Non si tratta più di una semplice evidenziazione visiva, ma di un segnale a cui sono sensibili anche i motori di ricerca, che interpretano quel testo come semanticamente importante.
Cosa significa il corsivo con em
Simile il significato del nuovo tag <em>, che serve a enfatizzare (come d’altra parte dice il nome stesso dell’etichetta, emphasis) un testo o una frase che hanno intonazioni diverse dalle altre. Anche in questo caso, ora si aggiunge un’importanza semantica riconosciuta dai crawler, che a loro volta quindi possono attribuire un peso diverso alla porzione di testo così caratterizzata.
L’uso dei tag strong ed em per la SEO
La scelta di deprecare i vecchi <b> e <i> a favore dei tag semantici <strong> e <em> ci offre alcuni spunti di riflessione: innanzitutto, serve a dare una più netta separazione tra contenuto e grafica, liberando i tag dalla definizione dell’aspetto del testo e lasciando loro un compito più utile, quello di segnalare delle informazioni.
Quindi, usando parti in grassetto o in corsivo forniamo non solo una indicazione per la lettura agli utenti (concentra la tua attenzione su questa parola o su questa espressione), ma lanciamo un messaggio anche ai browser, agli strumenti per la lettura dei testi e ai crawler sulla rilevanza che hanno quelle porzioni differenti.
Tornando al ragionamento iniziale, cambiare i tag e privilegiare quelli semantici è una operazione notevole che assume un senso pieno solo la inquadriamo anche in un’ottica di (seppur minima) variazione SEO: è per questo che possiamo dire che inserire le parole chiave in grassetto (ovviamente strong) può avere qualche effetto positivo per il posizionamento delle keyword su cui stiamo lavorando, anche se ovviamente non ci sono riscontri effettivi che possono confermare l’intuizione.
Quando il crawler analizza una pagina ricerca immediatamente le informazioni più rilevanti e quindi l’uso dei tag di enfatizzazione potrebbe essere un modo per fornire tali indicazioni. Inoltre, i testi ben formattati hanno anche un valore per il lettore, che si trova facilitato nella ricerca di informazioni, e abbiamo detto più volte come scrivere online in ottica SEO sia anche e soprattutto scrivere per le persone e non solo per i robots.
Come usare i tag di enfasi nel testo
In definitiva, ecco qualche consiglio pratico per la gestione dei tag di enfasi del testo al momento della scrittura: innanzitutto, per il grassetto dobbiamo usare il tag <strong> ed evitare il tag <b> (che ormai è deprecato); allo stesso modo, per il corsivo useremo il tag <em> invece di <i>.
Queste etichette consentono di evidenziare keyword o code più lunghe per colpire maggiormente l’attenzione degli utenti, dare indicazione ai crawler e ai motori di ricerca ed, eventualmente, ottenere un minimo vantaggio in termini di ranking.
Non bisogna ovviamente esagerare: evidenziare con grassetto lunghe frasi o molte parole rende il testo confusionario e non offre valore aggiunto, così come inserire il corsivo su interi periodi non serve a molto.
Il buon senso resta la bussola che deve orientare il nostro lavoro: il testo deve essere ottimizzato per facilitare la lettura e la comprensione, perché questo significa puntare sulla qualità e produrre un contenuto che piaccia a utenti e motori di ricerca.
La posizione di Google su corsivo e grassetto nei contenuti
Insomma, usare il corsivo e il grassetto in un contenuto non influenza direttamente il ranking di una pagina. Tuttavia, ciò che è chiaro è che Google apprezza i contenuti ben strutturati e facilmente navigabili, e qui entra in gioco l’importanza di questi strumenti tipografici.
In effetti, come ci ricorda John Mueller, nelle sue operazioni per cercare di capire di cosa tratta il contenuto di una pagina web Google “esamina cose diverse, come i titoli di una pagina“, ma analizza anche ciò “che è effettivamente in grassetto o enfatizzato all’interno del testo della pagina”, perché in linea teorica le parti così etichettate hanno in una certa misura un po’ di valore in più, nel senso che è un chiaro segno di ciò che l’autore pensa che siano i passaggi più rilevanti per il topic trattato.
Questo valore, comunque, è relativo solo al contenuto della stessa pagina, ed estremizzando possiamo dire che usare il grassetto per alcuni punti importanti in un paragrafo può aiutare la SEO, ovvero supporta Google a comprendere meglio quel paragrafo o quella pagina. Ma non dobbiamo esagerare in interpretazioni di questo concetto, perché è sempre Mueller a chiarire che “alcuni frammenti di testo in grassetto in un articolo possono inviare segnali più forti a Google, ma mettere in grassetto tutto il testo di una pagina non aggiungerebbe alcun valore“, proprio perché verrebbe meno l’effetto di enfasi di questi tag.
