Paragrafi e citazioni: <p>, <blockquote>, <q>, <cite>

Quattro tag, un solo filo conduttore: dire con precisione di chi sono le parole che stai leggendo. <p> segnala «questo l'ho scritto io»; <blockquote>, <q> e <cite> segnalano invece, con sfumature diverse, «queste parole (o questo titolo) vengono da qualcun altro».

1. <p>: il paragrafo, il tuo testo

<p> racchiude un paragrafo di testo normale, il contenuto che tu scrivi, non una citazione. È l'elemento più comune di HTML ed è anche il contenitore in cui, di norma, vivono le citazioni brevi: una frase con <q> dentro, per esempio, resta comunque dentro un <p>.

<p>Come ricorda la documentazione, l'HTML esiste per strutturare i contenuti.</p>

Fonte: MDN Web Docs: «<p>: The Paragraph element».

2. <blockquote>: la citazione estesa, isolata dal testo

Quando riporti un passaggio lungo con più righe, un paragrafo intero, anche più paragrafi, tratto da un'altra fonte, usa <blockquote>. È un elemento di blocco: esce dal flusso del testo normale, tipicamente indentato dal browser.

<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/blockquote"> 
   <p> L'elemento HTML <blockquote> (o Elemento di citazione a blocco) indica che il testo racchiuso è una citazione estesa. </p> 
</blockquote>

L'attributo cite (facoltativo) è un URL che punta alla fonte originale, non è visibile a schermo, serve come riferimento macchina-leggibile. E una regola precisa della specifica: l'attribuzione (chi ha detto cosa) va scritta fuori dal <blockquote>, non al suo interno.

<blockquote cite="https://it.wikipedia.org/wiki/1984_(romanzo)"> 
   <p>La guerra è pace. La libertà è schiavitù. L'ignoranza è forza.</p> 
</blockquote> 
<p>George Orwell, <cite>1984</cite></p>

Fonte: MDN Web Docs: «<blockquote>»: l'attributo cite è un URL che indica la fonte; l'attribuzione, secondo la specifica, deve stare fuori dall'elemento.

3. <q>: la citazione breve, dentro la frase

<q> fa lo stesso lavoro di <blockquote>, ma per citazioni brevi e inline, dentro il flusso normale di una frase, senza andare a capo, senza uscire dal paragrafo. Il browser aggiunge da solo le virgolette (e sceglie lo stile giusto in base alla lingua della pagina): non serve digitarle a mano.

<p> 
   Come si legge sul sito di Mozilla, 
       <q cite="https://www.mozilla.org/en-US/about/history/details/"> Firefox 1.0 è stato rilasciato nel 2004 ed è diventato un grande successo. </q> 
</p>

Anche <q> accetta l'attributo cite, con lo stesso significato: l'URL della fonte.

Fonte: MDN Web Docs: «<q>»: elemento per citazioni brevi che non richiedono un'interruzione di paragrafo.

4. <cite>: solo il titolo dell'opera, mai il nome di una persona

<cite> rappresenta il titolo di un'opera creativa: un libro, un film, una canzone, un sito, persino un post o un tweet. Qui la specifica è categorica e smentisce un errore diffusissimo: il WHATWG HTML Living Standard dichiara esplicitamente che <cite> non deve mai contenere il nome di una persona, nemmeno quello dell'autore.

<p>
   Il mio libro preferito è <cite>1984</cite> di George Orwell.
</p> <!-- SBAGLIATO: il nome di una persona non e' il titolo di un'opera --> 

<p>
   <q>Ancora sbagliato!</q>, ha detto <cite>Mario Rossi</cite>.
</p>

Fonte: WHATWG HTML Living Standard: «The cite element»: un nome di persona non è il titolo di un'opera e l'elemento non deve essere usato per marcare nomi di persone; MDN Web Docs: «<cite>».

In sintesi

Un solo criterio guida tutti e quattro: chiediti sempre di chi sono le parole e quanto sono lunghe. La risposta ti porta dritto all'elemento giusto, senza doverli ricordare a memoria.