<pre>

Das <pre>-Element stellt vorformatierten Text dar. Das bedeutet, Leerzeichen, Tabs und Zeilenumbrüche werden genau so angezeigt, wie du sie im Quellcode geschrieben hast. Normalerweise fasst der Browser mehrere Leerzeichen zu einem zusammen und ignoriert Zeilenumbrüche. Bei <pre> ist das anders: Jedes Zeichen zählt. Das macht es ideal für Code-Blöcke, ASCII-Art und tabellarische Daten.

Steckbrief <pre>

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

Grundlagen

Im normalen HTML-Text behandelt der Browser Whitespace großzügig: Ob du zwei oder zwanzig Leerzeichen hintereinander schreibst, im Browser siehst du nur eines. Bei <pre> wird dieser Mechanismus abgeschaltet.

<pre> ist ein Block-Element: Es beginnt auf einer neuen Zeile und nimmt die volle Breite ein
Browser stellen <pre> in einer Monospace-Schrift dar (z.B. Courier): Jedes Zeichen hat die gleiche Breite
Leerzeichen, Tabs und Zeilenumbrüche werden exakt beibehalten
Für Code-Blöcke wird <pre> typischerweise mit <code> kombiniert: <pre><code>...</code></pre>
Text innerhalb von <pre> wird nicht automatisch umgebrochen: Bei langen Zeilen entsteht ein horizontaler Scrollbalken

Syntax

index.html

Grundsyntax

<pre>Dies   ist   vorformatiert.
  Einrückungen bleiben erhalten.
    Auch tiefere Einrückungen.</pre>

Beispiele

3 Beispiele

Das häufigste Muster: <pre> für die Formatierung und <code> für die semantische Auszeichnung als Programmcode:

index.html

Code-Block

<pre><code>function greet(name) {
  return "Hallo, " + name + "!";
}

console.log(greet("Mario"));</code></pre>

<pre> eignet sich auch für ASCII-Art, weil die Zeichenabstände exakt beibehalten werden:

index.html

ASCII-Art

<pre>  /\_/\
 ( o.o )
  > ^ <
 /|   |\
(_|   |_)</pre>

Für einfache tabellarische Daten, bei denen eine HTML-Tabelle übertrieben wäre:

index.html

Tabellarische Daten

<pre>Name          Alter   Stadt
Mario         30      Berlin
Lisa          25      München
Tom           28      Hamburg</pre>

Barrierefreiheit

Screenreader lesen den Inhalt eines <pre>-Elements Zeile für Zeile vor und bewahren dabei die Textstruktur. Bei Code-Blöcken kann das hilfreich sein, bei langen vorformatierten Texten allerdings auch anstrengend.

Verwende für Code-Blöcke immer die Kombination <pre><code>, damit Screenreader den Inhalt als Programmcode erkennen und entsprechend ankündigen können. Einige Screenreader bieten dann spezielle Navigationsmöglichkeiten an.

Bei sehr langen Code-Blöcken kann es sinnvoll sein, eine kurze Beschreibung vor dem <pre> zu platzieren, damit Screenreader-Nutzer wissen, was sie erwartet und ob sie den Block überspringen möchten. Du kannst auch aria-label auf dem <pre>-Element verwenden, um eine Zusammenfassung zu geben.

Häufige Fehler

3 Punkte

Einrückung im Quellcode: Wenn du <pre> im HTML einrückst, werden diese Einrückungen mit angezeigt. Achte darauf, den Inhalt direkt am Anfang des <pre>-Tags zu beginnen, ohne zusätzliche Leerzeichen oder Zeilenumbrüche nach dem öffnenden Tag.
pre ohne code für Programmcode: Wenn du Code darstellen willst, verwende immer <pre><code>. Das <pre> allein sagt nur “vorformatiert”, aber <code> sagt “das ist Programmcode”, wichtig für Screenreader und Suchmaschinen.
HTML-Sonderzeichen nicht escapen: Innerhalb von <pre> musst du < als < und > als > schreiben, wenn du HTML-Tags als Text anzeigen willst. Sonst interpretiert der Browser sie als echte Tags.

Browser-Kompatibilität

5 von 5

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

4 von 5

Das pre-Element wird in den meisten Email-Clients unterstützt, aber die Darstellung kann variieren.

Apple Mail

Komplett
Gmail

Komplett
Outlook

Teilweise

Outlook unterstützt pre grundsätzlich, aber die Monospace-Schrift und Whitespace-Behandlung können inkonsistent sein. Für E-Mails besser Inline-Styles mit font-family: monospace und white-space: pre verwenden.
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

<pre>

Grundlagen

Syntax

Beispiele

Barrierefreiheit

Häufige Fehler

Browser-Kompatibilität

Email-Kompatibilität

Newsletter