<q>

Das <q>-Element kennzeichnet ein kurzes Inline-Zitat im Fließtext. Browser fügen automatisch die passenden Anführungszeichen ein. Du musst sie also nicht selbst in den Text schreiben. Im Deutschen werden typischerweise „…” (Anführungszeichen unten/oben) verwendet. Das ist der entscheidende Unterschied zu <blockquote>: Während <blockquote> für längere, eigenständige Zitate gedacht ist (als eigener Block), ist <q> für kurze Zitate innerhalb eines Satzes. Auf dieser Seite lernst du, wann <q> die richtige Wahl ist, wie das cite-Attribut funktioniert und worauf du bei verschachtelten Zitaten achten solltest.

Steckbrief <q>

Kategorie: Text & Typografie
Art: Inline
Attribute: 1
Beispiele: 3
Browser: 5 von 5
E-Mail: 2 von 5
Stand: 04.02.2026

Grundlagen

Wenn du im Fließtext jemanden zitierst (einen kurzen Satz, eine Phrase oder ein paar Wörter), ist <q> das richtige Element. Es macht den Text semantisch als Zitat erkennbar und sorgt dafür, dass Browser die sprachlich korrekten Anführungszeichen einfügen.

<q> ist ein Inline-Element: Es fließt im Text mit und erzeugt keinen Zeilenumbruch
Browser fügen automatisch Anführungszeichen ein, du schreibst sie nicht selbst in den HTML-Code
Die Anführungszeichen richten sich nach der Sprache des Dokuments (lang-Attribut): Im Deutschen „…”, im Englischen ”…”
Bei verschachtelten Zitaten wechseln die Anführungszeichen: außen „…”, innen ‚…’
Das optionale cite-Attribut nimmt eine URL als Quellenangabe auf. Die URL ist nicht sichtbar, aber maschinenlesbar
Für längere, eigenständige Zitate (die als eigener Block dargestellt werden) verwende <blockquote> statt <q>

Syntax

index.html

Grundsyntax

<p>Goethe schrieb: <q>Auch aus Steinen, die einem in den Weg
gelegt werden, kann man etwas Schönes bauen.</q></p>

Attribute

1 Attribut

Attribut und Beispiel	Beschreibung
`cite` URL cite="https://example.com/quelle"	URL der Quelle, aus der das Zitat stammt. Die URL ist nicht sichtbar, aber maschinenlesbar für Suchmaschinen und Tools.

Beispiele

3 Beispiele

Wenn du die Quelle eines Zitats angeben möchtest, kannst du das cite-Attribut verwenden. Die URL ist nicht sichtbar, aber Suchmaschinen und andere Tools können sie auslesen:

index.html

Zitat mit cite

<p>
  Laut dem MDN Web Docs:
  <q cite="https://developer.mozilla.org">
    Das q-Element kennzeichnet kurze Inline-Zitate.
  </q>
</p>

Wenn innerhalb eines Zitats ein weiteres Zitat vorkommt, wechseln die Anführungszeichen automatisch. Im Deutschen: außen „…”, innen ‚…’. Das passiert ganz von selbst, wenn du <q>-Elemente verschachtelst:

index.html

Verschachtelte Zitate

<p>
  Sie erzählte mir:
  <q>Er hat gesagt: <q>Ich komme morgen.</q>
  Aber er kam nicht.</q>
</p>

<q> ist für kurze Zitate im Fließtext, <blockquote> für längere, eigenständige Zitate. Hier der Unterschied:

index.html

q vs. blockquote

<!-- q: Kurzes Zitat im Fließtext -->
<p>
  Einstein sagte einmal:
  <q>Fantasie ist wichtiger als Wissen.</q>
  Dieses Zitat wird oft in Vorträgen verwendet.
</p>

<!-- blockquote: Längeres, eigenständiges Zitat -->
<blockquote>
  <p>Die Definition von Wahnsinn ist, immer wieder das Gleiche
  zu tun und andere Ergebnisse zu erwarten.</p>
</blockquote>
<p>Dieses Zitat wird oft Einstein zugeschrieben, ist aber nicht belegt.</p>

Barrierefreiheit

3 Punkte

Screenreader-Verhalten: Die meisten Screenreader erkennen <q> und kündigen den Beginn und das Ende eines Zitats an, z.B. “Zitat” vor dem Text und “Ende Zitat” danach. Das hilft Screenreader-Nutzern, Zitate vom umliegenden Text zu unterscheiden.
Anführungszeichen nicht doppeln: Da Browser automatisch Anführungszeichen einfügen, schreibe keine zusätzlichen Anführungszeichen in den HTML-Code. Sonst erscheinen sie doppelt: „„Zitat"".
cite-Attribut nutzen: Auch wenn das cite-Attribut für Nutzer nicht sichtbar ist, hilft es Suchmaschinen und assistiven Technologien, die Quelle eines Zitats zu identifizieren.

Häufige Fehler

3 Punkte

Manuelle Anführungszeichen mit q kombinieren: Der häufigste Fehler: <q>"Zitat"</q> erzeugt doppelte Anführungszeichen, weil der Browser seine eigenen hinzufügt. Schreibe einfach <q>Zitat</q>. Die Anführungszeichen kommen automatisch.
q für längere Zitate verwenden: <q> ist für kurze Zitate im Fließtext gedacht (ein Satz, eine Phrase). Für längere Zitate, die als eigener Absatz stehen sollen, verwende <blockquote>.
cite-Attribut mit Autorenname statt URL füllen: Das cite-Attribut erwartet eine URL, keinen Autorennamen. Schreibe cite="https://example.com/quelle", nicht cite="Goethe". Für die sichtbare Quellenangabe verwende das <cite>-Element.

Browser-Kompatibilität

5 von 5

Das q-Element wird von allen modernen Browsern unterstützt. Die automatischen Anführungszeichen richten sich nach dem lang-Attribut des Dokuments.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

2 von 5

Die Unterstützung von q in Email-Clients ist eingeschränkt. Nicht alle Clients fügen automatische Anführungszeichen ein.

Apple Mail

Komplett
Gmail

Teilweise

Das Element wird gerendert, aber Anführungszeichen werden nicht immer automatisch eingefügt
Outlook

Teilweise

Ältere Versionen (2007-2016) ignorieren das q-Element und fügen keine Anführungszeichen ein
Thunderbird

Komplett
Yahoo Mail

Teilweise

Anführungszeichen werden nicht immer korrekt eingefügt

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da

<q>

Grundlagen

Syntax

Attribute

Beispiele

Barrierefreiheit

Häufige Fehler

Browser-Kompatibilität

Email-Kompatibilität

Newsletter