Tag HTML <q>
Il tag <q> è un elemento inline che definisce citazioni brevi. Descrizione, attributi ed esempi d'uso.
Il tag <q> è un elemento inline utilizzato per citazioni brevi che si inseriscono nel flusso di una frase e non occupano più righe. La caratteristica distintiva di <q> è che i browser aggiungono automaticamente le virgolette attorno al contenuto — non è necessario digitarle manualmente.
Per citazioni più lunghe e autonome che formano un proprio paragrafo, usa invece l'elemento block-level <blockquote>.
Questa pagina tratta quando usare <q>, le differenze rispetto a <blockquote>, l'attributo cite e il modo specifico a <q> per personalizzare le virgolette inserite tramite la proprietà CSS quotes.
Sintassi
Il tag <q> va in coppia. Il contenuto viene scritto tra il tag di apertura (<q>) e quello di chiusura (</q>).
Esempio del tag HTML <q>:
Tag HTML <q>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Bernard Show says:
<q cite="https://www.wikiquote.org/">He who can, does; he who cannot, teaches.</q>
</p>
</body>
</html>Risultato
<q> vs <blockquote>
Entrambi gli elementi marcano il materiale citato, ma servono scopi diversi:
<q> | <blockquote> | |
|---|---|---|
| Visualizzazione | Inline — fluisce all'interno di una frase | Block-level — un blocco indentato autonomo |
| Lunghezza | Citazioni brevi | Citazioni più lunghe e autonome |
| Virgolette | Il browser le inserisce automaticamente | Nessuna aggiunta; si forniscono manualmente se necessario |
Attributo cite | Supportato (URL della fonte) | Supportato (URL della fonte) |
Usa <q> quando la citazione si trova nel testo corrente, e <blockquote> quando è autonoma. Non digitare le virgolette all'interno di <q> — il browser le fornisce, quindi digitarle produrrebbe virgolette doppie.
Esempio con <q> e <blockquote>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>As the proverb goes, <q cite="https://www.wikiquote.org/">He who can, does; he who cannot, teaches.</q></p>
<blockquote cite="https://en.wikipedia.org/wiki/Alice%27s_Adventures_in_Wonderland">
"We're all mad here. I'm mad. You're mad," said the Cheshire Cat.
</blockquote>
</body>
</html>Si noti che il testo <q> appare con le virgolette aggiunte dal browser, mentre il testo <blockquote> è presentato come un blocco indentato senza virgolette.
L'attributo cite vs l'elemento <cite>
Due funzionalità con nomi simili possono essere facilmente confuse:
- L'attributo
cite(<q cite="...">) contiene un URL leggibile dalla macchina che punta alla fonte della citazione. Non viene visualizzato dal browser — esiste per i motori di ricerca, gli screen reader e gli script. - L'elemento
<cite>è testo visibile usato per indicare il titolo di un'opera di riferimento (un libro, una canzone, un film, un articolo). Per impostazione predefinita viene reso in corsivo.
È possibile usarli insieme — l'attributo cite per la fonte leggibile dalla macchina e un elemento <cite> visibile per il riferimento leggibile dall'utente:
<p>
<q cite="https://www.gutenberg.org/ebooks/11">We're all mad here.</q>
— <cite>Alice's Adventures in Wonderland</cite>
</p>Virgolette automatiche
Le virgolette attorno al contenuto di <q> non fanno parte dell'HTML — i browser le aggiungono tramite CSS, usando gli pseudo-elementi ::before e ::after insieme ai valori content: open-quote e content: close-quote. Il foglio di stile predefinito dell'user agent è simile al seguente:
q::before {
content: open-quote;
}
q::after {
content: close-quote;
}Modificare le virgolette con la proprietà CSS quotes
Poiché le virgolette provengono da open-quote/close-quote, il modo specifico a <q> per personalizzarle è la proprietà CSS quotes. Permette di definire i caratteri da usare senza toccare l'HTML:
<style>
q {
quotes: "«" "»";
}
</style>
<p>He who can, <q>does</q>; he who cannot, teaches.</p>Per rimuovere del tutto le virgolette, impostare quotes: none.
Elementi <q> annidati
Quando si annida un <q> dentro un altro, i browser alternano automaticamente tra stili di virgolette esterne e interne (ad esempio, virgolette doppie all'esterno e singole all'interno). La proprietà quotes accetta una seconda coppia di stringhe per il livello annidato:
<style>
q {
quotes: '"' '"' "'" "'";
}
</style>
<p>
<q>The teacher said, <q>He who can, does.</q></q>
</p>La prima coppia ('"' '"') stilizza il livello esterno, la seconda ("'" "'") stilizza quello annidato.
L'attributo lang e le virgolette specifiche per lingua
Le virgolette variano a seconda della lingua — l'inglese usa "…", il francese usa «… », il tedesco usa „…". I browser scelgono le virgolette corrette in base alla lingua dell'elemento, quindi impostare l'attributo lang su <q> (o su un antenato) produce automaticamente le virgolette appropriate per la lingua:
<p lang="fr"><q>Bonjour le monde</q></p>
<p lang="de"><q>Hallo Welt</q></p>In un contesto francese il browser utilizza le virgolette a caporale («… »), in un contesto tedesco le virgolette basse-alte („…").
Attributi
| Attributo | Valore | Descrizione |
|---|---|---|
| cite | URL | Un URL leggibile dalla macchina che punta alla fonte della citazione. Non viene mostrato all'utente. |
| lang | language-code | Specifica la lingua del contenuto, che determina le virgolette specifiche per la lingua. |
Il tag <q> supporta anche gli Attributi Globali e gli Attributi di Evento.
Come applicare stili a un tag HTML <q>
Poiché le virgolette sono generate da open-quote/close-quote, il controllo di stile più specifico per <q> è la proprietà CSS quotes:
<style>
q {
quotes: "‹" "›";
font-weight: bold;
}
</style>
<p>He who can, <q>does</q>; he who cannot, teaches.</p>