HTML blockquote • cite • mehrzeilige Zitate und Inline-Zitate

blockquote setzt einen Textblock als Zitat vom Rest des Texts ab. Die genaue Darstellung bestimmt der Browser. In der Regel wird Text in <blockquote> rechts und links eingerückt und kursiv gerendert. Vor und nach bockquote gibt es einen Zeilenumbruch.

Das cite-Tag (nicht zu verwechseln mit dem cite-Attribut des blockquote-Tags!) markiert einen Text als Zitat oder Quelle durch kursive Schrift. Die HTML-Spezifikation empfiehlt das blockquote-Tag für lange Zitate und das cite-Tag für kurze Zitate.

Ein Zitat in blockquote kann aus ein paar Wörtern oder aus ganzen Passagen bestehen. Innerhalb eines <blockquote>-Tags können beliebige andere HTML-Tags stehen – sowohl Block-Tags wie p und div als auch cite- und q-Tags – und der Text kann durch strong- und em-Tags weiter formatiert werden.

Auf jeden Fall aber muss der Inhalt des HTML blockquote-Tags Blockelemente wie p oder div gesetzt werden. Flacher Text ist innerhalb des blockquote-Elements nicht erlaubt.

Die Browser stellen den Inhalt von blockquote mit dem eingebauten Stylesheet mit einem Einzug links und rechts (margin-left und margin-right) dar.

cite-Attribut sichtbar machen

blockquote hat ein eigenes Attribut – cite –, das eine URL als Quelle des Zitats aufführen kann. Aber die Browser zeigen den des Attributs cite zeigen allesamt nicht an. Aber eine CSS-Regel kann die Quelle des cite-Attributs sichtbar machen.

blockquote p:before { content: ' „ ' ' '; color: green; font-family: Georgia, serif; }
blockquote p:after { content: ' ' ' “ '; color: green; font-family: Georgia, serif; }

<blockquote cite="http://de.wikipedia.org/wiki/Friedrich_Dürrenmatt"> 
   <p> Ergreife die Feder nur, wenn du müde bist <br />
   und keine Frage nach dem Stil dich berührt.</p>
</blockquote>

Ergreife die Feder nur, wenn du müde bist
und keine Frage nach dem Stil dich berührt.

Die HTML5-Spezifikation hat sich des cite-Attributs noch einmal angenommen: Die Browser sollten einen Link im cite-Attribut so darstellen, das der Benutzer dem Link folgen kann. Gleichzeitig sagt die HTML5-Spezifikation aber auch, dass die URL im cite-Attribut vorrangig ein Hinweis für den Autor ist und weniger für den Leser.

User agents may allow users to follow such citation links, but they are primarily intended for private use (e.g. by server-side scripts collecting statistics about a site's use of quotations), not for readers.

cite-Tag für Inline-Zitate

Anders als das blockquote-Tag erzeugt cite keinen Zeilenumbruch und das Zitat wird auf diese Weise zu einem Inlineelement.

Die Browser zeigen den Inhalt von cite-Tags in kursiver Schrift. Die Darstellung kann durch CSS überschrieben werden.

Innerhalb des cite-Tags dürfen Inline-Tags stehen (z.B. span, strong, insbesondera aber auch ein a-Tag als Verweis auf eine Quelle), um die Darstellung des Zitats zu bestimmen.

<p>Wie heißt es doch bei Dürrenmatt: 
   <cite><a href="http://de.wikipedia.org/wiki/Friedrich_Dürrenmatt">
   Ergreife die Feder nur, wenn du müde bist</a>.</cite> </p>

Wie heißt es doch bei Dürrenmatt: Ergreife die Feder nur, wenn du müde bist.