<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 unterstützt nur die globalen Attribute.

width

Gibt die bevorzugte Anzahl von Zeichen pro Zeile an. Obwohl dieses Attribut technisch noch implementiert ist, hat es keine visuelle Wirkung. Verwenden Sie stattdessen die CSS-Eigenschaft width, um eine solche Wirkung zu erzielen.

wrap

Gibt einen Hinweis darauf, wie überlaufender Inhalt behandelt werden soll. Moderne Browser ignorieren diesen Hinweis, sodass das Attribut keine visuelle Wirkung hat. Verwenden Sie stattdessen die CSS-Eigenschaft white-space, um eine solche Wirkung zu erzielen.

Barrierefreiheit

Für Bilder oder Diagramme, die mit vorformatiertem Text erstellt wurden, ist eine alternative Beschreibung wichtig. Sie sollte den Inhalt des Bildes oder Diagramms klar und knapp beschreiben.

Menschen mit eingeschränktem Sehvermögen, die Hilfstechnologien wie Screenreader verwenden, verstehen möglicherweise nicht, was die Zeichen des vorformatierten Textes darstellen, wenn diese nacheinander vorgelesen werden.

Mit einer Kombination aus den Elementen <figure> und <figcaption> sowie dem ARIA-Attribut role und dem Attribut aria-label auf dem pre-Element kann vorformatierte ASCII-Kunst als Bild mit Alternativtext angekündigt werden. Das figcaption-Element dient dabei als Bildunterschrift.

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: Erläuterungen zu WCAG-Richtlinie 1.1
• H86: Textalternativen für ASCII-Kunst, Emoticons und Leetspeak bereitstellen | W3C-Techniken für WCAG 2.0

Beispiele

Einfaches Beispiel

HTML

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

Ergebnis

Mehrdeutige Zeichen maskieren

Angenommen, Sie möchten HTML-Code in einem <pre>-Element zeigen. Zeichenfolgen, die gültige HTML-Tags bilden (beginnend mit < und endend mit >), werden nicht als Text angezeigt. Damit die Tag-Zeichen als Text erscheinen, müssen Sie (mindestens) das Zeichen < mit seiner Zeichenreferenz maskieren. Dadurch bilden die Zeichenfolgen keine gültigen Tags mehr.

Tatsächlich behandelt der HTML-Parser die meisten Zeichen als reinen Text, sofern sie nicht in einem bestimmten Kontext stehen. Beispielsweise ist < code unproblematisch, während <code als Tag geparst würde; &am; ist unproblematisch, & dagegen nicht. Dennoch empfiehlt es sich, alle mehrdeutigen Zeichen zu maskieren, um Missverständnisse zu vermeiden – insbesondere wenn Sie HTML programmatisch erzeugen und Inhalt in das <pre>-Element einfügen. Als Faustregel für das Maskieren gilt:

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

Danach sollte der Inhalt wie beabsichtigt angezeigt werden. Andere HTML-Syntaxzeichen zu ersetzen, ist optional (etwa > durch >, " durch " und ' durch '), 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

Technische Übersicht

Spezifikationen

Browser-Kompatibilität

Siehe auch

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