CSS, HTML und Javascript mit {stil}

blockquote • cite • Zitat

HTML blockquote

blockquote setzt einen längeren 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 Titel durch kursive Schrift.

Ein Zitat in blockquote kann aus ein paar Wörtern oder aus ganzen Passagen bestehen. Innerhalb von blockquote können beliebige andere HTML-Tags stehen: Block-Elemente wie p und div oder Inline-Elemente wie em, a oder span. Blockquote ist Flow Content, zu vergleichen mit den Block-Elementen in XHTM.

Die Browser stellen den Inhalt von blockquote 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. Die Browser zeigen den Inhalt des cite-Attributs nicht an.

Inhalt des cite-Attributs anzeigen
blockquote p:before { 
   content: ' „ ' ' '; color: gray;
   font-family: Georgia, serif; 
}
blockquote p:after {
   content: ' ' ' “ ';
   color: gray;
   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 – Inline-Zitat

cite stellt den Titel oder die Überschrift einer Arbeit, eines Artikels oder eines Buchs innerhalb eines Textes dar. Die Browser zeigen den Inhalt von cite-Tags in kursiver Schrift.

Anders als blockquote erzeugt cite keinen Zeilenumbruch – das Zitat ist Phrasing Content (Inline). Innerhalb des cite-Tags darf nur Phrasing Content (Inline-Tags) stehen (z.B. span, strong, insbesondere auch ein a-Tag als Verweis auf eine Quelle), um die Darstellung des Zitats zu bestimmen.

<blockquote cite="http://www.whatwg.org/…">
    <p>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.</p>
    <footer>
        <cite>
            <a href="http://www.whatwg.org/…">The blockquote element</a>
        </cite>
    </footer>
</blockquote>

In XHTML sollte das cite-Tag nicht innerhalb eines blockquote-Elements benutzt werden. In HTML5 kann die Quelle des Zitats in einem cite-Tag angegeben werden, wenn das cite-Tag vom Zitat getrennt ist (z.B. in einem footer-Element liegt).