HTML blockquote: citazioni a blocco e indicazione della fonte
HTML <blockquote> indica una sezione autonoma citata da un'altra fonte. Può contenere più paragrafi. Puoi registrare l'URL originale nel suo attributo cite e aggiungere un link separato e visibile in modo che i lettori possano verificare la fonte.
Quando dovresti usare blockquote?
Usa blockquote per presentare una citazione in una sezione separata. Non usarlo soltanto per applicare un rientro o cambiare il colore di un paragrafo. Per una breve citazione all’interno di una frase, usa <q>; consulta la guida all’elemento HTML q.
Una citazione a blocco può contenere paragrafi e altri contenuti di flusso. Mantieni la citazione distinta dalla sua attribuzione: posiziona l'autore o il credito della fonte fuori da <blockquote>. Controlla la formulazione originale e usa solo il materiale necessario per il tuo scopo.
Un esempio completo con un link alla fonte
Salva il seguente codice come quote.html e aprilo in un browser. Non è richiesto alcun server o libreria aggiuntiva. La breve citazione in inglese proviene direttamente dallo Standard HTML.
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Esempio di citazione a blocco</title>
</head>
<body>
<p>Lo standard HTML descrive ciò che rappresenta blockquote nel modo seguente.</p>
<blockquote cite="https://html.spec.whatwg.org/multipage/grouping-content.html#the-blockquote-element">
<p lang="en">a section that is quoted from another source</p>
</blockquote>
<p>Fonte: <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-blockquote-element"
target="_blank" rel="noopener noreferrer"><cite>HTML Standard, blockquote element</cite></a></p>
</body>
</html>Il browser visualizza il paragrafo introduttivo, la citazione e il link alla fonte in quest'ordine. Lo stile predefinito varia, ma i browser comunemente danno alla citazione margini aggiuntivi. Il link apre la sezione pertinente dello Standard HTML. La citazione mantiene la formulazione originale in inglese.
L'attributo cite è diverso da una citazione visibile
L'attributo cite contiene l'URL della fonte citata. Aggiungerlo non visualizza automaticamente un link o un credito alla fonte. Includi un elemento <a> separato e un testo descrittivo quando i lettori devono seguire il riferimento.
L'attributo cite e l'elemento <cite> condividono un nome ma hanno ruoli diversi. L'attributo registra un indirizzo sorgente; l'elemento indica il titolo di un'opera, come un libro o un documento. Il solo nome di un autore non è un titolo di un'opera.
Applica uno stile alla citazione con CSS
Mantieni il significato della citazione in HTML e regola i suoi margini e il bordo con CSS. Collega un foglio di stile dall'esempio head, quindi aggiungi la seguente regola a quel foglio di stile. Puoi anche aggiungere la regola a un foglio di stile esistente usato dalla pagina.
blockquote {
margin: 1.5rem 0;
padding: 0.5rem 1rem;
border-left: 0.25rem solid #477080;
}La citazione acquisisce un bordo a sinistra e spaziatura interna. Se aggiungi colori di sfondo o del testo, mantieni un contrasto leggibile. Non contrassegnare contenuti ordinari, non citati, come blockquote solo per ottenere questo aspetto. Consulta la definizione di blockquote dello HTML Standard e il riferimento MDN blockquote per la sua sintassi e condizioni d'uso.
