I tag HTML per le citazioni: come integrare citazioni in HTML

Ci sono specifici tag HTML per integrare in un sito web citazioni pro­ve­nien­ti da altre fonti. In base allo scenario d’uso si uti­liz­za­no <blockquote>, <q> oppure cite / <cite>. I vantaggi delle citazioni HTML sono che danno movimento al corpo del testo, in­cre­men­ta­no l’ot­ti­miz­za­zio­ne per i motori di ricerca e con­sen­to­no di tra­smet­te­re meglio i contenuti.

Cosa s’intende con “HTML quotation”?

Le HTML quotation sono speciali tag HTML usati per con­tras­se­gna­re e rap­pre­sen­ta­re le citazioni dei documenti HTML. I due tag HTML più im­por­tan­ti per le citazioni sono <blockquote> e <q>. Con il tag <cite> o l’attributo cite è di­spo­ni­bi­le anche una terza al­ter­na­ti­va perfetta per indicare la fonte delle citazioni. Ana­lo­ga­men­te alle liste HTML e alle tabelle HTML, le citazioni HTML sono un ottimo modo per evitare testi lunghi e noiosi e dare movimento al testo.

I tag non solo ti con­sen­to­no di rendere i tuoi testi più ac­cat­ti­van­ti, ma mi­glio­ra­no anche la struttura semantica del documento. I motori di ricerca e altre tec­no­lo­gie web possono com­pren­de­re meglio il si­gni­fi­ca­to delle citazioni ed ela­bo­rar­le, rendendo in de­fi­ni­ti­va i contenuti più rin­trac­cia­bi­li e ac­ces­si­bi­li.

Quali tipi di elementi HTML per le citazioni esistono?

L’in­te­gra­zio­ne di una citazione nei tuoi documenti HTML dipende dal tag che scegli di usare. Nelle sezioni che seguono abbiamo rie­pi­lo­ga­to per te le tre possibili varianti, pre­sen­tan­do anche esempi pratici.

Tag <q> (citazione in linea)

Il tag <q> in HTML permette di integrare citazioni nel corpo del testo in­di­can­do­le tra vir­go­let­te. Così non devi in­ter­rom­pe­re la con­ti­nui­tà del testo e puoi mettere vi­si­va­men­te in evidenza il testo citato per i lettori e le lettrici in modo diretto o indiretto. Poiché quando si usano i tag <q> le vir­go­let­te vengono aggiunte au­to­ma­ti­ca­men­te all’inizio e alla fine del passaggio citato, non è ne­ces­sa­rio inserirle ma­nual­men­te. Le citazioni con i tag <q> sono usate prin­ci­pal­men­te per brevi passaggi di testo o un discorso diretto per cui il flusso del testo non deve essere in­ter­rot­to.

L’esempio che segue mostra la sintassi:

<p>Qui si trova il corpo del testo <q>Qui si trova una citazione</q></p>

Tag <blockquote> (citazione in blocco)

Le citazioni in blocco sono passaggi evi­den­zia­ti vi­si­va­men­te con un paragrafo indentato oppure una cornice sottile. Per far risaltare un passaggio rispetto al testo rap­pre­sen­tan­do­lo come paragrafo singolo, usa il tag <blockquote>. Dando movimento al testo eviti passaggi lunghi e noiosi, sot­to­li­nei i contenuti più rilevanti e documenti le di­chia­ra­zio­ni im­por­tan­ti con citazioni dirette. Inoltre, sfrut­tan­do elementi di pro­get­ta­zio­ne diversi crei una struttura di testo ot­ti­miz­za­ta per la SEO. Gli elementi in blocco sono usati perlopiù per le citazioni lunghe. Possono però servire anche per sot­to­li­nea­re vi­si­va­men­te singole frasi im­por­tan­ti o col­le­ga­men­ti.

La funzione prin­ci­pa­le del tag <blockquote> è dare istru­zio­ne ai browser di mettere in evidenza de­ter­mi­na­ti elementi di testo. La for­mat­ta­zio­ne finale della citazione in blocco può variare a seconda del browser. Per definire la forma della citazione in blocco puoi usare attributi HTML o istru­zio­ni CSS come padding per la spa­zia­tu­ra tra il testo e l’elemento, border per lo spessore e il colore della cornice oppure address per il colore dei caratteri.

La sintassi:

<p>Di seguito la citazione relativa</p>
<blockquote>
“Qui si trova la citazione.”
</blockquote>

<cite> o cite (in­di­ca­zio­ne della fonte)

Per le citazioni è im­por­tan­te non solo con­tras­se­gnar­le come tali, ma laddove possibile anche indicare la fonte, per con­sen­ti­re ai lettori e alle lettrici di conoscere la pro­ve­nien­za. Oltre a essere il modo corretto per riportare le citazioni, aumenta la cre­di­bi­li­tà e la tra­spa­ren­za. A questo scopo per entrambi i tag <q> e <blockquote> si prestano l’attributo cite o l’elemento <cite>:

L’attributo HTML cite

L’attributo cite serve per indicare le fonti di una citazione come ri­fe­ri­men­to. Uti­liz­za­to in par­ti­co­la­re nelle citazioni in blocco, so­li­ta­men­te non viene vi­sua­liz­za­to dal browser se le in­for­ma­zio­ni sono utili per altre tec­no­lo­gie come screen reader o bot SEO.

La sintassi:

<p>Di seguito la citazione relativa</q>
<blockquote cite="https://esempio.com/fonte">
“Qui si trova la citazione.”
</blockquote>

Nel testo la fonte potrebbe essere vi­sua­liz­za­ta come segue:

“Qui si trova la citazione.” – Fonte: https://esempio.com/fonte

HTML <cite>

L’elemento HTML <cite> è uti­liz­za­to per evi­den­zia­re nel testo il titolo di un’opera citata, ad esempio in corsivo. Rendendo i ri­fe­ri­men­ti im­me­dia­ta­men­te ri­co­no­sci­bi­li e citando le fonti assicuri una maggiore tra­spa­ren­za, trac­cia­bi­li­tà e serietà. La sintassi:

<p>La citazione è tratta da <cite>indicazione della fonte</cite></p>

Nel testo la citazione potrebbe essere vi­sua­liz­za­ta come segue:

“La citazione riportata è tratta da (in­di­ca­zio­ne della fonte).”