<pre>: Das vorformatierte Textelement

Dieses Element umfasst nur die globalen Attribute.

width Veraltet Nicht standardisiert

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

wrap Nicht standardisiert Veraltet

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

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 des Diagramms klar und präzise beschreiben.

Menschen mit Sehbehinderung und solche, die mit Hilfstechnologien wie Bildschirmlesegeräten surfen, könnten nicht verstehen, was die vorformatierten Textzeichen darstellen, wenn sie in der Reihenfolge vorgelesen werden.

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

<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>

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

HTML

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

Ergebnis

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 das <-Zeichen mit seiner Zeichenreferenz escapen, sodass die Sequenzen keine gültigen Tags mehr definieren.

Tatsächlich behandelt der HTML-Parser die meisten Zeichen als reinen Text, es sei denn, sie befinden sich in spezifischen Kontexten. Zum Beispiel ist < code in Ordnung, aber <code würde falsch geparst werden; &am; ist in Ordnung, aber & nicht. Es ist jedoch eine gute Praxis, alle missverständlichen Zeichen zu escapen, um Verwirrung zu vermeiden, insbesondere wenn Sie HTML programmatisch generieren und den <pre>-Inhalt einfügen. Hier ist eine gute Faustregel, wie man Zeichen escapet:

1. Schreiben Sie zunächst den Inhalt so, wie er im HTML-Dokument erscheinen soll.
2. Ersetzen Sie alle Kaufmannsundzeichen (&) durch &. Machen Sie diesen Schritt zuerst, damit neu generierte &-Zeichen im nächsten Schritt nicht erneut escapt 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 '), wird aber keinen Schaden anrichten.

HTML

<pre><code>
let i = 5;

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

Ergebnis

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