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

Leerzeichen innerhalb dieses Elements werden wie geschrieben angezeigt, mit einer Ausnahme. Wenn ein oder mehrere führende Zeilenumbrüche direkt nach dem öffnenden<pre>-Tag enthalten sind, wird dererste Zeilenumbruch entfernt. Diese Transformation erfolgt durch den HTML-Parser und gilt nicht bei Verwendung vonXHTML.

Der Textinhalt von<pre>-Elementen wird als HTML interpretiert, sodass Sie Syntaxzeichen wie< möglicherweise mit ihren entsprechendenZeichenreferenzen escapen müssen, um sicherzustellen, dass Ihr Textinhalt als reiner Text erhalten bleibt. Weitere Informationen finden Sie unterEscaping von mehrdeutigen Zeichen.

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

Standardmäßig ist<pre> einBlock-Level Element, das heißt, der Standardwert vondisplay istblock.

Probieren Sie es aus

<pre>             S             A            LUT             M            O N            D  E            DONT          JE SUIS          LA  LAN          G U E  É         L O Q U E N        TE      QUESA       B  O  U  C  H  E      O        P A R I S     T I R E   ET   TIRERA    T O U             JOURS   AUX                  A  L LEM                      ANDS   - Apollinaire</pre>

pre {  font-size: 0.7rem;  margin: 0;}

Attribute

Dieses Element enthält nur dieglobalen Attribute.

widthVeraltetNicht standardisiert

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

wrapNicht standardisiertVeraltet

Ist einHinweis, der angibt, wie der Überlauf erfolgen muss. In modernen Browsern wird dieser Hinweis ignoriert und es resultiert keine visuelle Wirkung; um solch einen Effekt zu erzielen, verwenden Sie stattdessen CSSwhite-space.

Barrierefreiheit

Es ist wichtig, eine alternative Beschreibung für 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.

Menschen mit Sehbehinderungen, die mit Hilfe von unterstützender Technologie wie einem Screenreader browsen, können möglicherweise nicht verstehen, was die vorformatierten Textzeichen darstellen, wenn sie in Reihenfolge vorgelesen werden.

Eine Kombination der<figure>- und<figcaption>-Elemente, ergänzt durch dasARIArole undaria-label Attribute ampre-Element, erlauben es, das vorformatierteASCII-Kunstwerk als Bild mit alternativem Text anzukündigen, wobei dasfigcaption als Bildunterschrift dient.

Beispiel

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

• MDN Verständnis von WCAG, Richtlinie 1.1 Erklärungen
• H86: Bereitstellung von Textalternativen für ASCII-Art, Emoticons und Leetspeak | W3C Techniken für WCAG 2.0

Beispiele

Einfaches Beispiel

HTML

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

Ergebnis

Escaping von mehrdeutigen Zeichen

Angenommen, Sie möchten HTML-Code in einem<pre>-Element demonstrieren. Die Zeichenfolgen, die gültige HTML-Tags definieren (beginnend mit< und endend mit>), werden nicht angezeigt. Um die Tag-Zeichen als Text anzuzeigen, müssen Sie zumindest das<-Zeichen mit seiner Zeichenreferenz escapen, sodass die Sequenzen keine gültigen Tags mehr definieren.

In Wirklichkeit behandelt der HTML-Parser die meisten Zeichen als normalen Text, es sei denn, sie stehen in bestimmten Kontexten. Zum Beispiel ist< code in Ordnung, aber<code würde falsch interpretiert;&am; ist in Ordnung, aber& ist es nicht. Es ist jedoch eine gute Praxis, alle mehrdeutigen Zeichen zu escapen, um Verwirrung zu vermeiden, insbesondere wenn Sie programmgesteuert HTML generieren und den<pre>-Inhalt injizieren. In diesem Fall hier eine gute Faustregel, wie man Zeichen escapen sollte:

1. Schreiben Sie zuerst den Inhalt so auf, wie Sie ihn im HTML-Dokument erscheinen lassen möchten.
2. Ersetzen Sie alle Et-Zeichen (&) durch&. Machen Sie diesen Schritt zuerst, damit neue&-Zeichen, die im nächsten Schritt generiert wurden, nicht erneut escapet werden.
3. Ersetzen Sie alle<-Zeichen durch<.

Dies sollte dazu führen, dass der Inhalt wie beabsichtigt angezeigt wird. Das Ersetzen anderer HTML-Syntaxzeichen ist optional (wie> zu>," zu" und' zu'), schadet jedoch nicht.

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• CSS:white-space,word-break
• Zeichenreferenz
• Verwandtes Element:<code>,<samp>,<kbd>