Elemento HTML q: citazioni brevi, fonti cite e virgolette

L'elemento HTML q indica una breve citazione all'interno di una frase. I browser di solito aggiungono automaticamente le virgolette e l'attributo cite può registrare l'URL della fonte. Questo attributo non crea un collegamento cliccabile alla fonte, quindi fornisci un collegamento separato nel testo quando i lettori ne hanno bisogno.

Le differenze tra q, blockquote e cite

Utilizzare q quando si citano parole da un'altra fonte all'interno del flusso di una frase. Per una citazione separata contenente più paragrafi, utilizzare una citazione a blocchi con blockquote . Non utilizzare q solo per evidenziare una parola o aggiungere virgolette ironiche.

Un esempio completo con una fonte e una citazione annidata

Salva il codice completo qui sotto come inline-quote.html e aprilo in un browser. La prima citazione è una breve frase tratta dallo Standard HTML. La seconda è un dialogo immaginario scritto per dimostrare le virgolette annidate. Non è necessario alcun server o JavaScript.

<!doctype html>
<html lang="it">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>q e le fonti delle citazioni</title>
  <style>
    body { margin: 24px; font-family: sans-serif; line-height: 1.7; }
    q { quotes: '“' '”' '‘' '’'; }
    a { overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Citazioni brevi e fonti</h1>
  <p>Lo standard HTML descrive il contenuto rappresentato da q come <q lang="en" cite="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-q-element">some phrasing content quoted from another source</q>.</p>
  <p>Fonte: <a href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-q-element" target="_blank" rel="noopener noreferrer"><cite>HTML Standard, q element</cite></a></p>
  <p>Dialogo immaginario: lo studente ha detto: <q>Il cartello dice <q>Si prega di chiudere la porta</q></q>.</p></body>
</html>

La prima citazione rimane nello stesso paragrafo della spiegazione circostante ed è racchiusa tra virgolette. Nel dialogo fittizio, virgolette doppie circondano la citazione esterna e virgolette singole circondano la citazione interna. Il titolo della fonte collegata appare in un paragrafo separato; l'indirizzo nell'attributo cite di q non viene visualizzato automaticamente.

Evitare di aggiungere virgolette duplicate

Se digiti virgolette immediatamente prima, dopo o all'interno di q per racchiudere la stessa citazione, possono duplicare la punteggiatura generata dal browser. L'esempio mette solo le parole citate all'interno di q e lascia le virgolette al browser. Puoi anche scrivere manualmente le virgolette in testo semplice senza q, ma non combinare entrambi i set di virgolette per la stessa citazione.

I marcatori predefiniti possono variare in base alla lingua del documento o dell'elemento e agli stili del browser. La regola CSS quotes dell'esempio imposta esplicitamente le coppie esterne e interne in modo che tu possa confrontare chiaramente i risultati. Rimuovi quella regola per confrontare i valori predefiniti, quindi ripristinala. Modificare l'aspetto non rimuove il significato dell'elemento q come citazione.

Rendi la fonte disponibile ai lettori

L'attributo cite è facoltativo. Usa un indirizzo che fornisca il passaggio originale o il suo contesto, piuttosto che una homepage non correlata. Se i lettori devono leggere l'originale, fornisci anche un elemento a con testo di collegamento specifico, come nell'esempio. Copia accuratamente la formulazione verificata e distingui la citazione dalla tua spiegazione.

Non dare per scontato che ogni lettore di schermo annunci l’inizio e la fine di una citazione q nello stesso modo. Quando l’attribuzione è importante, indica chi ha detto cosa nella frase stessa, per esempio, “Lo standard descrive …”. Per definizioni e condizioni d’uso, consulta la definizione di q nello standard HTML e il riferimento q di MDN.