html-einfach.de

Semantisches HTML · Inhalte auszeichnen

Zitate auszeichnen: blockquote, q & cite

Von Zuletzt geändert am

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 die Textauszeichnung nennt sie bereits kurz. Hier nehme ich sie genauer auseinander – samt der hartnäckigsten Verwechslung rund um <cite>.

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>

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.

cite: die Quelle, nicht die Person

Jetzt die berühmte Falle: <cite> kennzeichnet den Titel eines Werks (Buch, Artikel, Film, Studie) – nicht den Namen der zitierten Person. Das ist ausdrücklich so spezifiziert und wird ständig falsch gemacht.

<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>

Hier ist „Andrew S. Tanenbaum“ einfacher Text, und nur der Werktitel steht in <cite>. Für die Zuordnung von Zitat und Urheber eignet sich – wie oben – eine <figure> mit <figcaption>.

Randnotiz – Bedeutung statt Optik. Ein <blockquote> ist kein Werkzeug zum Einrücken. Wer Text nur optisch einrückt, 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.
  • 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. Setze deshalb keine eigenen – sonst werden es doppelte.

Wird das cite-Attribut angezeigt?

Nein. Die URL im cite-Attribut ist maschinenlesbar, aber unsichtbar. Soll die Quelle sichtbar sein, schreib sie zusätzlich als Text oder Link.

Fazit

Drei Elemente, drei Aufgaben: <blockquote> für zitierte Blöcke, <q> für kurze Inline-Zitate mit automatischen Anführungszeichen und <cite> für den Werktitel – nie für die Person. Kein <blockquote> als Einrückungstrick. So sind Zitate nicht nur schön, sondern auch korrekt ausgezeichnet – ganz im Sinne von semantischem HTML.