<pre>: Das Preformatierte Text-Element

Dieses Element enthält 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 keinen visuellen Effekt; um einen solchen Effekt zu erzielen, verwenden Sie stattdessen CSS width.

wrap Nicht standardisiert Veraltet

Ist ein Hinweis darauf, wie der Überlauf geschehen muss. In modernen Browsern wird dieser Hinweis ignoriert und es ergibt sich kein visueller Effekt; um einen solchen Effekt 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 Diagramms klar und prägnant beschreiben.

Menschen mit Sehbehinderungen, die mit Hilfe von unterstützenden Technologien wie einem Screenreader surfen, können möglicherweise nicht verstehen, was die vorformatierten Textzeichen darstellen, wenn sie nacheinander vorgelesen werden.

Eine Kombination der <figure>- und <figcaption>-Elemente, ergänzt durch die ARIA role- und aria-label-Attribute am pre-Element, ermöglicht es, dass die vorformatierte ASCII-Kunst als Bild mit alternativem Text angekündigt wird, wobei 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: Bereitstellung von Textalternativen für ASCII-Art, Emoticons und Leetspeak | 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 Klartext, es sei denn, sie befinden sich in bestimmten 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 ambigen 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 escapen sollte:

1. Schreiben Sie zunächst den Inhalt so, wie er im HTML-Dokument erscheinen soll.
2. Ersetzen Sie alle kaufmännischen Und-Zeichen (&) durch &. Führen Sie diesen Schritt zuerst aus, damit neue &-Zeichen, die im nächsten Schritt generiert werden, nicht escaped 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
• Verwandte Elemente: <code>, <samp>, <kbd>