<pre>: Das Element für vorformatierten Text

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 keine visuelle Auswirkung; um einen solchen Effekt zu erzielen, verwenden Sie stattdessen CSS width.

wrap Nicht standardisiert Veraltet

Ist ein Hinweis, wie der Überlauf geschehen muss. In modernen Browsern wird dieser Hinweis ignoriert und hat keine visuelle Wirkung; um einen solchen Effekt zu erzielen, verwenden Sie stattdessen CSS white-space.

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 mithilfe von unterstützender Technologie wie einem Screenreader surfen, können möglicherweise nicht verstehen, was die vorformatierten Textzeichen darstellen, wenn sie in der Reihenfolge vorgelesen werden.

Eine Kombination aus den <figure> und <figcaption> Elementen, ergänzt durch die ARIA role und aria-label Attribute auf dem pre-Element, ermöglicht es, dass die vorformatierte ASCII-Kunst als Bild mit alternativem Text angekündigt wird, 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 Understanding WCAG, Richtlinie 1.1 Erklärungen
• H86: Bereitstellung von Textalternativen für ASCII-Kunst, 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 Zeichen der Tags als Text anzuzeigen, müssen Sie das <-Zeichen mithilfe seiner Zeichenreferenz maskieren, sodass die Zeichenfolgen 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 & ist es nicht. Es ist jedoch eine gute Praxis, alle mehrdeutigen Zeichen zu maskieren, um Verwirrung zu vermeiden, insbesondere wenn Sie HTML programmgesteuert generieren und den <pre>-Inhalt einfügen. In diesem Fall ist hier eine gute Faustregel zur Maskierung von Zeichen:

1. Schreiben Sie zuerst den Inhalt aus, wie er im HTML-Dokument erscheinen soll.
2. Ersetzen Sie alle kaufmännischen Und-Zeichen (&) durch &. Machen Sie diesen Schritt zuerst, damit neu erzeugte &-Zeichen im nächsten Schritt nicht maskiert 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 > in >, " in " und ' in '), schadet aber 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

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