Tag HTML <blockquote>
Scopri il tag HTML <blockquote> per citare contenuti da un'altra fonte, l'attributo cite, l'attribuzione con <footer> e lo stile.
Il tag HTML <blockquote> contrassegna un blocco di testo citato da un'altra fonte — un articolo, un libro, un discorso, un altro sito web. È un elemento semantico, non uno strumento di stile: comunica ai browser, ai motori di ricerca e alle tecnologie assistive che il contenuto racchiuso è una citazione, il che può influire sul modo in cui la pagina viene indicizzata e su come viene annunciata agli utenti di screen reader.
I browser renderizzano <blockquote> con un rientro sinistro e destro per impostazione predefinita. Questo rientro è una comodità, non lo scopo dell'elemento. Usare <blockquote> esclusivamente per rientrare il testo è un anti-pattern — aggiunge un significato falso al tuo markup. Quando hai bisogno solo di un rientro visivo, usa CSS (margin, padding) su un <div> o su un <p>.
<blockquote> è un elemento a livello di blocco e può contenere altro contenuto a blocchi: paragrafi, liste, intestazioni e un <footer> per l'attribuzione. Viene inserito all'interno del tag <body>.
Quando usare <blockquote> vs <q>
Usa <blockquote> per citazioni lunghe e autonome che formano un proprio blocco. Usa il tag inline <q> per citazioni brevi che scorrono all'interno di una frase — i browser aggiungono automaticamente le virgolette al contenuto di <q>, mentre <blockquote> non inserisce virgolette.
Per citazioni brevi e inline all'interno di un paragrafo, usa il tag <q>.
Sintassi
Il tag <blockquote> viene usato in coppia. Il contenuto è scritto tra il tag di apertura (<blockquote>) e quello di chiusura (</blockquote>).
Esempio del tag HTML <blockquote>:
Tag HTML <blockquote>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
A quote from the Cheshire Cat, in the popular children's book, Alice In Wonderland, written by Lewis Carroll
<blockquote cite="https://en.wikipedia.org/wiki/Alice%27s_Adventures_in_Wonderland">
I'm not crazy, my reality is just different than yours.
</blockquote>
</body>
</html>Il pattern di attribuzione: <blockquote> con <footer> e <cite>
Un <blockquote> senza attribuzione non indica al lettore chi ha pronunciato le parole o da dove proviene la citazione. Il modo consigliato e accessibile per attribuire una citazione è seguirla con un <footer> contenente un <cite> visibile per la fonte:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<blockquote cite="https://en.wikipedia.org/wiki/Alice%27s_Adventures_in_Wonderland">
<p>I'm not crazy, my reality is just different than yours.</p>
<footer>
— The Cheshire Cat, in <cite>Alice's Adventures in Wonderland</cite>
</footer>
</blockquote>
</body>
</html>L'elemento <cite> viene renderizzato in corsivo per impostazione predefinita e indica l'opera citata. Essendo parte del testo della pagina, ogni lettore lo vede — a differenza dell'attributo cite su <blockquote>, spiegato di seguito.
Esempio del tag HTML <blockquote> usato con il tag <q>:
Esempio del tag HTML <blockquote> con il tag HTML <q>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p> A quote from the Cheshire Cat, in the popular children's book, Alice In Wonderland, written by Lewis Carroll</p>
<blockquote cite="https://en.wikipedia.org/wiki/Alice%27s_Adventures_in_Wonderland">
I'm not crazy, my reality is just different than yours.
</blockquote>
<q cite="https://www.wikiquote.org/">He who can, does, he who cannot, teaches.</q>
</body>
</html>Attributi
| Attributo | Valore | Descrizione |
|---|---|---|
| cite | URL | Specifica il documento o messaggio sorgente da cui è tratta la citazione. Il valore può essere un URL relativo o assoluto. |
Il tag <blockquote> supporta anche gli Attributi Globali e gli Attributi di Evento.
L'attributo cite è leggibile solo dalle macchine
È facile confondere l'attributo cite con l'elemento <cite>. La limitazione principale dell'attributo cite è che il suo URL non viene mostrato agli utenti — i browser non lo renderizzano come un link visibile. Esiste solo per le macchine: motori di ricerca, script e altri strumenti che leggono il sorgente della pagina.
<blockquote cite="https://example.com/source">
This URL is in the markup, but no reader will ever see or click it.
</blockquote>Ecco perché l'attributo cite non è un sostituto dell'attribuzione visibile. Per attribuire una fonte ai lettori umani, aggiungi un elemento <cite> visibile (tipicamente all'interno di un <footer>, come mostrato sopra). Usali entrambi insieme: l'attributo per le macchine, l'elemento per le persone.
Accessibilità
Gli screen reader generalmente non annunciano che un <blockquote> è una citazione e ignorano completamente l'attributo cite. Quindi, se l'unica cosa che contrassegna il tuo testo come citazione è il rientro o l'attributo cite, un utente non vedente non ha modo di sapere che si tratta di una citazione.
La conclusione pratica:
- Abbina ogni
<blockquote>a un'attribuzione visibile (un<footer>e<cite>) in modo che la fonte faccia parte del contenuto leggibile. - Non fare affidamento sull'attributo
citeda solo per comunicare la fonte. - Non usare mai
<blockquote>per contenuti non citati solo per ottenere il rientro — fornisce informazioni fuorvianti agli utenti di screen reader (e ai motori di ricerca).
Come applicare uno stile al tag <blockquote>
Per impostazione predefinita, i browser rientrano <blockquote> con i margini. Un pattern comune è rimuovere quel valore predefinito e aggiungere un bordo sinistro colorato, padding e corsivo per far risaltare la citazione:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
blockquote {
margin: 1em 0;
padding: 0.5em 1.5em;
border-left: 4px solid #1c8d27;
background-color: #f4f4f4;
font-style: italic;
color: #333;
}
blockquote footer {
margin-top: 0.5em;
font-style: normal;
font-size: 0.9em;
color: #666;
}
</style>
</head>
<body>
<blockquote cite="https://en.wikipedia.org/wiki/Alice%27s_Adventures_in_Wonderland">
<p>I'm not crazy, my reality is just different than yours.</p>
<footer>— The Cheshire Cat, in <cite>Alice's Adventures in Wonderland</cite></footer>
</blockquote>
</body>
</html>Per controllare solo il rientro, usa la proprietà abbreviata margin-left, margin-right o margin.