HTML Elemente
Zitat: Erkenne dich selbst!

Zitate in HTML

Zitate technisch sauber als Absatz, Teil eines Absatzes und mit einer Quellenangabe realisieren samt Überlegungen zur Barrierefreiheit.

blockquote Element

Mit dem blockquote-Element wird in HTML ein Textabschnitt gekennzeichnet, der Inhalt einer anderen Quelle zitiert.

Syntax

Der Code sieht exemplarisch folgendermaßen aus:

<p>Artikel 7 der Österreichischen Bundesverfassung beginnt mit einem Diskriminierungsverbot:</p>

<blockquote>Alle Staatsbürger sind vor dem Gesetz gleich. Vorrechte der Geburt, des Geschlechtes, des Standes, der Klasse und des Bekenntnisses sind ausgeschlossen. Niemand darf wegen seiner Behinderung benachteiligt werden. Die Republik (Bund, Länder und Gemeinden) bekennt sich dazu, die Gleichbehandlung von behinderten und nichtbehinderten Menschen in allen Bereichen des täglichen Lebens zu gewährleisten.</blockquote>

Die Darstellung dieses Codes wird auf Zweiter Blick mittels CSS-Anweisungen folgendermaßen realisiert:

Artikel 7 der Österreichischen Bundesverfassung beginnt mit einem Diskriminierungsverbot:

Alle Staatsbürger sind vor dem Gesetz gleich. Vorrechte der Geburt, des Geschlechtes, des Standes, der Klasse und des Bekenntnisses sind ausgeschlossen. Niemand darf wegen seiner Behinderung benachteiligt werden. Die Republik (Bund, Länder und Gemeinden) bekennt sich dazu, die Gleichbehandlung von behinderten und nichtbehinderten Menschen in allen Bereichen des täglichen Lebens zu gewährleisten.

Anmerkungen

Fehlerhafte Verwendung

Das blockquote-Element darf nicht lediglich eingesetzt werden, um einen Textabschnitt einzurücken.

Zur technischen Darstellung von Dialogen sind Zitate nicht geeignet. Stattdessen sollten laut Spezifikation Techniken für Konversationen eingesetzt werden.

Verhalten von assistierenden Technologien

JAWS meldet zu Beginn des Abschnitts "Zitatblock" und danach "Zitatblock Ende".

WHATWG | The blockquote element
Die HTML Spezifikation aus dem Living Standard.
ARIA 1.3 | blockquote role
Entwurf für role="blockquote" für eine neue ARIA Spezifikation auf GitHub.
In HTML muss jedenfalls weiterhin das native Element <blockquote> verwendet werden.

q Element

Mit dem q-Element wird in HTML innerhalb einer Zeile ein Text gekennzeichnet, der Inhalt einer anderen Quelle zitiert.

Laut HTML Spezifikation ist ein Markup mittels <q> optional. Zitate können auch direkt mit Anführungszeichen gekennzeichnet werden.

Syntax

Der Code sieht exemplarisch folgendermaßen aus:

<q>Wovon man nicht sprechen kann, darüber muss man schweigen.</q> ist das bekannteste Zitat des Philosophen Ludwig Wittgenstein.

Die Standarddarstellung für diesen Code sieht in deinem aktuellen Browser folgendermaßen aus:

Wovon man nicht sprechen kann, darüber muss man schweigen. ist das bekannteste Zitat des Philosophen Ludwig Wittgenstein.

