<pre>

Zuletzt aktualisiert am 3. Februar 2026

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.

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

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

Beispiele

Code-Block mit pre und code

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

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

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

ASCII-Art

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

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

Tabellarische Textdaten

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

<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

• 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

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

Email-Kompatibilität

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

Verwandte Elemente