HTML Quotation: Zitate in HTML einbinden

HTML Quotations kommen zum Einsatz, um zitierte Textpassagen aus anderen Quellen in eine Website einzubinden. Hierzu nutzen Sie je nach konkretem Nutzungsszenario <blockquote>, <q> oder cite bzw. <cite>. Der Vorteil von HTML-Zitaten liegt in einer Auflockerung des Fließtexts, in der Suchmaschinenoptimierung sowie in einer besseren Vermittlung von Inhalten.

Was sind HTML Quotations?

HTML Quotations sind spezielle HTML-Tags, die verwendet werden, um Zitate in HTML-Dokumenten zu kennzeichnen und darzustellen. Die beiden wichtigsten HTML-Tags für Zitate sind das <blockquote>-Tag und das <q>-Tag. Mit dem <cite>-Tag bzw. cite-Attribut gibt es noch eine dritte Alternative, die speziell für die Quellenangabe von Zitaten geeignet ist. HTML-Zitate sind – ähnlich wie HTML Lists und HTML-Tabellen – ein gutes Mittel, um Textwüsten zu vermeiden und Texte aufzulockern.

Durch den Einsatz der Tags lassen sich Ihre Texte nicht nur optisch ansprechender gestalten, sondern es wird auch die semantische Struktur des Dokuments verbessert. Suchmaschinen und andere Web-Technologien können die Bedeutung von Zitaten besser verstehen und verarbeiten, was letztlich zu einer besseren Auffindbarkeit und einer höheren Zugänglichkeit der Inhalte führt.

Welche Arten von HTML Quotations gibt es?

Wie genau Sie ein Zitat in Ihre HTML-Dokumente einbinden, hängt davon ab, für welches Tag Sie sich entscheiden. In den nachfolgenden Abschnitten haben wir die drei möglichen Varianten für Sie zusammengefasst – inklusive konkreter Beispiele.

<q>-Tag (Inline-Zitat)

Mit dem <q>-Tag lassen sich in HTML Zitate in den Fließtext integrieren und durch Anführungszeichen kennzeichnen. Sie müssen den fortlaufenden Text somit nicht unterbrechen und können den direkt oder indirekt zitierten Text für Leserinnen und Leser visuell kenntlich machen. Da bei der Nutzung von <q>-Tags automatisch Anführungszeichen am Anfang und Ende der zitierten Passage hinzugefügt werden, ist es nicht erforderlich, Anführungszeichen manuell einzufügen. Zitate mit <q>-Tags kommen meist zum Einsatz, wenn es sich um kürzere Textpassagen oder direkte Rede handelt, für die der Textfluss nicht unterbrochen werden muss.

Folgendes Beispiel zeigt die Syntax:

<p>Hier steht der Fließtext <q>Hier steht ein Zitat</q></p>

<blockquote>-Tag (Blockzitat)

Bei Blockzitaten handelt es sich um visuell hervorgehobene Zitate, die durch einen eingerückten Absatz oder einen dünnen Rahmen visuell hervorgehoben werden. Um eine Passage als individuellen Absatz vom Text abzuheben, verwenden Sie das <blockquote>-Tag. Durch die Auflockerung des Textes vermeiden Sie ermüdende Textwüsten, betonen wichtige Inhalte und belegen wichtige Aussagen durch direkte Zitate. Zudem schaffen Sie durch verschiedene Gestaltungselemente eine SEO-freundliche Textstruktur. Meist kommen Blockelemente bei längeren Zitaten zum Einsatz. Sie können jedoch auch dazu dienen, einzelne wichtige Sätze oder Verlinkungen visuell zu betonen.

Die Hauptfunktion des <blockquote>-Tags liegt in der Anweisung an Browser, markierte Textelemente visuell zu kennzeichnen. Wie das Blockzitat letztlich formatiert wird, kann je nach Browser variieren. Möchten Sie die Form der Blockquote konkret definieren, so helfen HTML-Attribute bzw. CSS-Anweisungen wie padding für den Innenabstand des Textes, border für die Stärke und Farbe des Rahmens oder address für die Schriftfarbe.

Syntax:

<p>Im Folgenden das zugehörige Zitat</p>
<blockquote>
„Hier steht das Zitat.“
</blockquote>

<cite> bzw. cite (Quellenangabe)

Bei Zitaten ist nicht nur wichtig, sie als solche zu kennzeichnen, sondern nach Möglichkeit auch die Quelle des Zitats anzugeben. So sorgen Sie dafür, dass Leserinnen und Leser sofort nachvollziehen können, woher ein Zitat stammt. Das gehört nicht nur zum guten Stil beim Zitieren, sondern stärkt Ihre Glaubwürdigkeit und Transparenz. Für beide Tags, <q> und <blockquote>, bietet sich hierzu entweder das Attribut cite oder das Element <cite> an:

HTML-Attribut cite

Das cite-Attribut wird verwendet, um spezifische Quellen eines Zitats als Referenz anzugeben. Es kommt insbesondere bei Blockzitaten zum Einsatz und wird vom Browser in der Regel nicht angezeigt, wenn die Informationen für andere Technologien wie Screenreader oder SEO-Bots nützlich sind.

Syntax:

<p>Im Folgenden das zugehörige Zitat</q>
<blockquote cite="https://beispiel.com/quelle">
„Hier steht das Zitat.“
</blockquote>

Im Text könnte die Quelle wie folgt erscheinen:

„Hier steht das Zitat.“ – Quelle: https://beispiel.com/quelle

HTML <cite>

Das HTML-Element <cite> kommt zum Einsatz, um im Text den Titel eines zitierten Werkes hervorzuheben, beispielsweise in kursiver Schriftart. Indem Sie Ihre Referenzen klar und auf einen Blick kenntlich machen und auf korrektes Zitieren achten, sorgen Sie für mehr Transparenz und Nachvollziehbarkeit und stärken Ihre Seriosität. Syntax:

<p>Das genannte Zitat stammt aus <cite>Quellenangabe</cite></p>

Im Text könnte die Zitierung wie folgt erscheinen:

„Das genannte Zitat stammt aus (Quellenangabe).“