Semantisches HTML · Inhalte auszeichnen
Zitate auszeichnen: blockquote, q & cite
Zitate zeichnest du mit <blockquote> für zitierte Blöcke aus, mit <q> für kurze Zitate mitten im Satz und mit <cite> für den Titel des Werks – nie für den Namen der zitierten Person. Die Quellenangabe gehört laut HTML-Spezifikation außerhalb des <blockquote>, am saubersten in einer <figure> mit <figcaption>.
Zitate sehen schnell richtig aus – eingerückt, kursiv, in Anführungszeichen. Ob sie auch semantisch richtig ausgezeichnet sind, ist eine andere Frage. HTML bietet dafür drei Elemente und ein Attribut, und die Textauszeichnung nennt sie bereits kurz. Hier nehme ich sie genauer auseinander – samt der hartnäckigsten Verwechslung rund um <cite> und der Frage, wo die Quellenangabe eigentlich hingehört.
Das Wichtigste in Kürze
-
<blockquote>kennzeichnet einen zitierten Block,<q>ein kurzes Zitat im Fließtext,<cite>den Titel eines Werks. -
<cite>ist nicht für Personennamen – das ist die häufigste Verwechslung überhaupt und ausdrücklich so spezifiziert. -
Bei
<q>setzt du keine eigenen Anführungszeichen. Der Browser ergänzt sie automatisch und sprachrichtig – auf einer deutschen Seite also „so“. - Die Quellenangabe gehört nach draußen:
<figure>+<figcaption>ist der spezifikationskonforme Weg. -
Das
cite-Attribut (die URL) wird nirgends angezeigt – und von JAWS als Vorleseballast ausgegeben. -
Screenreader behandeln
<blockquote>sehr unterschiedlich: NVDA und JAWS markieren Anfang und Ende, VoiceOver sagt gar nichts. - Dekorative Riesen-Anführungszeichen aus CSS werden von manchen Screenreadern mitgelesen – dagegen hilft die Alternativtext-Syntax von
content. -
<blockquote>ist kein Einrückungswerkzeug.
blockquote: das längere Zitat
<blockquote> kennzeichnet einen zitierten Block – einen oder mehrere Absätze aus einer fremden Quelle. Die optionale cite-Eigenschaft nimmt die URL der Quelle auf (sie wird nicht angezeigt, ist aber maschinenlesbar):
<blockquote cite="https://www.w3.org/TR/WCAG22/">
<p>Web content accessibility guidelines …</p>
</blockquote>Inhaltlich darf ein <blockquote> alles enthalten, was auch sonst im Fließtext steht: mehrere <p>, Listen, sogar Überschriften. Wichtig ist nur: Es gehört nur der zitierte Text hinein, nicht die Angabe, von wem er stammt.
Zitate in anderer Sprache brauchen ein lang. Ein englisches Zitat auf einer deutschen Seite ohne lang="en" wird vom Screenreader mit deutscher Aussprache vorgelesen – das Ergebnis ist häufig unverständlich. Das ist keine Feinheit, sondern Erfolgskriterium 3.1.2 Sprache von Teilen:
<blockquote lang="en" cite="https://www.w3.org/TR/WCAG22/">
<p>Content must be perceivable, operable, understandable, and robust.</p>
</blockquote>q: das kurze Zitat im Satz
<q> ist für ein kurzes Zitat mitten im Fließtext. Der Browser ergänzt die Anführungszeichen automatisch – passend zur Sprache des Dokuments:
<p>Im Standard heißt es, Inhalte müssten <q>wahrnehmbar</q> sein.</p>Deshalb setzt man bei <q> keine eigenen Anführungszeichen – sonst stehen sie doppelt. Welche Zeichen erscheinen, steuert die CSS-Eigenschaft quotes, deren Standardwert auto die Sprache aus dem lang-Attribut auswertet. Auf einer Seite mit <html lang="de"> bekommst du also von selbst deutsche Anführungszeichen. Wer die Zeichen (etwa für verschachtelte Zitate) selbst bestimmen will:
:lang(de) {
/* außen „…“, innen ‚…‘ */
quotes: "\201E" "\201C" "\201A" "\2018";
}Ein praktischer Nebeneffekt, der überrascht: Diese Anführungszeichen sind generierter Inhalt. Wer den Satz markiert und kopiert, bekommt sie in manchen Browsern nicht mit. Für ein Zitat, das zum Weiterverwenden gedacht ist, ist <q> also nicht immer die beste Wahl.
cite: die Quelle, nicht die Person
Jetzt die berühmte Falle: <cite> kennzeichnet den Titel eines Werks (Buch, Artikel, Film, Studie, Website) – nicht den Namen der zitierten Person. Das ist ausdrücklich so spezifiziert und wird trotzdem ständig falsch gemacht, auch in großen Frameworks.
<p>
Nachzulesen in <cite>Inclusive Components</cite> von Heydon Pickering.
</p>Der Personenname ist normaler Text. Die Verwirrung hat einen historischen Grund: Ältere Fassungen der HTML-Spezifikation ließen Personennamen in <cite> zu; die heute gültige WHATWG-Fassung tut das nicht mehr. Praktisch ist der Unterschied klein – <cite> wird von keinem Screenreader gesondert angesagt und ist reine Maschinenlesbarkeit –, aber wer es richtig macht, hat wenigstens eine konsistente Auszeichnung.
Wohin gehört die Quellenangabe?
Hier wird es interessant, denn Spezifikation und Praxis liegen auseinander.
Die HTML-Spezifikation ist eindeutig: Die Zuschreibung eines Zitats muss außerhalb des <blockquote> stehen. Das Zitat ist, was zitiert wurde – die Angabe, von wem, ist es nicht. Daraus folgen zwei zulässige Muster:
<!-- A: figure + figcaption – die explizite Verbindung -->
<figure>
<blockquote>
<p>Das Gute an Standards ist, dass es so viele gibt.</p>
</blockquote>
<figcaption>Andrew S. Tanenbaum, <cite>Computer Networks</cite></figcaption>
</figure>
<!-- B: Absatz danach – schlicht, aber nur visuell verbunden -->
<blockquote>
<p>Das Gute an Standards ist, dass es so viele gibt.</p>
</blockquote>
<p>— Andrew S. Tanenbaum, <cite>Computer Networks</cite></p>
Variante A ist die bessere: Die <figure> mit <figcaption> stellt die Verbindung zwischen Zitat und Quelle programmatisch her, statt sie nur nebeneinander zu stellen – genau das verlangt 1.3.1 Info und Beziehungen.
Live-Beispiel: blockquote, figcaption, cite und q
Das Gute an Standards ist, dass es so viele gibt.
Im Standard heißt es, Inhalte müssten wahrnehmbar
sein – die Anführungszeichen setzt der Browser selbst.
Der Praxiseinwand: <footer> im <blockquote>
Im Netz begegnet dir häufig ein drittes Muster, das die Quelle innerhalb des Zitats unterbringt:
<blockquote>
<p>Das Gute an Standards ist, dass es so viele gibt.</p>
<footer>— <cite>Computer Networks</cite></footer>
</blockquote>Adrian Roselli ist genau dieser Frage 2023 mit echten Screenreader-Tests nachgegangen und kam zu dem Ergebnis, dass diese Variante praktisch am besten abschneidet: Sie liest sich flüssig, hält Zitat und Quelle zusammen und erzeugt weniger Umschweife als die <figure>-Fassung, die NVDA, JAWS, Orca und VoiceOver auf macOS mit zusätzlichen Ansagen quittieren.
Formal widerspricht sie der Spezifikation, weil die Zuschreibung im Zitat landet. Meine Empfehlung: Nimm <figure> + <figcaption> – die Konformität ist eindeutig, der Aufpreis besteht in einem zusätzlich vorgelesenen Wort. Wenn dein Projekt Wert auf die knappste mögliche Ansage legt, ist die <footer>-Variante ein vertretbarer, bewusst getroffener Kompromiss. Was du nicht tun solltest: die Quelle als losen Text ohne jede Verbindung danebenstellen.
Was Screenreader wirklich ansagen
<blockquote> bekommt nach den ARIA-Zuordnungen die Rolle blockquote – aber was daraus wird, ist von Programm zu Programm verschieden:
| Screenreader | Verhalten |
|---|---|
| NVDA | Sagt „Zitat“ und „Zitat Ende“, liest also die Grenzen mit |
| JAWS | Sagt „Block Quote“ und „Block Quote Ende“; kann per Taste zu Zitaten springen |
| VoiceOver (macOS) | Sagt nichts – nur der Text wird vorgelesen |
| TalkBack | Sagt nichts |
Die praktische Konsequenz: Verlass dich nicht darauf, dass die Zitat-Semantik gehört wird. Wenn es für das Verständnis darauf ankommt, dass hier jemand anders spricht, gehört das in den Text – „Dazu schreibt Tanenbaum:“ vor dem Zitat kostet vier Wörter und funktioniert überall. Wie man das selbst nachprüft, steht unter Mit NVDA testen.
Das cite-Attribut lohnt sich selten
Die URL im cite-Attribut ist unsichtbar, für Suchmaschinen ohne belegte Wirkung – und JAWS liest sie unter Umständen komplett vor. Aus einer eleganten Maschinenlesbarkeit wird dann eine vorgelesene Zeichenkette wie „h-t-t-p-s-doppelpunkt-schrägstrich…“. Wenn die Quelle wichtig ist, gehört sie als sichtbarer Link in die <figcaption>. Dort nützt sie allen.
Dekorative Anführungszeichen: der stille Fehler
Große geschwungene Anführungszeichen als Gestaltungselement sind beliebt – und werden regelmäßig zur Vorlesefalle. Denn CSS-generierter Inhalt wird von Screenreadern mitgelesen:
/* Problematisch: NVDA liest „linkes doppeltes Anführungszeichen“ mit */
blockquote::before {
content: "\201C";
font-size: 4rem;
}Die Lösung ist eine wenig bekannte Erweiterung von content: Nach einem Schrägstrich lässt sich ein Alternativtext angeben – ein leerer String bedeutet „nicht ansagen“:
blockquote::before {
content: "\201C" / "";
font-size: 4rem;
color: var(--color-border-strong);
}Aktuelle Browser unterstützen diese Syntax. Wer ganz sichergehen will, nimmt statt eines Zeichens ein Inline-SVG mit aria-hidden="true" oder ein Hintergrundbild – beides wird garantiert nicht vorgelesen. Mehr dazu unter Icons & SVGs.
Verwandter Fall: Pull-Quotes, also der Satz aus dem Fließtext, der zusätzlich groß in der Marginalspalte steht. Er ist eine optische Wiederholung und wird sonst zweimal vorgelesen. Ein aria-hidden="true" am Pull-Quote löst das – und dann bitte auch kein <blockquote>, denn zitiert wird hier niemand.
Randnotiz – Bedeutung statt Optik. Ein
<blockquote>ist kein Werkzeug zum Einrücken. Wer Text nur optisch einrücken will, sollte das per CSS tun, nicht über ein Zitat-Element. Umgekehrt verdient ein echtes Zitat die korrekte Auszeichnung, auch wenn es gar nicht eingerückt dargestellt wird – das ist dieselbe Linie wie bei strong vs. b.
Häufige Fehler
-
<cite>für den Personennamen statt für den Werktitel. -
<blockquote>als reine Einrückung ohne echtes Zitat. -
Eigene Anführungszeichen bei
<q>, sodass sie doppelt erscheinen. - Quelle als loser Text ohne Verknüpfung zum Zitat.
-
Quelle im
<blockquote>, obwohl die Spezifikation sie draußen verlangt. -
Fremdsprachiges Zitat ohne
lang– falsche Aussprache. -
Dekoratives Anführungszeichen per
contentohne leeren Alternativtext. -
Pull-Quote ohne
aria-hidden– der Satz wird zweimal vorgelesen. -
Langes Zitat in
<q>statt in<blockquote>.
Häufige Fragen
Wie kennzeichne ich, von wem das Zitat stammt?
Der Personenname ist normaler Text – idealerweise in einer <figcaption> zur <blockquote>. In <cite> gehört nur der Titel des Werks.
Warum erscheinen bei <q> schon Anführungszeichen?
Weil der Browser sie automatisch und sprachgerecht einfügt – gesteuert über quotes: auto und das lang-Attribut. Setze deshalb keine eigenen, sonst werden es doppelte.
Wird das cite-Attribut angezeigt?
Nein. Die URL im cite-Attribut ist maschinenlesbar, aber unsichtbar – und wird von JAWS unter Umständen vorgelesen. Soll die Quelle sichtbar sein, schreib sie zusätzlich als Text oder Link in die <figcaption>.
Darf ein <blockquote> mehrere Absätze enthalten?
Ja. Mehrere <p> sind der Normalfall bei längeren Zitaten. Typografisch setzt man das schließende Anführungszeichen dann nur am letzten Absatz – wenn man überhaupt welche setzt, denn eingerückte Blockzitate kommen üblicherweise ohne aus.
Was ist mit ausgelassenen oder ergänzten Stellen?
Auslassungen kennzeichnest du mit […], eigene Einschübe mit eckigen Klammern – das ist Zitierkonvention, kein HTML. Für Streichungen und Einfügungen im Sinne von Textänderungen gibt es <del> und <ins>, die hier aber nicht gemeint sind.
Braucht ein <blockquote> eine Überschrift oder ein Label?
Nein. Ein Zitat ist kein Landmark-Bereich und braucht keinen zugänglichen Namen. Wenn mehrere Zitate auf einer Seite auseinandergehalten werden müssen, leistet das der umgebende Text – oder eine <figcaption>.
Fazit
Drei Elemente, drei Aufgaben: <blockquote> für zitierte Blöcke, <q> für kurze Inline-Zitate mit automatischen, sprachrichtigen Anführungszeichen und <cite> für den Werktitel – nie für die Person. Die Quellenangabe gehört nach der Spezifikation außerhalb des Zitats, am besten in einer <figure> mit <figcaption>, die Zitat und Quelle programmatisch verbindet. Weil VoiceOver und TalkBack die Zitat-Semantik gar nicht ansagen, gehört alles, worauf es inhaltlich ankommt, zusätzlich in den sichtbaren Text. Und dekorative Riesen-Anführungszeichen bekommen den leeren Alternativtext, den content
seit einiger Zeit erlaubt. So sind Zitate nicht nur schön, sondern auch korrekt ausgezeichnet – ganz im Sinne von
semantischem HTML.
Quellen
- The blockquote element (WHATWG HTML Standard – die Regel, dass die Zuschreibung außerhalb des Zitats stehen muss, mit Beispielen)
- Blockquotes in Screen Readers (Adrian Roselli – Tests, wie NVDA, JAWS, VoiceOver und TalkBack die verschiedenen Zitat-Muster ansagen)