Tag di testo e formattazione


Lezione 10 / 29

Tag di testo e formattazione

Di Vincenza Neri


tag HTML html5

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 un paragrafo in una pagina html.

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 alcuni tag html per conferire alla nostra formattazione del testo un valore semantico. Gli headings sono un ottimo esempio, ma quali sono gli altri tag che ci aiutano a raggiungere questo obiettivo? Scopriamolo!

 

Grassetto 

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) o, ancor meglio, usare il tag <strong></strong>. 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 anche a livello SEO.
 

Corsivo ( o Italic )

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, ha valenza semantica 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.

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. 
 

 

Precedente

9 Headings