Ci sono diverse modalità con le quali inserire i tuoi testi quando scrivi una semplice pagina in html. Avrai capito, ormai, che per farlo abbiamo bisogno dei nostri tag.
I tag necessari all’ integrazione di un testo nella nostra pagina sono principalmente gli headings – di cui abbiamo già parlato – e i paragraphs che identificano, appunto, un paragrafo in una pagina html, o, meglio, il contenuto testuale di quest'ultima.
Il paragraph contrassegnato dal tag <p> </p> ha comportamento bloccante : i browser aggiungono automaticamente una singola riga vuota prima e dopo ogni elemento <p>.
Cosa vuol dire? In maniera molto semplice, il tag <p> fa “andare a capo”.
Un altro modo per mandare il testo a capo è il tag <br>
Questi sono i tag utili all’inserimento del testo, tuttavia bisogna sempre tenere a mente che ogni tag racchiude non solo una visualizzazione diversa nella forma (un <h1> appare, di default, più grande di un <h6>, ad esempio), ma anche un significato ben preciso, che fa mutare proprio il senso di ciò che stiamo scrivendo.
Detto questo, se volessimo agire meramente sulla formattazione, basterebbe utilizzare il linguaggio css per modificare lo stile del nostro testo, per circoscriverla ad un mero livello visuale.
Quello che però è sempre meglio fare, come best practice, è utilizzare i tag html per conferire al nostro contenuto testuale un valore semantico. Gli headings sono un ottimo esempio, ma quali sono gli altri tag che ci aiutano a raggiungere questo obiettivo? Scopriamolo!
Grassetto: html bold o strong?
Spiegare come formattare un testo in grassetto è un ottimo punto di partenza, perché andrà senza dubbio a chiarire ogni tua possibile perplessità su quanto detto fino ad ora. Infatti, per conferire al nostro testo un aspetto più deciso (prescindendo dal linguaggio css) abbiamo due possibilità: possiamo utilizzare il tag <b></b> (che sta, appunto, per “bold”, grassetto) che è ormai in disuso, o, ancor meglio, usare il tag <strong></strong>, che va a dire che questa parola abbracciata dal tag è importante. Per fare un parallelismo, è come se, scrivendo su carta, con la mia penna io pigiassi più forte per scriverlo.
Il risultato è visivamente identico: allora perché dobbiamo utilizzare <strong> ?
La differenza tra i due tag è che <strong> ha un valore semantico: quello che va a cambiare è proprio il significato della nostra parola abbracciata da questo tag, che così facendo assume più importanza. Pensiamo nuovamente ad un fruitore non vedente. L'ear reader, scansionando un contenuto abbracciato dal tag <strong> enfatizzerà quella parola! Ne farà capire l'importanza. Ne cogli la potenza? È proprio in virtù di questa differenza che il tag <b> è ormai deprecato.
Ovviamente, ne conseguirà, un ottimo riscontro anche a livello SEO.
Corsivo: html italic o em?
In maniera analoga a quanto detto per il grassetto, per il corsivo possiamo utilizzare il tag <em></em> (che sta per “emphasized text”) oppure <i></i> (che sta, banalmente, per “italic text”), dove il primo, a differenza del secondo (ormai, come e per gli stessi motivi del tag <b>, deprecato!!), ha valenza semantica utile per l'utente prima e, di conseguenza, per la SEO.
Citazioni
Una “citazione” può essere intesa sia come il riferimento a parole pronunciate concretamente da una persona terza, che come riferimento ad un testo tratto da una fonte esterna alla nostra pagina web.
Il tag <blockquote> </blockquote>, anch’ esso dotato di valore semantico, è l'elemento appropriato da usare per identificare la citazione. È molto importante perchè, da buon cittadino del web, stai riconoscendo che quel contenuto testuale non è "farina del tuo sacco" e il motore di ricerca premierà la tua onestà intellettuale… o ti penalizzerà se vorrai fare il furbo!!!
Non ti è perfettamente chiaro il concetto di tag semantico? Fai pure sogni tranquilli! In questo articolo ti abbiamo fornito un accenno alla nozione per farti comprendere meglio quali tag utilizzare per la formattazione del testo, ma ovviamente andremo ad approfondire la cosa con una guida interamente dedicata all’argomento.
