<blockquote>

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>.

Steckbrief <blockquote>

Kategorie: Text & Typografie
Art: Block
Attribute: 1
Beispiele: 3
Browser: 5 von 5
E-Mail: 3 von 5
Stand: 03.02.2026

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

index.html

Grundsyntax

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

Attribute

1 Attribut

Attribut und Beispiel	Beschreibung
`cite` URL cite="https://example.com/article"	URL der Quelle des Zitats. Wird nicht im Browser angezeigt, ist aber für Screenreader und Suchmaschinen verfügbar.

Beispiele

3 Beispiele

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

index.html

Zitat mit Quellenangabe

<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>

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

index.html

Mehrabsätziges Zitat

<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>

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

index.html

Gestyltes Blockquote

<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

3 Punkte

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

3 Punkte

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

5 von 5

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

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

3 von 5

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

Apple Mail

Komplett
Gmail

Teilweise

Gmail zeigt blockquote mit einer blauen Linie links an (wie bei E-Mail-Antworten). Das kann mit eigenen Zitat-Styles kollidieren.
Outlook

Teilweise

Outlook stellt blockquote oft mit abweichenden Margins dar. Verwende Inline-Styles für konsistentes Aussehen.
Thunderbird

Komplett
Yahoo Mail

Komplett

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da

<blockquote>

Grundlagen

Syntax

Attribute

Beispiele

Barrierefreiheit

Häufige Fehler

Browser-Kompatibilität

Email-Kompatibilität

Newsletter