HTML blockquote – Zitat

Text als Zitat kennzeichnen

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.

In wissenschaftlichen Arbeiten sollen längere Zitate beidseitig eingerückt, durch Anführungszeichen hervorgehoben und durch Leerzeilen vom vorangehenden und nachfolgenden Absatz getrennt werden, um Verwechslungen mit dem eigenen Text zu vermeiden.

cite-Attribut sichtbar machen

Das cite-Tag (nicht zu verwechseln mit dem cite-Attribut des blockquote-Tags!) markiert einen Text als Titel durch kursive Schrift.

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, denn die Spezifikation sagt dazu, dass die Quelle des Zitats außerhalb des blockquotes-Elements sitzen soll. Im Beispiel liegt das blockquote-Element in einem figure-Tag, weil das figcaption-Tag den Zusammenhang zwischen blockquote und der Quelle des Zitats herstellt.

Die URL im cite-Attribut gilt vorrangig als Hinweis für den Autor ist und weniger für den Leser. Es spricht aber auch nichts dagegen, den Inhalt des cite-Attributs sichtbar zu machen.

<figure>
<blockquote class="me" cite="https://de.wikipedia.org/wiki/Friedrich_Dürrenmatt"> 
	Ergreife die Feder nur, wenn du müde bist <br />
	und keine Frage nach dem Stil dich berührt.
</blockquote>
<figcaption>Friedrich Dürrenmatt</figcaption>
</figure>

Ein Attribut-Selector in Kooperation mit dem :: after Pseudo-Selektor macht den Text des cite-Attributs sichtbar.

blockquote[cite]::after{content: "« [" attr(cite) "]"; }

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