HTML blockquote – 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.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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.

Inhalt des cite-Attributs anzeigen
blockquote[cite]::after{content: "« [" attr(cite) "]"; }
Ergreife die Feder nur, wenn du müde bist
und keine Frage nach dem Stil dich berührt.
Friedrich Dürrenmatt

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