Infos zur Barrierefreiheit für:

Zitate richtig darstellen

Zitate können innerhalb von Textpassagen oder frei als eigenständiger Abschnitt vorkommen. Die meisten Browser formatieren Zitate automatisch sobald sie mit den entsprechenden HTML-Befehlen gekennzeichnet wurden. Es macht jedoch keinen Sinn sich auf diese automatischen Formatierungsansichten zu verlassen da sie sich in jedem Browser unterscheiden. Stattdessen sollten Sie dem Leser mit entsprechenden CSS-Regeln helfen, dass er Zitate eindeutig erkennen kann.

HTML-Formatierung

Je nachdem um welche Art von Zitat (im Text eingebunden oder freistehend) es sich handelt, gibt es unterschiedliche HTML-Elemente um es zu kennzeichnen:

Freistehendes Zitat

<blockquote cite="http://www.zitatquelle.de">
  <p>
    Text des Zitates hier angeben<br />
    <cite>Name des Autors</cite>
  </p>
</blockquote>

Eingebundenes Zitat

<cite>Franz Mustermann</cite> sagte: <q cite="http://www.zitatquelle.de">Ich zitiere gerne </q>. Dann drehte er sich um und ging nach Hause.

Wie Sie sehen, unterscheiden wir folgende Angaben:

<blockquote> </blockquote>
Element, das anzeigt, dass es sich beim umschlossenen Text um ein freistehendes Zitat handelt.
<q> </q>
Element, das anzeigt, dass der umschlossene Text ein Zitat innerhalb es normalen Textabschnitts ist.
<cite> </cite>
Element, das den Autoren des jeweiligen Zitats kennzeichnet.
cite=""
Attribut von <blockquote> oder <q>, das die Internet-Quelladresse des Zitats angibt

Das Problem mit der Quellenangabe ist die Darstellung in den Browsern. Kein mir bekannter Browser zeigt diese Quellenangabe überhaupt an. Soll man sie dennoch angeben? Das bleibt jedem selbst überlassen. Ich nutze dieses Attribut auf jeden Fall und hoffe, dass die Browser in absehbarer Zeit diese Angabe sinnvoll anzeigen. Alternativ können Sie in der Zwischenzeit natürlich zum Beispiel die Autorenangabe entsprechend verlinken.

Optische Gestaltung

Es gibt unendliche Möglichkeiten die Zitate mit CSS optisch ansprechender zu gestalten. Achten Sie dabei aber immer darauf, dass vor allem bei eingebundenen Zitaten die Lesbarkeit immer im Vordergrund steht.
Ich habe für Sie verschiedene Zitatformatierungen von allen möglichen Webseiten aus dem Internet gesammelt. Damit dieser Artikel übersichtlich bleibt, habe ich diese Beispiele auf eine Extraseite ausgelagert.

zum Seitenanfang