HTML Element - pre

Das pre-Element stellt vorformatierten Text dar.

Beispiel

<pre>
Das ist ein Text
in einem pre-Element       Leerzeichen
                           Umbrüche bleiben 
in der Ansicht erhalten.
</pre>

Definition und Verwendung

Das pre-Element definiert vorformatierten Text.

Text in einem pre-Element wird in einer Schriftart mit fester Breite angezeigt, wobei Leerzeichen und Zeilenumbrüche erhalten bleiben. Der Text wird exakt so dargestellt, wie er im HTML-Quellcode geschrieben ist.

Das pre-Element kann mit folgenden HTML-Elementen kombiniert werden:

Tabelle von HTML-Elementen:
Tag Beschreibung
code
samp
kbd
var

Beispiel mit: code

Die Kombination mit dem code-Element bietet sich an bei der Wiedergabe von Quelltextausschnitten.
Dabei werden die spitzen Klammern durch:
  • &lt; = <
  • &gt; = >
ersetzt. So wird verhindert, dass der Browser den Inhalt als HTML-Code erkennt. 
<pre><code>
&lt;!DOCTYPE html&gt;
&lt;html lang="de"&gt;
&lt;head&gt;
&lt;title&gt;Beispiel für eine Seite&lt;/title&gt;
&amp;lt;/head&amp;gt;

&<body&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

Attribute

Attribute erweitern Elemente um zusätzliche Eigenschaften oder Informationen und beeinflussen deren Bedeutung, Verhalten oder Darstellung. Sie bestehen in der Regel aus einem Attributnamen und einem zugehörigen Wert, wobei die zulässigen Attribute vom jeweiligen Element abhängen und teils allgemein, teils elementbezogen definiert sind.

Eine besondere Gruppe bilden die aria-*-Attribute, die zur Unterstützung der Barrierefreiheit zusätzliche Informationen für assistive Technologien bereitstellen.

Unterstützung von Global- und Event-Attributen

Das pre-Tag unterstützt auch Global- und Event-Attribute.

Standardbrowser CSS

Webbrowser wenden auf viele Elemente vordefinierte CSS-Stile an, die eine grundlegende Struktur und Lesbarkeit sicherstellen. Umfang und Ausgestaltung dieser Standardstile können je nach Browser variieren, etwa in Bezug auf Abstände, Schriftgrößen oder die Darstellung einzelner Elemente.

pre {
display: block;
font-family: monospace;
white-space: pre;
margin: 1em 0;
}

Browserunterstützung

Die Unterstützung von Elementen und Attributen ist in den gängigen modernen Browsern weitgehend einheitlich gewährleistet. Unterschiede können dennoch in Details, im Einführungszeitpunkt neuer Funktionen oder bei experimentellen Features auftreten.

Diese Tabelle zeigt die Unterstützung des pre durch gängige Webbrowser und ordnet dessen Verfügbarkeit im aktuellen Browserumfeld ein.
Element Firefox Internet Explorer / Edge Safari Chrome Opera
<pre>