`<pre>`: Das Element für vorformatierten Text

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Das <pre> HTML-Element repräsentiert vorformatierten Text, der genau so dargestellt werden soll, wie er in der HTML-Datei geschrieben wurde. Der Text wird typischerweise mit einer nicht-proportionalen oder monospaced-Schriftart angezeigt.

Leerzeichen innerhalb dieses Elements werden wie geschrieben angezeigt, mit einer Ausnahme. Wenn ein oder mehrere führende Zeilenumbrüche unmittelbar nach dem öffnenden <pre>-Tag enthalten sind, wird das erste Zeilenumbruchzeichen entfernt.

Standardmäßig ist <pre> ein Block-Level-Element, d.h. sein Standardwert für display ist block.

Probieren Sie es aus

Wenn Sie reservierte Zeichen wie <, >, & und " innerhalb des <pre>-Tags anzeigen müssen, müssen die Zeichen mit ihren entsprechenden Zeichenreferenzen maskiert werden.

<pre>-Elemente enthalten häufig <code>, <samp> und <kbd>-Elemente, um Computer-Code, Computerausgaben und Benutzereingaben darzustellen.

Attribute

Dieses Element enthält nur die globalen Attribute.

width

Enthält die bevorzugte Anzahl von Zeichen, die eine Zeile haben sollte. Obwohl technisch noch implementiert, hat dieses Attribut keine visuelle Wirkung; um einen solchen Effekt zu erzielen, verwenden Sie stattdessen CSS width.

wrap

Ist ein Hinweis, wie der Überlauf geschehen soll. In modernen Browsern wird dieser Hinweis ignoriert und hat keine visuelle Wirkung; um einen solchen Effekt zu erzielen, verwenden Sie stattdessen CSS white-space.

Barrierefreiheit

Es ist wichtig, eine alternative Beschreibung für alle mit vorformatiertem Text erstellten Bilder oder Diagramme bereitzustellen. Die alternative Beschreibung sollte den Inhalt des Bildes oder Diagramms klar und präzise beschreiben.

Personen mit Sehschwächen, die Assistive Technologien wie einen Screenreader verwenden, können möglicherweise nicht verstehen, was die Zeichen des vorformatierten Textes darstellen, wenn sie in Reihenfolge vorgelesen werden.

Eine Kombination der <figure>- und <figcaption>-Elemente, ergänzt durch die ARIA-role und aria-label-Attribute auf dem pre-Element, ermöglicht es, dass das vorformatierte ASCII-Kunstwerk als Bild mit alternativem Text angekündigt wird, und figcaption dient als Bildunterschrift.

Beispiel

html
<figure>
  <pre role="img" aria-label="ASCII COW">
      ___________________________
  &lt; I'm an expert in my field. &gt;
      ---------------------------
          \   ^__^
           \  (oo)\_______
              (__)\       )\/\
                  ||----w |
                  ||     ||
  </pre>
  <figcaption id="cow-caption">
    A cow saying, "I'm an expert in my field." The cow is illustrated using
    preformatted text characters.
  </figcaption>
</figure>

Beispiele

Einfaches Beispiel

HTML

html
<p>Using CSS to change the font color is easy.</p>
<pre><code>
body {
  color: red;
}
</code></pre>

Ergebnis

Maskierung von reservierten Zeichen

HTML

html
<pre><code>
let i = 5;

if (i &lt; 10 &amp;&amp; i &gt; 0)
  return &quot;Single Digit Number&quot;
</code></pre>

Ergebnis

Technische Zusammenfassung

Inhaltskategorien Flussinhalt, greifbarer Inhalt.
Erlaubter Inhalt Phraseninhalt.
Tag-Auslassung Keine, sowohl das Start- als auch das End-Tag sind erforderlich.
Erlaubte Eltern Jedes Element, das Flussinhalt akzeptiert.
Implizierte ARIA-Rolle generic
Erlaubte ARIA-Rollen Beliebig
DOM-Schnittstelle [`HTMLPreElement`](/de/docs/Web/API/HTMLPreElement)

Spezifikationen

Specification
HTML Standard
# the-pre-element

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch