HTML Quotation: Zitate in HTML einbinden

HTML Quo­ta­ti­ons kommen zum Einsatz, um zitierte Text­pas­sa­gen aus anderen Quellen in eine Website ein­zu­bin­den. Hierzu nutzen Sie je nach konkretem Nut­zungs­sze­na­rio <blockquote>, <q> oder cite bzw. <cite>. Der Vorteil von HTML-Zitaten liegt in einer Auf­lo­cke­rung des Fließ­texts, in der Such­ma­schi­nen­op­ti­mie­rung sowie in einer besseren Ver­mitt­lung von Inhalten.

Was sind HTML Quo­ta­ti­ons?

HTML Quo­ta­ti­ons sind spezielle HTML-Tags, die verwendet werden, um Zitate in HTML-Do­ku­men­ten zu kenn­zeich­nen und dar­zu­stel­len. Die beiden wich­tigs­ten 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 Al­ter­na­ti­ve, die speziell für die Quel­len­an­ga­be von Zitaten geeignet ist. HTML-Zitate sind – ähnlich wie HTML Lists und HTML-Tabellen – ein gutes Mittel, um Text­wüs­ten zu vermeiden und Texte auf­zu­lo­ckern.

Durch den Einsatz der Tags lassen sich Ihre Texte nicht nur optisch an­spre­chen­der gestalten, sondern es wird auch die se­man­ti­sche Struktur des Dokuments ver­bes­sert. Such­ma­schi­nen und andere Web-Tech­no­lo­gien können die Bedeutung von Zitaten besser verstehen und ver­ar­bei­ten, was letztlich zu einer besseren Auf­find­bar­keit und einer höheren Zu­gäng­lich­keit der Inhalte führt.

Welche Arten von HTML Quo­ta­ti­ons gibt es?

Wie genau Sie ein Zitat in Ihre HTML-Dokumente einbinden, hängt davon ab, für welches Tag Sie sich ent­schei­den. In den nach­fol­gen­den Ab­schnit­ten haben wir die drei möglichen Varianten für Sie zu­sam­men­ge­fasst – inklusive konkreter Beispiele.

<q>-Tag (Inline-Zitat)

Mit dem <q>-Tag lassen sich in HTML Zitate in den Fließtext in­te­grie­ren und durch An­füh­rungs­zei­chen kenn­zeich­nen. Sie müssen den fort­lau­fen­den Text somit nicht un­ter­bre­chen und können den direkt oder indirekt zitierten Text für Le­se­rin­nen und Leser visuell kenntlich machen. Da bei der Nutzung von <q>-Tags au­to­ma­tisch An­füh­rungs­zei­chen am Anfang und Ende der zitierten Passage hin­zu­ge­fügt werden, ist es nicht er­for­der­lich, An­füh­rungs­zei­chen manuell ein­zu­fü­gen. Zitate mit <q>-Tags kommen meist zum Einsatz, wenn es sich um kürzere Text­pas­sa­gen oder direkte Rede handelt, für die der Textfluss nicht un­ter­bro­chen werden muss.

Folgendes Beispiel zeigt die Syntax:

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

<blockquote>-Tag (Block­zi­tat)

Bei Block­zi­ta­ten handelt es sich um visuell her­vor­ge­ho­be­ne Zitate, die durch einen ein­ge­rück­ten Absatz oder einen dünnen Rahmen visuell her­vor­ge­ho­ben werden. Um eine Passage als in­di­vi­du­el­len Absatz vom Text abzuheben, verwenden Sie das <blockquote>-Tag. Durch die Auf­lo­cke­rung des Textes vermeiden Sie ermüdende Text­wüs­ten, betonen wichtige Inhalte und belegen wichtige Aussagen durch direkte Zitate. Zudem schaffen Sie durch ver­schie­de­ne Ge­stal­tungs­ele­men­te eine SEO-freund­li­che Text­struk­tur. Meist kommen Block­ele­men­te bei längeren Zitaten zum Einsatz. Sie können jedoch auch dazu dienen, einzelne wichtige Sätze oder Ver­lin­kun­gen visuell zu betonen.

Die Haupt­funk­ti­on des <blockquote>-Tags liegt in der Anweisung an Browser, markierte Text­ele­men­te visuell zu kenn­zeich­nen. Wie das Block­zi­tat letztlich for­ma­tiert wird, kann je nach Browser variieren. Möchten Sie die Form der Block­quo­te konkret de­fi­nie­ren, so helfen HTML-Attribute bzw. CSS-An­wei­sun­gen wie padding für den In­nen­ab­stand des Textes, border für die Stärke und Farbe des Rahmens oder address für die Schrift­far­be.

Syntax:

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

<cite> bzw. cite (Quel­len­an­ga­be)

Bei Zitaten ist nicht nur wichtig, sie als solche zu kenn­zeich­nen, sondern nach Mög­lich­keit auch die Quelle des Zitats anzugeben. So sorgen Sie dafür, dass Le­se­rin­nen und Leser sofort nach­voll­zie­hen können, woher ein Zitat stammt. Das gehört nicht nur zum guten Stil beim Zitieren, sondern stärkt Ihre Glaub­wür­dig­keit und Trans­pa­renz. 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 spe­zi­fi­sche Quellen eines Zitats als Referenz anzugeben. Es kommt ins­be­son­de­re bei Block­zi­ta­ten zum Einsatz und wird vom Browser in der Regel nicht angezeigt, wenn die In­for­ma­tio­nen für andere Tech­no­lo­gien wie Screen­rea­der 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 er­schei­nen:

„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 her­vor­zu­he­ben, bei­spiels­wei­se in kursiver Schrift­art. Indem Sie Ihre Re­fe­ren­zen klar und auf einen Blick kenntlich machen und auf korrektes Zitieren achten, sorgen Sie für mehr Trans­pa­renz und Nach­voll­zieh­bar­keit und stärken Ihre Se­rio­si­tät. Syntax:

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

Im Text könnte die Zitierung wie folgt er­schei­nen:

„Das genannte Zitat stammt aus (Quel­len­an­ga­be).“