HTML <q> Tag
Das <q>-Tag ist ein Inline-Element für kurze Zitate. Beschreibung, Attribute und Beispiele.
Das <q>-Tag ist ein Inline-Element für kurze Zitate, die in den Textfluss eines Satzes passen und keine mehreren Zeilen umspannen. Das besondere Merkmal von <q> ist, dass Browser automatisch Anführungszeichen um den Inhalt setzen — Sie sollten die Anführungszeichen nicht selbst eingeben.
Für längere, eigenständige Zitate, die einen eigenen Absatz bilden, verwenden Sie stattdessen das Block-Level-Element <blockquote>.
Diese Seite behandelt, wann man <q> verwenden sollte, wie es sich von <blockquote> unterscheidet, das cite-Attribut und die <q>-spezifische Methode zur Anpassung der eingefügten Anführungszeichen mit der CSS-Eigenschaft quotes.
Syntax
Das <q>-Tag wird paarweise verwendet. Der Inhalt wird zwischen dem öffnenden (<q>) und schließenden (</q>) Tag geschrieben.
Beispiel für das HTML-<q>-Tag:
HTML-<q>-Tag
<!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>Ergebnis
<q> vs. <blockquote>
Beide Elemente markieren zitiertes Material, erfüllen aber unterschiedliche Zwecke:
<q> | <blockquote> | |
|---|---|---|
| Darstellung | Inline — fließt in einem Satz | Block-Level — eigenständiger eingerückter Block |
| Länge | Kurze Zitate | Längere, eigenständige Zitate |
| Anführungszeichen | Browser fügt sie automatisch ein | Keine hinzugefügt; eigene bei Bedarf |
cite-Attribut | Unterstützt (Quell-URL) | Unterstützt (Quell-URL) |
Verwenden Sie <q>, wenn das Zitat im laufenden Text steht, und <blockquote>, wenn es für sich allein steht. Geben Sie keine Anführungszeichen innerhalb von <q> ein — der Browser stellt sie bereit, sodass eigene Anführungszeichen doppelt erscheinen würden.
Beispiel mit <q> und <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>Beachten Sie, dass der <q>-Text mit vom Browser hinzugefügten Anführungszeichen erscheint, während der <blockquote>-Text als eingerückter Block ohne Anführungszeichen dargestellt wird.
Das cite-Attribut vs. das <cite>-Element
Zwei ähnlich benannte Elemente werden leicht verwechselt:
- Das
cite-Attribut (<q cite="...">) enthält eine maschinenlesbare URL, die auf die Quelle des Zitats verweist. Es wird vom Browser nicht angezeigt — es existiert für Suchmaschinen, Screenreader und Skripte. - Das
<cite>-Element ist sichtbarer Text, der den Titel eines referenzierten Werks (ein Buch, Lied, Film, Artikel) auszeichnet. Er wird standardmäßig kursiv dargestellt.
Beide können zusammen verwendet werden — das cite-Attribut für die maschinenlesbare Quelle und ein sichtbares <cite>-Element für die menschenlesbare Referenz:
<p>
<q cite="https://www.gutenberg.org/ebooks/11">We're all mad here.</q>
— <cite>Alice's Adventures in Wonderland</cite>
</p>Automatische Anführungszeichen
Die Anführungszeichen um den <q>-Inhalt sind kein Teil des HTML — Browser fügen sie per CSS ein, mithilfe der Pseudo-Elemente ::before und ::after zusammen mit den Werten content: open-quote und content: close-quote. Das Standard-User-Agent-Stylesheet sieht ungefähr so aus:
q::before {
content: open-quote;
}
q::after {
content: close-quote;
}Anführungszeichen mit der CSS-Eigenschaft quotes ändern
Da die Anführungszeichen aus open-quote/close-quote stammen, ist die <q>-spezifische Methode zur Anpassung die CSS-Eigenschaft quotes. Sie ermöglicht es, die zu verwendenden Zeichen zu definieren, ohne das HTML zu verändern:
<style>
q {
quotes: "«" "»";
}
</style>
<p>He who can, <q>does</q>; he who cannot, teaches.</p>Um die Anführungszeichen vollständig zu entfernen, setzen Sie quotes: none.
Verschachtelte <q>-Elemente
Wenn Sie ein <q> in ein anderes verschachteln, wechseln Browser automatisch zwischen äußerem und innerem Anführungsstil (zum Beispiel doppelte Anführungszeichen außen und einfache innen). Die Eigenschaft quotes akzeptiert ein zweites Zeichenpaar für die verschachtelte Ebene:
<style>
q {
quotes: '"' '"' "'" "'";
}
</style>
<p>
<q>The teacher said, <q>He who can, does.</q></q>
</p>Das erste Paar ('"' '"') gestaltet die äußere Ebene, das zweite Paar ("'" "'") die verschachtelte.
Das lang-Attribut und gebietsschemaspezifische Anführungszeichen
Anführungszeichen unterscheiden sich je nach Sprache — Englisch verwendet "…", Französisch «… », Deutsch „…". Browser wählen die richtigen Anführungszeichen basierend auf der Sprache des Elements, sodass das Setzen des lang-Attributs auf <q> (oder einem Vorfahren) automatisch gebietsschemagerechte Anführungszeichen ergibt:
<p lang="fr"><q>Bonjour le monde</q></p>
<p lang="de"><q>Hallo Welt</q></p>In einem französischen Kontext rendert der Browser Guillemets («… »), in einem deutschen Kontext die tief-hoch-Anführungszeichen („…").
Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| cite | URL | Eine maschinenlesbare URL, die auf die Quelle des Zitats verweist. Sie wird dem Benutzer nicht angezeigt. |
| lang | Sprachcode | Gibt die Sprache des Inhalts an, die die gebietsschemaspezifischen Anführungszeichen bestimmt. |
Das <q>-Tag unterstützt außerdem die globalen Attribute und die Ereignisattribute.
So gestalten Sie ein HTML-<q>-Tag
Da die Anführungszeichen durch open-quote/close-quote erzeugt werden, ist die <q>-spezifische Stilkontrolle die CSS-Eigenschaft quotes:
<style>
q {
quotes: "‹" "›";
font-weight: bold;
}
</style>
<p>He who can, <q>does</q>; he who cannot, teaches.</p>