Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.cdn.mozilla.net/de/docs/Web/HTML/Reference/Elements/pre below:

<pre>: Das Element für vorformatierten Text - HTML

Baseline Widely available

Das <pre>-HTML-Element steht für vorformatierten Text, der genau so dargestellt werden soll, wie er im HTML-Dokument geschrieben ist. Der Text wird normalerweise in einer nicht-proportionalen oder monospaced Schriftart dargestellt.

Leerzeichen innerhalb dieses Elements werden wie geschrieben angezeigt, mit einer Ausnahme. Wenn sofort nach dem öffnenden <pre>-Tag ein oder mehrere führende Zeilenumbruchzeichen enthalten sind, wird das erste Zeilenumbruchzeichen entfernt.

Der Textinhalt von <pre>-Elementen wird als HTML geparst. Wenn Sie möchten, dass Ihr Textinhalt als Klartext bleibt, müssen einige Syntaxzeichen, wie <, unter Verwendung ihrer entsprechenden Zeichenreferenzen maskiert werden. Weitere Informationen finden Sie unter Zweideutige Zeichen maskieren.

<pre>-Elemente enthalten häufig <code>, <samp> und <kbd> Elemente, um Computer-Code, Computerausgabe und Benutzereingaben darzustellen.

Standardmäßig ist <pre> ein Block-Element, d.h. sein Standardwert für display ist block.

<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;
}

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

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

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.

<pre><code>
let i = 5;

if (i &lt; 10 &amp;&amp; i &gt; 0)
  return &quot;Single Digit Number&quot;
</code></pre>

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4