HTML <pre> Tag
Das <pre>-Tag definiert vorformatierten Text, der genau so angezeigt wird, wie er in der HTML-Datei geschrieben ist.
Das HTML-<pre>-Tag definiert vorformatierten Text — Text, der genau so dargestellt wird, wie er im Quellcode steht, mit allen Leerzeichen und Zeilenumbrüchen. Browser zeigen den Inhalt eines <pre>-Elements in einer Schrift mit fester Zeichenbreite (Monospace) an. Am häufigsten wird es verwendet, um Quellcode anzuzeigen (meist zusammen mit dem <code>-Tag) oder beliebigen Text, bei dem der Autor das genaue Layout der Zeilen bestimmt, wie etwa ein Gedicht oder ASCII-Art.
Warum <pre> Leerzeichen bewahrt
Standardmäßig reduzieren Browser Leerzeichen: Eine Folge von Leerzeichen, Tabulatoren und Zeilenumbrüchen wird als einzelnes Leerzeichen dargestellt, und Zeilenumbrüche im HTML haben keine sichtbare Wirkung. Deshalb verändert das Einfügen mehrerer Leerzeichen oder das Drücken der Eingabetaste innerhalb eines normalen Absatzes nicht das Erscheinungsbild des Textes.
Das <pre>-Element deaktiviert dieses Verhalten. Innerhalb von <pre> ist jedes Leerzeichen, jeder Tabulator und jeder Zeilenumbruch bedeutsam und wird buchstäblich angezeigt — es sind keine oder <br> nötig, um den Abstand zu steuern. Intern entspricht dies der CSS-Deklaration white-space: pre, die Browser <pre> standardmäßig zuweisen.
Verwende <pre> immer dann, wenn die genaue Anordnung der Zeichen wichtig ist: Codeauflistungen, Befehlszeilenausgaben, tabellarischer Klartext oder aus Zeichen zusammengesetzte Grafiken.
Syntax
Das <pre>-Tag wird paarweise verwendet. Der Inhalt steht zwischen dem öffnenden (<pre>) und schließenden (</pre>) Tag. Beachte, dass Text typischerweise in der Zeile nach dem öffnenden Tag beginnt und jede Einrückung im Quellcode in der Ausgabe erscheint.
Inline-Elemente werden typischerweise innerhalb des <pre>-Tags platziert. Obwohl Block-Level-Elemente in HTML5 erlaubt sind, können sie unerwartete Leerzeichen oder Einrückungen erzeugen, weshalb Inline-Elemente generell bevorzugt werden.
Beispiel des HTML-<pre>-Tags
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
</head>
<body>
<pre>Spaces
and line breaks
within this element
are shown as typed.
</pre>
</body>
</html>Ergebnis
Das <pre><code>-Muster für Codeblöcke
Die kanonische, barrierefreie Methode zur Anzeige eines Quellcodeblocks besteht darin, ein <code>-Element in ein <pre>-Element einzubetten:
<pre>sorgt für das Block-Layout und bewahrt Leerzeichen und Zeilenumbrüche.<code>ergänzt die Semantik: Es markiert den Inhalt als Computercode und nicht als gewöhnlichen Text.
Zusammen teilen sie Suchmaschinen und Hilfstechnologien genau mit, worum es sich bei dem Inhalt handelt. Screenreader können ihn als Codebereich ankündigen, und Syntax-Highlighting-Bibliotheken (Prism, highlight.js usw.) nutzen den pre > code-Selektor, um das Markup einzufärben. <pre> allein würde die Formatierung erhalten, aber diese Bedeutung verlieren — daher ist die Kombination das empfohlene Muster.
Beispiel des HTML-<pre>-Tags mit dem <code>-Element
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<pre><code>body {
color: orange;
}</code></pre>
</body>
</html>Leerzeichen innerhalb von <pre> sind literal, daher setze das schließende </pre> direkt an den Code (wie oben). Führende Zeilenumbrüche und Einrückungen zwischen <pre> und <code> werden gerendert — weshalb tief eingerückter Quellcode unerwünschte Leerzeilen und führende Leerzeichen erzeugen kann.
Escaping von <, > und & innerhalb von <pre>
<pre> bewahrt Leerzeichen, schaltet aber das HTML-Parsing nicht ab. Der Browser liest den Inhalt weiterhin als Markup. Wenn du also wörtliches HTML oder beliebigen Text mit den Zeichen <, > oder & anzeigen möchtest, musst du diese mit HTML-Entities escapen — andernfalls versucht der Browser, sie als Tags zu interpretieren:
| Zeichen | Entity |
|---|---|
< | < |
> | > |
& | & |
Um beispielsweise den Text <p>Hello & welcome</p> anzuzeigen, muss man schreiben:
<pre><code><p>Hello & welcome</p></code></pre>Die Seite zeigt dann die spitzen Klammern an, anstatt einen Absatz zu rendern. Siehe die HTML-Unicode-Referenz für die vollständige Liste benannter Entities.
Styling von <pre> und die white-space-Eigenschaft
Browser gestalten <pre> standardmäßig mit white-space: pre. Du kannst mit der CSS-Eigenschaft white-space steuern, wie vorformatierter Text umbrochen wird:
| Wert | Zeilenumbrüche | Leerzeichen / Tabulatoren | Umbruch |
|---|---|---|---|
pre | erhalten | erhalten | kein Umbruch (Standard für <pre>) |
pre-wrap | erhalten | erhalten | Umbruch bei zu langen Zeilen |
pre-line | erhalten | reduziert | Umbruch bei zu langen Zeilen |
Da pre nie umbricht, läuft eine lange Codezeile aus ihrem Container heraus. Die übliche Lösung ist, mit overflow-x: auto eine horizontale Scrollleiste hinzuzufügen, die die ursprüngliche Formatierung beibehält und dem Leser das seitliche Scrollen ermöglicht:
pre {
background-color: #f4f4f4;
padding: 10px;
overflow-x: auto; /* horizontal scroll for long lines */
}Wenn der Text lieber in die nächste Zeile umbrechen soll, anstatt zu scrollen, verwende stattdessen white-space: pre-wrap.
Attribute
Das <pre>-Element hat keine Pflichtattribute. Die alten Attribute width, cols und wrap sind veraltet und wurden aus HTML5 entfernt — verwende stattdessen CSS:
| Veraltetes Attribut | Funktion | Alternative |
|---|---|---|
width | empfohlene Zeichenbreite | CSS max-width |
cols | empfohlene Spaltenanzahl | CSS width / max-width |
wrap | Zeilenumbruch gesteuert | CSS white-space: pre-wrap |
Das <pre>-Tag unterstützt die Global Attributes und die Event Attributes.
Verwandte Tags
<code>— markiert ein Fragment von Computercode.<samp>— Beispielausgabe eines Programms.<kbd>— Tastatureingabe.- HTML-Computercode-Elemente — Übersicht aller Code-bezogenen Tags.