<pre> HTML-Element für vorformatierten Text

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 umfasst nur die globalen Attribute.

width

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

wrap

Ist ein Hinweis, wie der Überlauf stattfinden muss. In modernen Browsern wird dieser Hinweis ignoriert und führt zu keiner visuellen Wirkung; verwenden Sie stattdessen CSS white-space, um eine solche Wirkung zu erzielen.

Barrierefreiheit

Es ist wichtig, eine alternative Beschreibung für alle Bilder oder Diagramme zu bieten, die mit vorformatiertem Text erstellt wurden. Die alternative Beschreibung sollte den Inhalt des Bildes oder Diagramms klar und präzise beschreiben.

Personen mit Sehbeeinträchtigungen, die mit Unterstützungstechnologien wie einem Screenreader surfen, können möglicherweise nicht verstehen, was die Zeichen des vorformatierten Textes darstellen, wenn sie der Reihe nach vorgelesen werden.

Eine Kombination aus <figure> und <figcaption> Elementen, ergänzt durch die ARIA role- und aria-label-Attribute auf dem pre-Element, ermöglicht es der vorformatierten ASCII-Kunst, als Bild mit alternativem Text angekündigt zu werden, wobei figcaption 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 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 der WCAG, Erklärung zu Richtlinie 1.1
• H86: Bereitstellung von Textalternativen für ASCII-Kunst, Emoticons und Leetspeak | W3C-Techniken für WCAG 2.0

Beispiele

Grundlegendes Beispiel

HTML

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

Ergebnis

Maskierung von mehrdeutigen Zeichen

Angenommen, Sie möchten HTML-Code in einem <pre>-Element demonstrieren. Die Zeichensequenzen, 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 mithilfe seiner Zeichenreferenz maskieren, sodass die Sequenzen keine gültigen Tags mehr definieren.

In der Realität 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 mehrdeutigen Zeichen zu maskieren, um Verwirrung zu vermeiden, insbesondere wenn Sie HTML programmatisch generieren und den <pre>-Inhalt einfügen. Hier ist eine gute Faustregel, wie man Zeichen maskiert:

1. Schreiben Sie zuerst den Inhalt, wie er im HTML-Dokument erscheinen soll.
2. Ersetzen Sie alle Kaufmannsund-Zeichen (&) durch &. Führen Sie diesen Schritt zuerst aus, damit neue &-Zeichen, die im nächsten Schritt erzeugt werden, nicht maskiert werden.
3. Ersetzen Sie alle <-Zeichen durch <.

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

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• CSS: white-space, word-break
• Zeichenreferenz
• Verwandte Elemente: <code>, <samp>, <kbd>