fbpx

Blockquote: le citazioni nel documento html

Condividi su facebook
Condividi su twitter
Condividi su linkedin
Condividi su email
Il tag #blockquote e le #citazioni nel testo #html sono un ottimo modo per aggiungere informazioni importanti per i tuoi lettori.
Tempo di lettura: 6 min.

Se nel testo che stai scrivendo devi inserire delle citazioni, ha due possibilità, che dipendono dal tipo di citazione che devi fare. Il primo tipo, che è anche il meno usato, è il tag q e serve per le citazioni che stanno sulla stessa linea del testo. Il secondo modo è con il tag blockquote che, invece, è l’elemento blocco per le citazioni, per racchiudere almeno un paragrafo di testo. Le citazioni sono elementi interessanti per la struttura html del contenuto e possono essere anche arricchite con attributi semantici molto utili sia per il lettore che per la SEO.

A questo punto della guida HTML dovresti aver una certa padronanza dell’uso dell’editor di testo, degli elementi e attributi del linguaggio. Ormai approfondire un tag in particolare serve più che altro per farsi un’idea approfondita di come gli elementi influenzano l’esperienza del visitatore e la SEO.

Blockquote: blocchi di citazioni

Iniziamo analizzando il tag <blockquote>, di gran lunga quello più usato, che ha normalmente anche un impatto visivo sul testo. La normale convenzione tipografica vuole i blocchi-citazioni (blockquote, appunto) rappresentati con un testo isolato, al centro dell’area tipografica, con una versione del font in corsivo. Ora, che il testo sia al centro, indentato, allineato a sinistra o destra, sono dei dettagli, quello che accade solitamente è che il testo è messo in risalto.

<blockquote>
Considerate la vostra semenza:<br/>
fatti non foste a viver come bruti<br/>
ma per seguir virtute e canoscenza
</blockquote>

Considerate la vostra semenza:
fatti non foste a viver come bruti
ma per seguir virtute e canoscenza.

I blockquote possono essere utilizzati per blocchi di testo citato, sia che il materiale sia un estratto di un’opera letteraria, una canzone, un altro blog post o un messaggio di posta elettronica a cui stai rispondendo. Tecnicamente è un elemento blocco e come tale si comporterà disponendosi sotto al paragrafo precedente.

Da notare, inoltre, che in quanto elemento blocco, non può essere contenuto all’interno di <p>, a sua volta un block-element.

Semantica e informazioni aggiuntive

Segnalare la fonte della citazione è un’ottima pratica sia in ottica di fornire un contenuto esaustivo, sia per Google, che avrà modo di aggiungere anche quell’informazione alle altre della pagina. Fa parte del concetto di web semantico.

Ci sono due modi per farlo: all’elemento blockquote può essere assegnato un attributo cite oppure è possibile aggiungere una riga con il tag <cite> che circonda il titolo dell’opera. Puoi anche fare entrambe le cose, anzi dovresti proprio farle entrambe. La prima per Google e la seconda per l’utente.

<blockquote cite="http://www.gutenberg.org/files/1012/1012-h/1012-h.htm">
Considerate la vostra semenza:<br/>
fatti non foste a viver come bruti<br/>
ma per seguir virtute e canoscenza.
<cite>Dante, "Inferno", Canto XXVI, vv.118-120</cite>
</blockquote>

Considerate la vostra semenza:
fatti non foste a viver come bruti
ma per seguir virtute e canoscenza.
Dante, “Inferno”, Canto XXVI, vv.118-120

In questo caso, la fonte è scritta semplicemente più in piccolo. Per farlo ho incorporato del codice CSS al tema del sito.

Va notato che il tag <cite> dovrebbe includere il titolo dell’opera originale citata e può eventualmente includere il nome dell’autore e altre informazioni (come il numero di pagina o l’atto e il numero di scena). L’attributo cite, invece, solitamente contiene un link a cui la fonte è consultabile o acquistabile.

Il riferimento alla fine della citazione potrebbe essere meglio identificato se fosse collocato all’interno di un elemento <footer> e se il collegamento fosse posto con un tag <a>. Ciò renderebbe ridondante l’attributo cite all’interno del tag blockquote, e potrebbe essere rimosso.

