HTML blockquote: Blockzitate und Quellenangaben
HTML <blockquote> kennzeichnet einen eigenständigen Abschnitt, der aus einer anderen Quelle zitiert wird. Er kann mehrere Absätze enthalten. Sie können die ursprüngliche URL in seinem cite-Attribut speichern und einen separaten, sichtbaren Link hinzufügen, damit die Leser die Quelle überprüfen können.
Wann sollten Sie blockquote verwenden?
Verwenden Sie blockquote, wenn Sie zitiertes Material als eigenen Abschnitt darstellen. Verwenden Sie es nicht nur, um einen Absatz einzurücken oder seine Farbe zu ändern. Für kurze Zitate innerhalb eines Satzes eignet sich <q>; siehe die HTML-q-Referenz.
Ein Blockzitat kann Absätze und andere Flussinhalte enthalten. Halten Sie das Zitat von der Quellenangabe getrennt: Platzieren Sie den Autor oder die Quellenangabe außerhalb von <blockquote>. Überprüfen Sie die Originalformulierung und verwenden Sie nur das Material, das für Ihren Zweck erforderlich ist.
Ein vollständiges Beispiel mit einem Quellenlink
Speichern Sie den folgenden Code als quote.html und öffnen Sie ihn in einem Browser. Es wird kein Server oder zusätzliche Bibliothek benötigt. Das kurze englische Zitat stammt direkt aus dem HTML-Standard.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Beispiel für ein Blockzitat</title>
</head>
<body>
<p>Der HTML-Standard beschreibt den Inhalt eines blockquote-Elements wie folgt.</p>
<blockquote cite="https://html.spec.whatwg.org/multipage/grouping-content.html#the-blockquote-element">
<p lang="en">a section that is quoted from another source</p>
</blockquote>
<p>Quelle: <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-blockquote-element"
target="_blank" rel="noopener noreferrer"><cite>HTML Standard, blockquote element</cite></a></p>
</body>
</html>Der Browser zeigt den einführenden Absatz, das Zitat und den Quelllink in dieser Reihenfolge an. Das Standard-Styling variiert, aber Browser geben dem Zitat häufig zusätzliche Ränder. Der Link öffnet den entsprechenden Abschnitt des HTML-Standards. Das Zitat behält seine ursprüngliche englische Formulierung bei.
Das cite-Attribut unterscheidet sich von einer sichtbaren Zitation.
Das cite-Attribut enthält die URL der zitierten Quelle. Das Hinzufügen zeigt nicht automatisch einen Link oder die Quellenangabe an. Fügen Sie ein separates <a>-Element und beschreibenden Text hinzu, wenn Leser der Referenz folgen müssen.
Das Attribut cite und das Element <cite> teilen denselben Namen, haben aber unterschiedliche Funktionen. Das Attribut speichert eine Quelladresse; das Element markiert den Titel eines Werks, wie zum Beispiel eines Buches oder Dokuments. Der Name eines Autors allein ist kein Werktitel.
Das Zitat mit CSS gestalten
Behalten Sie die Bedeutung des Zitats in HTML bei und passen Sie Abstände und Rahmen mit CSS an. Verknüpfen Sie im head des Beispiels ein Stylesheet und fügen Sie dort die folgende Regel hinzu. Sie können die Regel auch in ein bereits verwendetes Stylesheet aufnehmen.
blockquote {
margin: 1.5rem 0;
padding: 0.5rem 1rem;
border-left: 0.25rem solid #477080;
}Das Zitat erhält einen linken Rand und einen inneren Abstand. Wenn Sie Hintergrund- oder Textfarben hinzufügen, achten Sie auf einen gut lesbaren Kontrast. Markieren Sie normalen, nicht zitierten Inhalt nicht als Blockzitat nur, um dieses Aussehen zu erzielen. Siehe die Definition von Blockzitaten im HTML-Standard und die MDN-Blockzitatreferenz für Syntax und Verwendungsvoraussetzungen.
