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

Ci sono specifici tag HTML per integrare in un sito web citazioni provenienti da altre fonti. In base allo scenario d’uso si utilizzano <blockquote>, <q> oppure cite / <cite>. I vantaggi delle citazioni HTML sono che danno movimento al corpo del testo, incrementano l’ottimizzazione per i motori di ricerca e consentono di trasmettere meglio i contenuti.

Cosa s’intende con “HTML quotation”?

Le HTML quotation sono speciali tag HTML usati per contrassegnare e rappresentare le citazioni dei documenti HTML. I due tag HTML più importanti per le citazioni sono <blockquote> e <q>. Con il tag <cite> o l’attributo cite è disponibile anche una terza alternativa perfetta per indicare la fonte delle citazioni. Analogamente 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 consentono di rendere i tuoi testi più accattivanti, ma migliorano anche la struttura semantica del documento. I motori di ricerca e altre tecnologie web possono comprendere meglio il significato delle citazioni ed elaborarle, rendendo in definitiva i contenuti più rintracciabili e accessibili.

Quali tipi di elementi HTML per le citazioni esistono?

L’integrazione di una citazione nei tuoi documenti HTML dipende dal tag che scegli di usare. Nelle sezioni che seguono abbiamo riepilogato per te le tre possibili varianti, presentando anche esempi pratici.

Tag <q> (citazione in linea)

Il tag <q> in HTML permette di integrare citazioni nel corpo del testo indicandole tra virgolette. Così non devi interrompere la continuità del testo e puoi mettere visivamente in evidenza il testo citato per i lettori e le lettrici in modo diretto o indiretto. Poiché quando si usano i tag <q> le virgolette vengono aggiunte automaticamente all’inizio e alla fine del passaggio citato, non è necessario inserirle manualmente. Le citazioni con i tag <q> sono usate principalmente per brevi passaggi di testo o un discorso diretto per cui il flusso del testo non deve essere interrotto.

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 evidenziati visivamente con un paragrafo indentato oppure una cornice sottile. Per far risaltare un passaggio rispetto al testo rappresentandolo come paragrafo singolo, usa il tag <blockquote>. Dando movimento al testo eviti passaggi lunghi e noiosi, sottolinei i contenuti più rilevanti e documenti le dichiarazioni importanti con citazioni dirette. Inoltre, sfruttando elementi di progettazione diversi crei una struttura di testo ottimizzata per la SEO. Gli elementi in blocco sono usati perlopiù per le citazioni lunghe. Possono però servire anche per sottolineare visivamente singole frasi importanti o collegamenti.

La funzione principale del tag <blockquote> è dare istruzione ai browser di mettere in evidenza determinati elementi di testo. La formattazione finale della citazione in blocco può variare a seconda del browser. Per definire la forma della citazione in blocco puoi usare attributi HTML o istruzioni CSS come padding per la spaziatura 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 (indicazione della fonte)

Per le citazioni è importante non solo contrassegnarle come tali, ma laddove possibile anche indicare la fonte, per consentire ai lettori e alle lettrici di conoscere la provenienza. Oltre a essere il modo corretto per riportare le citazioni, aumenta la credibilità e la trasparenza. 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 riferimento. Utilizzato in particolare nelle citazioni in blocco, solitamente non viene visualizzato dal browser se le informazioni sono utili per altre tecnologie 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 visualizzata come segue:

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

HTML <cite>

L’elemento HTML <cite> è utilizzato per evidenziare nel testo il titolo di un’opera citata, ad esempio in corsivo. Rendendo i riferimenti immediatamente riconoscibili e citando le fonti assicuri una maggiore trasparenza, tracciabilità e serietà. La sintassi:

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

Nel testo la citazione potrebbe essere visualizzata come segue:

“La citazione riportata è tratta da (indicazione della fonte).”