<blockquote>
<p>Considerate la vostra semenza:<br/>
fatti non foste a viver come bruti<br/>
ma per seguir virtute e canoscenza.</p>
<footer>
<cite><a href="http://www.gutenberg.org/files/1012/1012-h/1012-h.htm">Inferno</a>, Canto XXVI, vv.118-120, Dante Alighieri</cite>
</footer>
</blockquote>

Considerate la vostra semenza:
fatti non foste a viver come bruti
ma per seguir virtute e canoscenza.

Inferno, Canto XXVI, vv.118-120, Dante Alighieri

Infine, un blockquote può includere anche un elemento <header>, che potrebbe essere utilizzato per introdurre la citazione stessa o per citare le informazioni dell’intestazione originale, come un’introduzione contestuale.

Citazione in linea

L’elemento di citazione meno usato è quello in linea, <q>. Molti lo ignorano del tutto, più che altro perché l’effetto visivo è riproducibile molto semplicemente aggiungendo delle virgolette. Prima di proseguire, quindi, vorrei sottolineare l’importanza semantica di mettere in relazione i contenuti e di fornire informazioni esaustive ai lettori. In quest’ottica, l’uso del tag <q> diventa molto sensato.

<p>
La mia linea preferita  <cite>dell'Inferno</cite> di Dante è quando dice: <q cite="http://www.gutenberg.org/files/1012/1012-h/1012-h.htm">Fatti non foste a viver come bruti</q>, che secondo me dovremmo tutti tenere a mente.
</p>

La mia linea preferita dell’Inferno di Dante è quando dice: Fatti non foste a viver come bruti, che secondo me dovremmo tutti tenere a mente.

Come vedete, la linea non presenta niente di strano. L’elemento <cite> è semplicemente in corsivo e la citazione riceve delle virgolette, mentre l’attributo cite, invece, sembra non avere alcun effetto. Questo è perché il link di collegamento serve solo agli screen reader o ai bot/crawler per capire che cosa sia quella porzione di testo.

Vantaggi

L’utilizzo del tag <q> al posto delle semplici virgolette presenta alcuni vantaggi.

La visualizzazione delle virgolette può essere modificata tramite CSS, il che è utile per l’internazionalizzazione del testo, poiché non tutti i paesi usano gli stessi simboli per le virgolette. Inoltre, il fatto che il testo sia una citazione da un’altra fonte è semanticamente chiaro, mentre le virgolette potrebbero essere utilizzate per altri motivi: retorica, menzione di una parola o un fraseggio fuori contesto, riportare una vera conversazione.

L’opportunità di includere una citazione e la sua attribuzione collega alla fonte originale del testo citato e fornisce ulteriori informazioni.

Concludendo

Le citazioni sembrano banali, ma sono alquanto complesse e presentano delle difficoltà semantiche non da poco. L’uso corretto arricchisce il testo e aiuta a fornire materiale comprensivo di ogni informazione ai tuoi lettori.

Per maggiori informazioni, ti allego le definizioni ufficiali da MDN:

The HTML Citation element (<cite>) is used to describe a reference to a cited creative work, and must include the title of that work. The reference may be in an abbreviated form according to context-appropriate conventions related to citation metadata.

Se ti è piaciuto l’articolo, non dimenticare di iscriverti alla newsletter per restare aggiornato sui prossimi contenuti!

Tabella dei Contenuti
Tabella dei Contenuti
Giacomo Lanzi

Giacomo Lanzi

Dopo studi in psicologia e letteratura, dal 2010 mi sono dedicato alla grafica web e all'editing per testi universitari. Sono un content creator per il web dal 2012. Dopo un'esperienza di due anni come manager di un team italiano per una compagnia internazionale a Berlino, ho deciso di tornare alla libera professione e di dedicarmi del tutto al web. Oggi offro servizi come autore, content creator, grafico web e SEO expert. Mi caratterizzano un attitudine al pensiero critico, abilità nella guida di un team, la cura dei dettagli e l'impegno che metto in ogni progetto, siano essi personali o professionali.