<pre> HTML-Element für vorformatierten Text

Probieren Sie es aus

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

• 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

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 &amp; 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 &amp;. 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 &lt;.

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 &gt;, " durch &quot; und ' durch &apos;), wird aber keinen Schaden anrichten.

HTML

Ergebnis

Technische Zusammenfassung

Inhaltskategorien Erlaubter Inhalt Tag-Auslassung Erlaubte Eltern Implizite ARIA-Rolle Erlaubte ARIA-Rollen DOM-Schnittstelle

Flussinhalte, spürbare Inhalte.

Satzinhalt.

Keine, sowohl der Start- als auch der End-Tag sind obligatorisch.

Jedes Element, das Flussinhalte akzeptiert.

generisch

Beliebig

[`HTMLPreElement`](/de/docs/Web/API/HTMLPreElement)

Spezifikationen

Spezifikation

HTML # the-pre-element

Browser-Kompatibilität

JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.

Siehe auch

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