HTML `<pre>`-Tag

Das <pre>-Tag wird verwendet, um vorformatierten Text in ein HTML-Dokument einzufügen. Die Leerzeichen und Zeilenumbrüche im Text werden beibehalten. Das <pre>-Tag wird normalerweise zur Anzeige von Code oder Text (z. B. einem Gedicht) verwendet, bei dem der Autor die Position der Zeilen zueinander selbst festlegt. Text in einem <pre>-Element wird in einer Festbreitenschrift (Monospace) angezeigt.

Der Tag-Inhalt wird im Browser in einer Monospace-Schriftart angezeigt.

Inline-Elemente werden typischerweise innerhalb des <pre>-Tags platziert. Obwohl Block-Elemente in HTML5 erlaubt sind, können sie unerwartete Leerzeichen oder Einrückungen verursachen, daher werden Inline-Elemente im Allgemeinen bevorzugt.

TIP

Das <pre>-Tag kann verwendet werden, um Text mit ungewöhnlicher Formatierung oder bestimmte Arten von Computercode anzuzeigen.

Syntax

Das <pre>-Tag kommt in Paaren vor. Der Inhalt wird zwischen dem öffnenden (<pre>) und dem schließenden (</pre>) Tag geschrieben.

Beispiel für das HTML `<pre>`-Tag:

Beispiel für das HTML <pre>-Tag|W3Docs

html

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
  </head>
  <body>
    <pre>Spaces
               and line breaks
               within this element 
        are shown as typed.           
    </pre>
  </body>
</html>

Try it Yourself »

Ergebnis

Beispiel für das pre-Tag

TIP

Um Code in ein HTML-Dokument einzufügen, verwenden Sie das <code>-Tag, das in das <pre>-Element eingebettet ist. In diesem Fall verstehen Suchmaschinen und Screenreader sofort, dass es sich um Programmcode handelt.

Beispiel für das HTML `<pre>`-Tag mit dem `<code>`-Element:

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <pre>
      <code>
        body {
          color:orange;
        }
      </code>
    </pre>
  </body>
</html>

Try it Yourself »

Attribute

Attribut	Wert	Beschreibung
width	number	Veraltet. Verwenden Sie stattdessen CSS `max-width` oder `overflow`.

Das <pre>-Tag unterstützt die Globalen Attribute und die Ereignisattribute.

So stylen Sie ein HTML <pre>-Tag

css

pre {
  background-color: #f4f4f4;
  padding: 10px;
  overflow-x: auto;
}

Praxis

Welche Merkmale sind durch das 'pre'-Tag in HTML gekennzeichnet?

Das 'pre'-Tag wird verwendet, um vorformatierten Text zu definieren.Das 'pre'-Tag bewahrt weder Leerzeichen noch Zeilenumbrüche.Text in einem 'pre'-Tag wird in einer Festbreitenschrift angezeigt.Das 'pre'-Tag sollte verwendet werden, wenn eine genaue Textformatierung erforderlich ist.Das 'pre'-Tag entfernt zusätzliche Leerzeichen und neue Zeilen.

HTML <pre>-Tag ​

Syntax ​

Beispiel für das HTML <pre>-Tag: ​

Ergebnis ​

Beispiel für das HTML <pre>-Tag mit dem <code>-Element: ​

Attribute ​