HTML Grundlagen: Was ist der Unterschied zwischen <blockquote> und <q>?

Zitate richtig auszeichnen &ndash BLOCKQUOTE vs. Q

Zitate sind Texte, die wortwörtlich oder inhaltlich von einer anderen Quelle übernommenen werden. Es gibt zwei Möglichkeiten, wie ein Text als Zitat ausgezeichnet werden kann. Das BLOCKQUOTE Tag (Englisch »blockquote« = Blockzitat) setzt einen längeren Textblock als Blockzitat vom übrigen Text ab. Das Q Tag (q für Englisch »quote« = Zitat) wird für kleinere Zitate im Fließtext verwendet.

HTML <blockquote> TagMit dem HTML BLOCKQUOTE Tag werden insbesondere längere Texte als Zitat ausgezeichnet. Ein Blockzitat wird mit <blockquote> eingeleitet und muss mit </blockquote> abgeschlossen werden.

Das HTML Element BLOCKQUOTE ist ein Block-Element. Der Text in <blockquote> wird in der Regel links und rechts eingerückt. Vor und nach <blockquote> wird ein Zeilenwechsel eingefügt.

cite-Attribut
Das HTML Element BLOCKQUOTE hat ein eigenes cite Attribut (Englisch »cite« = zitieren), das eine URL als Quelle des Zitats angibt. Das cite Attribut wird standardmäßig nicht angezeigt, da die Quelle gemäß Spezifikation außerhalb von BLOCKQUOTE angegeben werden soll.

Quellenangabe
Die Quellenangabe erfolgte früher innerhalb von <blockquote>. Entsprechende Beispiele dafür findet man in Referenzen wie zum Beispiel SelfHTML. Auch in der Spezifikation des W3C zu HTML 5.2 stand, dass die Quellenangabe in einem Footer innerhalb des BLOCKQUOTE Elements stehen soll.

Die Quellenangabe steht jetzt außerhalb von <blockquote>

Damit man das Zitat und die Quelle gemeinsam gestalten kann, empfiehlt es sich, das HTML <figure> Tag für das Zitat und das HTML <figcaption> Tag für die Quelle zu verwenden.

Das folgende Beispiel illustriert das korrekte Zitieren:

<figure>
<blockquote>
<p>Weit hinten, hinter den großen Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabenhausen an der Küste des Semantik.
</p>
</blockquote>
<figcaption>
Quelle: www.blindtextgenerator.de &ndash; 
<cite>Hinter den Wortbergen </cite>
</figcaption>
</figure>
Ausgabe des HTML Codes

Weit hinten, hinter den großen Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabenhausen an der Küste des Semantik.

Quelle: www.blindtextgenerator.de – Hinter den Wortbergen

HTML <q> TagDas HTML Q Tag (q für Englisch »quotation«) markiert Text mit Anführungszeichen. Die Web-Browser stellen das Zitat automatisch mit den typografischen Anführungszeichen der eingestellten Landessprache dar. Zitate im Fließtext werden mit <q> eingeleitet und müssen mit </q> abgeschlossen werden.

Das HTML Element Q ist ein Inline-Element. Vor und nach <q> wird kein automatischer Zeilenwechsel eingefügt.

Die Quellenangabe steht außerhalb vom Q Tag. Es ist für Zitate im Fließtext allgemein üblich, dass eine hochgestellte Nummer in eckigen Klammern '[' und ']' als Fußnote auf die Quellenangabe am Ende der Seite hinweist. Die Nummerierung sollte stets mit 1 beginnen und fortlaufend sein.

Häufig wird mit einem Anker-Link auf die Quellenangabe am Ende der Seite verwiesen. Am Ende des Textes werden alle Fußnoten, die im Fließtext der Seite gesetzt wurden, aufgelistet. Es kann nützlich sein, wenn dort ein Link platziert wird, der auf den Absatz verweist, in dem die Fußnote gesetzt wurde. Dadurch lässt sich vermeiden, dass der Benutzer der Webseite unnötig nach unten und oben Scrollen muss.

Das folgende Beispiel illustriert das korrekte Zitieren im Fließtext:

<p>
<q> Weit hinten, hinter den großen Wortbergen &hellip; leben die Blindtexte. </q> <sup>[1]</sup>
Danach geht es normal weiter.</p>Ausgabe des HTML Codes

Weit hinten, hinter den großen Wortbergen … leben die Blindtexte. [1] Danach geht es normal weiter.

Gestalte die HTML Tags <blockquote> und <q> mit CSS entsprechend deinen Wünschen.