Anführungszeichen (" &quot;) werden vom Browser automatisch eingefügt und dürfen daher nicht zusätzlich am Anfang oder Ende des Zitates eingefügt werden.
Auch innerhalb eines Zitates führen Anführungszeichen zu Verwirrung, wenn sie fälschlicherweise als Zitatende verstanden werden. Sie müssen daher in Zitaten generell vermieden werden.

Das q-Element darf auch für fiktive Zitate verwendet werden, etwa in Romanen oder Drehbüchern.

Die Verschachtelung eines Zitats in einem Zitat ist technisch zulässig.

Auf eine verfügbare Quelladresse eines Zitates kann technisch mit dem cite-Attribut verwiesen werden.

Fehlerhafte Verwendung

Das q-Element darf nicht lediglich eingesetzt werden, um eine Zeichenfolge mit Anführungszeichen zu versehen.
Es ist beispielsweise unangemessen, die sarkastische Verwendung von Ausdrücken als Zitat zu kennzzeichnen.

In folgenden Beispielen wäre ein <q>-Tag nicht angemessen, weil es sich um kein Zitat handelt:

Verhalten von assistierenden Technologien

Screen Reader liefern keine Zusatzinformation über die Semantik. Es werden lediglich die aus dem Browser vorgegebenen Anführungszeichen gelesen, sofern diese nicht durch Konfigurationen im Screen Reader unterdrückt werden.

Links

WHATWG | The q element
Die HTML Spezifikation aus dem Living Standard.

cite Element

Mit dem cite-Element wird in HTML der Titel eines Werks gekennzeichnet. Werke sind dabei beispielsweise Bücher, Zeitschriftenartiekl Essays und Gedichte, aber auch Lieder, Filme, Gemälde oder Spile.

Syntax

Der Code sieht exemplarisch folgendermaßen aus:

<cite>Die Waffen nieder!</cite> ist das bekannteste Werk der späteren Friedensnobelpreisträgerin Berta von Suttner.

Die Standarddarstellung in deinem aktuellen Browser sieht folgendermaßen aus:

Die Waffen nieder! ist das bekannteste Werk der späteren Friedensnobelpreisträgerin Berta von Suttner.

Fehlerhafte Verwendung

Das Element darf ausschließlich den Titel eines Werks enthalten und keine Zusatzinformationen, den Namen der Autor*innen oder ein Zitat aus dem Werk.

Verhalten von assistierenden Technologien

Screen Reader stellen in der Standardkonfiguration die Semantik des cite-Elements nicht dar.

WHATWG | The cite element
Die HTML Spezifikation aus dem Living Standard.

cite Attribut

Mit dem cite-Attribut kann technisch auf eine verfügbare Quelladresse eines Zitates verwiesen werden. (blockquote oder q-Element)

Das Attribut bringt für Nutzer*innen keinen Mehrwert. Es dient primär für allfällige Interessen der Betreiber*innen einer Webseite, etwa für serverseitige Scripts zur statistischen Auswertung der Nutzung von Zitaten.

Syntax

Der Code sieht exemplarisch folgendermaßen aus:

<p>Artikel 7 der österreichischen Bundesverfassung legt fest:
  <q
    cite="https://www.ris.bka.gv.at/GeltendeFassung.wxe?Abfrage=Bundesnormen&Gesetzesnummer=10000138">
    Niemand darf wegen seiner Behinderung benachteiligt werden.
  </q>
</p>

Die Standarddarstellung für diesen Code sieht in deinem aktuellen Browser folgendermaßen aus:

Artikel 7 der österreichischen Bundesverfassung legt fest: Niemand darf wegen seiner Behinderung benachteiligt werden.

Du wirst in deinem Browser durch die Verwendung des cite-Attributs keine Änderung von Inhalt oder Funktionalität bemerken.

Wenn das cite-Attribut verwendet wird, muss es auf eine valide URL verweisen.

Fehlerhafte Verwendung

Das cite-Attribut muss in einem blockquote oder q-Element eingebettet sein. Eine Einbettung im <p>-Element führt im W3C HTML Validator zu einer Fehlermeldung. cite ist kein globales Attribut.

Verhalten von assistierenden Technologien

Es sind uns keine assistierenden Technologien bekannt, die das cite-Attribut in irgendeiner Form verfügbar machen.

WHATWG | The cite attribute
Die HTML Spezifikation aus dem Living Standard.

Quellenangaben

Es gibt für Quellangaben keine speziellen für Nutzer*innen verfügbare Techniken, weshalb Überlegungen zur Nutzungsfreundlichkeit erforderlich sind.

Die Quellenangabe zu einem Zitat muss in unmittelbarer Nähe zum Zitat erfolgen. Bevorzugt werden Angaben zur Aotorenschaft und allfällige Links gleich nach oder unterhalb eibes Zitats eingefügt.

Quellenangaben zu einem Zitatblock können einfach unter dem Zitat eingefügt werden. Nach Möglichkeit sollte die Quellenangabe auch gleich verlinkt werden:

<blockquote>
  [Zitatblock]
</blockquote>
<p>
  <a href="[URL]">
    <cite>[Titel der Quellseite]</cite>
  </a>
</p>

Um das Erfolgskriterium 2.4.4 Zielbeschreibung eines Links (im Kontext) zu erfüllen, muss aus dem Absatz mit der Quellangabe das Linkziel hervorgehen. Für das Erfolgskriterium 2.4.9 Zielbeschreibung eines Links (allein stehend) muss die Linkbeschriftung selbst die Rolle als Quellangabe enthalten.

figure-Element zum Verschachteln

Ein Zitat und dessen Quellenangaben können in HTML laut Spezifikation für blockquote mittels des figure-Elements gruppiert werden. Der Aufbau kann folgendermaßen aussehen:

<figure>
  <blockquote>[Zitatblock]</blockquote>
  <figcaption>[(verlinkte) Quellangaben] </figcaption>
</figure>

Screen Reader geben teilweise den Inhalt der figcaption auch beim Betreten und Verlassen des figure-Bereichs wieder. Der Inhalt des figcaption-Elements sollte daher nur knapp und präzise die Quellenangaben enthalten.