<pre>: Das Preformatted Text Element

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 wird, wie er in der HTML-Datei geschrieben ist. Der Text wird typischerweise in einer nicht proportionalen oder monospaced Schriftart angezeigt. Leerzeichen innerhalb dieses Elements werden wie geschrieben angezeigt.

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 mithilfe ihrer jeweiligen Zeichenreferenzen maskiert werden.

<pre>-Elemente enthalten häufig <code>, <samp> und <kbd>-Elemente, um Computercode, Computerausgabe und Benutzereingaben darzustellen.

Attribute

Dieses Element beinhaltet nur die globalen Attribute.

width

Beinhaltet die bevorzugte Anzahl von Zeichen, die eine Zeile haben sollte. Obwohl technisch immer noch implementiert, hat dieses Attribut keine visuelle Auswirkung; um eine solche Wirkung zu erzielen, verwenden Sie stattdessen CSS width.

wrap

Ist ein Hinweis, der angibt, wie der Überlauf geschehen muss. In modernen Browsern wird dieser Hinweis ignoriert und hat keine visuelle Wirkung in seiner Gegenwart; um eine solche Wirkung zu erzielen, verwenden Sie stattdessen CSS white-space.

Barrierefreiheit

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

Personen mit Sehbehinderungen, die beim Browsen auf unterstützende Technologien wie einen Screenreader angewiesen sind, verstehen möglicherweise nicht, was die Zeichen des vorformatierten Textes darstellen, wenn sie nacheinander vorgelesen werden.

Eine Kombination aus den Elementen <figure> und <figcaption>, ergänzt um die ARIA role und aria-label-Attribute auf dem pre-Element ermöglichen es, das vorformatierte ASCII Kunstwerk als Bild mit alternativem Text anzukündigen, wobei das figcaption als Bildunterschrift dient.

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 reservierter 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, fühlbarer 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