<pre>: Das vorformatierte Textelement

Dieses Element enthält nur die globalen Attribute.

width Veraltet Nicht standardisiert

Enthält die bevorzugte Anzahl von Zeichen, die eine Zeile haben soll. 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

Gibt einen Hinweis, wie der Überlauf gehandhabt werden soll. In modernen Browsern wird dieser Hinweis ignoriert und hat keine visuelle Wirkung. 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 Diagramms klar und prägnant beschreiben.

Menschen mit Sehbehinderungen, die unterstützende Technologien wie einen Screenreader verwenden, können möglicherweise nicht verstehen, was die Zeichen im vorformatierten Text darstellen, wenn diese nacheinander vorgelesen werden.

Eine Kombination aus den <figure>- und <figcaption>-Elementen, ergänzt durch die ARIA-role und aria-label-Attribute am pre-Element, ermöglicht es, dass die vorformatierte ASCII-Grafik als Bild mit Alternativtext angekündigt wird, wobei das 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 Verstehen von WCAG, Leitlinie 1.1 Erklärungen
• H86: Bereitstellung von Textalternativen für ASCII-Grafiken, 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 darstellen. Die Zeichenfolgen, die gültige HTML-Tags definieren (beginnend mit < und endend mit >), werden nicht angezeigt. Um die Tag-Zeichen als Text darzustellen, müssen Sie das <-Zeichen (zumindest) mithilfe seiner Zeichenreferenz maskieren, sodass die Zeichenfolgen keine gültigen Tags mehr definieren.

In Wirklichkeit behandelt der HTML-Parser die meisten Zeichen als Klartext, es sei denn, sie befinden sich in spezifischen Kontexten. Zum Beispiel ist < code in Ordnung, aber <code würde falsch geparst; &am; ist in Ordnung, aber & nicht. Dennoch ist es eine gute Praxis, alle mehrdeutigen Zeichen zu maskieren, um jegliche Verwirrung zu vermeiden, insbesondere wenn Sie HTML programmgesteuert generieren und den Inhalt des <pre>-Elements einfügen. In diesem Fall ist hier eine Faustregel, wie Zeichen maskiert werden sollen:

1. Schreiben Sie zunächst den Inhalt so, wie er im HTML-Dokument erscheinen soll.
2. Ersetzen Sie alle Kaufmännischen Und-Zeichen (&) durch &. Machen Sie diesen Schritt zuerst, damit neue &-Zeichen, die im nächsten Schritt generiert werden, nicht maskiert werden.
3. Ersetzen Sie alle <-Zeichen durch <.

Dies sollte dazu führen, dass der Inhalt wie beabsichtigt dargestellt wird. Das Ersetzen anderer HTML-Syntaxzeichen ist optional (wie > durch >, " durch " und ' durch '), wird jedoch 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>