<blockquote>

Zuletzt aktualisiert am 3. Februar 2026

Das <blockquote>-Element kennzeichnet ein längeres Zitat, das aus einer externen Quelle stammt. Browser stellen es standardmäßig eingerückt dar, um es visuell vom umgebenden Text abzuheben. Wenn du einen ganzen Absatz oder mehrere Sätze zitierst, sei es aus einem Buch, einem Artikel oder einer Rede, ist <blockquote> das richtige Element. Für kurze Inline-Zitate innerhalb eines Satzes gibt es stattdessen <q>.

Grundlagen

<blockquote> sagt dem Browser und Screenreadern: “Dieser Text stammt von jemand anderem.” Es ist wie Anführungszeichen in einem Buch, aber für längere Passagen, die als eigener Block dargestellt werden sollen.

• <blockquote> ist ein Block-Element: Es beginnt auf einer neuen Zeile und wird standardmäßig eingerückt (ca. 40px Margin links und rechts)
• Es darf beliebige Inhalte enthalten: Absätze, Listen, Überschriften, sogar weitere Blockquotes
• Das optionale cite-Attribut gibt die URL der Quelle an (wird nicht im Browser angezeigt, ist aber für Maschinen lesbar)
• Für die sichtbare Quellenangabe wird oft ein <footer> oder <cite>-Element innerhalb des Blockquotes verwendet
• Für kurze Inline-Zitate (ein paar Wörter innerhalb eines Satzes) verwende stattdessen das <q>-Element

Syntax

<blockquote>
  <p>Das Web ist für alle da.</p>
</blockquote>

Attribute

Beispiele

Zitat mit Quellenangabe

Ein Zitat mit sichtbarer Quellenangabe. Das cite-Attribut enthält die URL, das <cite>-Element den sichtbaren Autor:

<blockquote cite="https://www.w3.org/Press/IPO-announce">
  <p>Das Web ist für alle da, und gemeinsam haben wir
     die Macht, es zu verändern.</p>
  <footer><cite>Tim Berners-Lee</cite></footer>
</blockquote>

Mehrabsätziges Zitat

Wenn das Zitat aus mehreren Absätzen besteht, gehören alle <p>-Elemente in ein einziges <blockquote>:

<blockquote>
  <p>Programme müssen geschrieben werden, damit Menschen sie
     lesen können, und nur nebenbei, damit Maschinen sie
     ausführen können.</p>
  <p>Die Informatik ist nicht mehr über Computer als die
     Astronomie über Teleskope.</p>
  <footer><cite>Hal Abelson</cite></footer>
</blockquote>

Gestyltes Blockquote

Mit CSS kannst du das Standard-Aussehen von <blockquote> komplett anpassen, zum Beispiel mit einem farbigen Rand links:

<blockquote style="border-left: 4px solid #6366f1;
                    padding-left: 16px;
                    margin-left: 0;
                    color: #4b5563;">
  <p>Einfachheit ist die höchste Stufe der Vollendung.</p>
  <footer><cite>Leonardo da Vinci</cite></footer>
</blockquote>

Barrierefreiheit

• Screenreader-Verhalten: Screenreader kündigen <blockquote> als “Zitat” an und markieren das Ende des Zitats. Das hilft Nutzern zu verstehen, dass dieser Text von einer anderen Quelle stammt.
• cite-Attribut nutzen: Auch wenn das cite-Attribut nicht sichtbar ist, können Screenreader und Browser-Erweiterungen es auslesen. Es ist gute Praxis, die Quell-URL anzugeben.
• Nicht für Einrückung missbrauchen: <blockquote> nur für visuelles Einrücken zu verwenden, verwirrt Screenreader-Nutzer, die dann fälschlicherweise ein Zitat erwarten.

Häufige Fehler

• blockquote für Einrückung missbrauchen: Wenn du Text nur einrücken willst, ohne ihn als Zitat zu kennzeichnen, verwende CSS margin-left oder padding-left. <blockquote> hat eine semantische Bedeutung, die Screenreader kommunizieren.

• Quellenangabe außerhalb des blockquote: Die Quellenangabe (<footer> mit <cite>) gehört innerhalb des <blockquote>, nicht danach. So ist klar, dass die Quellenangabe zum Zitat gehört.

• blockquote statt q für Inline-Zitate: Kurze Zitate innerhalb eines Satzes (z.B. “Er sagte, das sei ‘falsch’”) gehören in ein <q>-Element, nicht in ein <blockquote>. Das <blockquote> ist für eigenständige Zitatblöcke.

Browser-Kompatibilität

Das blockquote-Element wird von allen Browsern seit den Anfängen des Webs unterstützt.

Email-Kompatibilität

Das blockquote-Element wird in den meisten Email-Clients unterstützt, allerdings variiert die Darstellung.

Verwandte Elemente