HTML <blockquote>-Tag
Lernen Sie das HTML <blockquote>-Tag für Zitate aus anderen Quellen, das cite-Attribut, Attribution mit <footer> und Styling.
Das HTML-Tag <blockquote> kennzeichnet einen Textblock, der aus einer anderen Quelle zitiert wird — einem Artikel, einem Buch, einer Rede oder einer anderen Website. Es ist ein semantisches Element, kein Gestaltungswerkzeug: Es teilt Browsern, Suchmaschinen und assistiven Technologien mit, dass der enthaltene Inhalt ein Zitat ist. Dies kann beeinflussen, wie die Seite indexiert wird und wie sie Screenreader-Benutzern vorgelesen wird.
Browser rendern <blockquote> standardmäßig mit einem linken und rechten Einzug. Dieser Einzug ist eine angenehme Begleiterscheinung, nicht der eigentliche Zweck des Elements. <blockquote> nur zur Einrückung von Text zu verwenden ist ein Anti-Pattern — es fügt Ihrem Markup eine falsche Bedeutung hinzu. Wenn Sie nur einen visuellen Einzug benötigen, verwenden Sie stattdessen CSS (margin, padding) auf einem <div> oder <p>.
<blockquote> ist ein Block-Level-Element und kann andere Block-Inhalte enthalten: Absätze, Listen, Überschriften und ein <footer> für die Quellenangabe. Es wird innerhalb des <body>-Tags platziert.
Wann <blockquote> vs. <q> verwendet werden sollte
Verwenden Sie <blockquote> für lange, eigenständige Zitate, die ihren eigenen Block bilden. Verwenden Sie das inline-Tag <q> für kurze Zitate, die in einen Satz eingebettet sind — Browser umschließen den Inhalt von <q> automatisch mit Anführungszeichen, während <blockquote> keine Anführungszeichen hinzufügt.
Für kurze, inline-Zitate innerhalb eines Absatzes verwenden Sie stattdessen das <q>-Tag.
Syntax
Das <blockquote>-Tag wird paarweise verwendet. Der Inhalt wird zwischen dem öffnenden (<blockquote>) und dem schließenden (</blockquote>) Tag geschrieben.
Beispiel des HTML-Tags <blockquote>:
HTML-Tag <blockquote>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
A quote from the Cheshire Cat, in the popular children's book, Alice In Wonderland, written by Lewis Carroll
<blockquote cite="https://en.wikipedia.org/wiki/Alice%27s_Adventures_in_Wonderland">
I'm not crazy, my reality is just different than yours.
</blockquote>
</body>
</html>Das Attributionsmuster: <blockquote> mit <footer> und <cite>
Ein einfaches <blockquote> sagt dem Leser nicht, wer die Worte gesprochen hat oder woher das Zitat stammt. Die empfohlene, barrierefreie Methode zur Quellenangabe besteht darin, das Zitat mit einem <footer> zu versehen, der ein sichtbares <cite> für die Quelle enthält:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<blockquote cite="https://en.wikipedia.org/wiki/Alice%27s_Adventures_in_Wonderland">
<p>I'm not crazy, my reality is just different than yours.</p>
<footer>
— The Cheshire Cat, in <cite>Alice's Adventures in Wonderland</cite>
</footer>
</blockquote>
</body>
</html>Das <cite>-Element wird standardmäßig kursiv dargestellt und benennt das zitierte Werk. Da es Teil des Seitentexts ist, sehen es alle Leser — anders als das cite-Attribut bei <blockquote>, das weiter unten erläutert wird.
Beispiel des HTML-Tags <blockquote> in Kombination mit dem <q>-Tag:
Beispiel des HTML-Tags <blockquote> mit dem HTML-Tag <q>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p> A quote from the Cheshire Cat, in the popular children's book, Alice In Wonderland, written by Lewis Carroll</p>
<blockquote cite="https://en.wikipedia.org/wiki/Alice%27s_Adventures_in_Wonderland">
I'm not crazy, my reality is just different than yours.
</blockquote>
<q cite="https://www.wikiquote.org/">He who can, does, he who cannot, teaches.</q>
</body>
</html>Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| cite | URL | Gibt das Quelldokument oder die Nachricht an, aus der das Zitat entnommen wurde. Der Wert kann eine relative oder absolute URL sein. |
Das <blockquote>-Tag unterstützt außerdem die globalen Attribute und die Event-Attribute.
Das cite-Attribut ist nur maschinenlesbar
Es ist leicht, das cite-Attribut mit dem <cite>-Element zu verwechseln. Die entscheidende Einschränkung des cite-Attributs besteht darin, dass seine URL nicht für Benutzer angezeigt wird — Browser rendern sie nicht als sichtbaren Link. Es existiert nur für Maschinen: Suchmaschinen, Skripte und andere Tools, die den Quellcode der Seite lesen.
<blockquote cite="https://example.com/source">
This URL is in the markup, but no reader will ever see or click it.
</blockquote>Deshalb ist das cite-Attribut kein Ersatz für eine sichtbare Quellenangabe. Um eine Quelle für menschliche Leser auszuweisen, fügen Sie ein sichtbares <cite>-Element hinzu (in der Regel innerhalb eines <footer>, wie oben gezeigt). Verwenden Sie beide zusammen: das Attribut für Maschinen, das Element für Menschen.
Barrierefreiheit
Screenreader kündigen im Allgemeinen nicht an, dass ein <blockquote> ein Zitat ist, und sie ignorieren das cite-Attribut vollständig. Wenn also das Einzige, was Ihren Text als Zitat kennzeichnet, der Einzug oder das cite-Attribut ist, hat ein sehbehinderter Benutzer keine Möglichkeit zu erkennen, dass es sich um ein Zitat handelt.
Die praktische Schlussfolgerung:
- Kombinieren Sie jedes
<blockquote>mit einer sichtbaren Quellenangabe (einem<footer>und<cite>), damit die Quelle Teil des lesbaren Inhalts ist. - Verlassen Sie sich nicht allein auf das
cite-Attribut, um die Quelle zu kommunizieren. - Verwenden Sie
<blockquote>niemals für nicht zitierte Inhalte, nur um einen Einzug zu erzielen — das gibt Screenreader-Benutzern (und Suchmaschinen) irreführende Informationen.
Wie man das <blockquote>-Tag gestaltet
Standardmäßig rücken Browser <blockquote> mit Rändern ein. Ein verbreitetes Muster ist es, diesen Standard zu entfernen und stattdessen einen farbigen linken Rahmen, Innenabstand und Kursivschrift hinzuzufügen, damit das Zitat hervorsticht:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
blockquote {
margin: 1em 0;
padding: 0.5em 1.5em;
border-left: 4px solid #1c8d27;
background-color: #f4f4f4;
font-style: italic;
color: #333;
}
blockquote footer {
margin-top: 0.5em;
font-style: normal;
font-size: 0.9em;
color: #666;
}
</style>
</head>
<body>
<blockquote cite="https://en.wikipedia.org/wiki/Alice%27s_Adventures_in_Wonderland">
<p>I'm not crazy, my reality is just different than yours.</p>
<footer>— The Cheshire Cat, in <cite>Alice's Adventures in Wonderland</cite></footer>
</blockquote>
</body>
</html>Um nur den Einzug zu steuern, verwenden Sie die Kurzschreibweise margin-left, margin-right oder margin.