Zitate kennzeichnen in HTML mit <blockquote>

Möchte man einen Text aus einer anderen Quelle zitieren, sollte man diesen unbedingt kenntlich machen, als Zitat. Zum Kennzeichnen eines Zitates gibt es den HTML-Befehl <blockquote>. Mit diesem Befehl wird der zitierte Text umschlossen.

Möchte man beispielsweise einen Textabschnitt aus dem Zauberlehrling von Wolfgang von Goethe zitieren, packen wir diesen zwischen <blockquote>

<p>Es folgt ein passendes Zitat:
<blockquote>
  „Herr, die Not ist groß!
  Die ich rief, die Geister
  werd ich nun nicht los.“
</blockquote>

Das Aussehen des zitierten Textes übernimmt der Browser. Der Text wird auf beiden Seiten eingerückt dargestellt:

Es fällt sofort auf, dass unsere 3 zitierten Zeilen nun als eine Zeile ausgegeben werden. Das kennen wir vom Browserausgaben in HTML. Wir benötigen also die entsprechenden HTML-Befehle für Absätze und Umbrüche.

Innerhalb von dem HTML-Befehl <blockquote> können beliebige andere HTML-Befehle genutzt werden. Wir wollen für die Zauberlehrling-Ballade hinter jeder Zeile einen Umbruch. Daher bauen wir ein <br> ein und packen das Ganze noch in einen Absatz:

<p>Es folgt ein passendes Zitat:
<blockquote>
  <p>„Herr, die Not ist groß!<br>
  Die ich rief, die Geister<br>
  werd ich nun nicht los.“</p>
</blockquote>

Ergebnis

Zitat mit Quellenangabe in HTML

Zum guten Stil gehört auch, die Quelle des Zitates aufzuführen. Dazu wird das Attribut cite= verwendet. Unser HTML-Befehl <blockquote> wird um das Attribut erweitert:

<blockquote cite="https://de.wikipedia.org/wiki/Der_Zauberlehrling">
  <p>„Herr, die Not ist groß!<br>
  …
</blockquote>

Bitte das Attribut cite nicht mit dem HTML-Befehl <cite> verwechseln.

Lässt man sich nun das Ganze im Browser anzeigen, sehen wir nichts von der Quelle. Wollen wir diese Angabe aber sichtbar machen, dann hilft hier uns CSS weiter. Der Vollständigkeitshalber hier der entsprechende CSS-Code. Die Erklärung der Funktion der CSS-Anweisungen gibt es unter https://www.html-seminar.de/css3-before-after.htm

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

Als Ergebnis erhalten wir unser Zitat mit Quellenangabe angezeigt: