HTML <pre>-Tag: Formatieren von vorformatiertem Text

Was ist das

-Tag in HTML?

Das <pre>-Tag in HTML ist ein spezielles Element, das dazu dient, vorformatierten Text anzuzeigen. Es behält Leerzeichen, Zeilenumbrüche und andere Leerzeichen genau so bei, wie sie im Quellcode angegeben sind.

Funktion des <pre>-Tags

Das <pre>-Tag wird verwendet, um:

• Text in einer nicht proportionalen Schriftart anzuzeigen
• Codeblöcke, Tabellen oder andere strukturierte Daten zu formatieren
• Inhalte aus externen Quellen wie Textdateien anzuzeigen

Im Gegensatz zu regulärem Text, der in Browsern automatisch umbrochen wird, bleibt Text innerhalb des <pre>-Tags immer in seiner ursprünglichen Form. Dies ist besonders nützlich für:

• Das Anzeigen von Code-Snippets
• Die Darstellung von Tabellen mit ASCII-Zeichen
• Das Kopieren und Einfügen von Text aus externen Quellen

Wofür wird das <pre>-Tag verwendet?

Das <pre>-Tag ist ein HTML-Element, mit dem du vorformatierten Text auf deiner Webseite anzeigen kannst. Es bewahrt die Leerzeichen, Zeilenumbrüche und anderen Formatierungen, die in deinem ursprünglichen Text vorhanden sind.

Verhindere das Umbrüche in Text

Verwende das <pre>-Tag, um Textzeilen in ihrem ursprünglichen Format anzuzeigen, auch wenn sie sehr lang sind. Dies ist nützlich für die Anzeige von Code-Blöcken, Adressdaten oder anderen Texten, bei denen die Formatierung entscheidend ist.

Kontrolle von Leerzeichen und Zeilenumbrüchen

Mit dem <pre>-Tag kannst du die exakte Platzierung von Leerzeichen und Zeilenumbrüchen in deinem Text steuern. Dies ist hilfreich für die Erstellung von tabellarischen Daten, Listen oder anderen Texten, bei denen die Ausrichtung von entscheidender Bedeutung ist.

Anzeige von Code-Blöcken

Das <pre>-Tag eignet sich hervorragend zum Anzeigen von Code-Blöcken auf Webseiten. Es bewahrt die Einrückungen, Zeilenumbrüche und anderen Syntaxelemente von Code, sodass dieser für Entwickler leicht lesbar ist.

Mehr Informationen findest du hier: HTML bearbeiten: Schritt-für-Schritt-Anleitung für Anfänger

Erstellen von Textfeldern

Wenn du ein Textfeld erstellst, in das Benutzer Text eingeben können, kannst du das <pre>-Tag verwenden, um sicherzustellen, dass der eingegebene Text im gleichen Format wie der ursprüngliche Text angezeigt wird.

Wie kann ich vorformatierten Text mit dem

-Tag erstellen?

Das

-Tag dient zur Anzeige von vorformatiertem Text, was bedeutet, dass Leerzeichen, Zeilenumbrüche und andere Formatierungszeichen beibehalten werden.
Verwendung des 
-Tags
Um vorformatierten Text zu erstellen, verwende die folgende Syntax:
<pre>
  Dein vorformatierter Text
</pre>

Hinweis: Um Zeilenvorschübe im Text zu erzwingen, verwende das <br>-Tag innerhalb des <pre>-Elements.
Attribute des 
-Tag
Das 
-Tag verfügt über ein einzelnes Attribut:

• wrap: Bestimmt, ob der Text umgebrochen werden soll oder nicht. Mögliche Werte sind:

  • off: Der Text wird nicht umgebrochen
  • hard: Der Text wird an Zeilenenden hard umgebrochen
  • soft: Der Text wird an weichen Zeilenumbrüchen umgebrochen (Standard)

Text innerhalb des

-Tags formatieren

Standardmäßig wird der Text innerhalb des <pre>-Tags unformatiert angezeigt. Du kannst jedoch benutzerdefinierte Stile anwenden, indem du CSS verwendest.

<style>
  pre {
    font-family: Arial;
    font-size: 16px;
    color: #333;
  }
</style>

<pre>
  Dein vorformatierter Text
</pre>

Code-Blöcke hervorheben

Das <pre>-Tag kann verwendet werden, um Code-Blöcke in deinen Inhalten hervorzuheben. Verwende für eine bessere Lesbarkeit Syntax-Hervorhebungs-Bibliotheken wie Prism.js.

<pre>
<code class="language-javascript">
  // Dein JavaScript-Code
</code
 </pre>

Was sind die Attribute des

-Tags?

Das

-Tag verfügt über mehrere Attribute, mit denen du die Darstellung des vorformatierten Textes anpassen kannst.
h3. wrap
Mit dem Attribut wrap kannst du festlegen, wie Zeilenumbrüche im Text behandelt werden sollen. Es unterstützt folgende Werte:

• hard: Zeilenumbrüche werden nicht gesetzt, selbst wenn der Text die Seitenbreite überschreitet.
• normal: Zeilenumbrüche werden automatisch gesetzt, um den Text an die Seitenbreite anzupassen.
• off: Zeilenumbrüche werden ignoriert, und der Text wird als eine einzige lange Zeile dargestellt.

Standardmäßig ist wrap auf "normal" gesetzt.

h3. width

Das Attribut width legt die Breite des Textbereichs in Pixel fest. Es wird verwendet, um die horizontale Ausrichtung des Textes zu steuern. Wenn der Text die angegebene Breite überschreitet, wird er umbrochen.

Erfahre mehr unter: HTML <table><td>: Erstellen und Verwenden von Tabellendatenzellen

h3. cols

Das Attribut cols legt die Anzahl der Zeichen an, die in einer Zeile des Textbereichs angezeigt werden sollen. Dies kann nützlich sein, um den Text in Spalten auszurichten oder um ihn an eine bestimmte Bildschirmgröße anzupassen.

h3. class

Mit dem Attribut class kannst du eine oder mehrere CSS-Klassen auf den vorformatierten Text anwenden. Auf diese Weise kannst du benutzerdefinierte Stile definieren und die Darstellung des Textes weiter anpassen.

Wie kann ich benutzerdefinierte Stile auf Text innerhalb des

-Tags anwenden?

Du kannst den

-Tag verwenden, um steuerelemente wie Schriftarten, Farben und Schriftgröße für den Text innerhalb des Tags anzuwenden. Befolge diese Schritte, um benutzerdefinierte Stile zu verwenden:
1. Definiere CSS-Regeln
Erstelle eine CSS-Datei oder einen <style>-Block in deinem HTML-Dokument und definiere die Regeln für das 
-Tag wie folgt:
pre {
    font-family: Arial, sans-serif;
    color: #333;
    font-size: 16px;
    background-color: #f2f2f2;
    padding: 10px;
}

In diesem Beispiel wird die Schriftart auf Arial oder eine andere Sans-Serif-Schriftart, die Textfarbe auf Schwarz, die Schriftgröße auf 16 Pixel, die Hintergrundfarbe auf ein helles Grau und der Abstand auf 10 Pixel festgelegt.
2. Verwende Inline-Stile
Zusätzlich zu CSS kannst du auch Inline-Stile verwenden, um Stile auf bestimmte Textteile innerhalb des 
-Tags anzuwenden. Verwende dazu HTML-Attribute wie style, font-family, color und font-size.
<pre>
<span style="font-family: Arial; color: red;">Hallo Welt!</span>
</pre>

In diesem Beispiel wird der Text "Hallo Welt!" in roter Arial-Schrift angezeigt.
3. Verwende Klassen oder IDs
Eine alternative Möglichkeit, benutzerdefinierte Stile anzuwenden, ist die Verwendung von Klassen oder IDs. Definiere im 
Weiterführende Informationen gibt es bei: CSS Padding: Der Abstand zwischen Elementen verstehen und beherrschen
-Bereich deines HTML-Dokuments eine CSS-Klasse oder -ID mit den gewünschten Stilen:
.pre-custom {
    font-family: Times New Roman, serif;
    color: #000;
    font-size: 18px;
}

Wende dann die Klasse oder ID auf das 
-Tag an:
<pre class="pre-custom">
Dein Text hier
</pre>

Wie kann ich Code-Blöcke mit dem 
-Tag hervorheben?
Eine gängige Verwendung des 
-Tags ist das Hervorheben von Code-Blöcken. Es bewahrt die Formatierung und Einrückung des in ihm enthaltenen Textes, wodurch er sich perfekt zur Anzeige von Code-Snippets oder Scripting-Beispielen eignet.
Schritt 1: Den 
-Tag verwenden
Beginne wie bei der Erstellung von vorformatiertem Text damit, das 
-Tag um deinen Code-Block zu setzen:
<pre>
/* Hier kommt dein Code */
</pre>

Schritt 2: CSS-Stile anwenden
Um eine bessere Lesbarkeit zu erreichen, kannst du CSS-Stile auf deinen Code anwenden. Eine Möglichkeit besteht darin, eine Klasse zum 
-Tag hinzuzufügen und diese Klasse dann zu stylen:
<pre class="code">
/* Hier kommt dein Code */
</pre>

.code {
  background-color: #efefef;
  padding: 10px;
  font-family: monospace;
}

Syntax-Hervorhebung mit Bibliotheken
Für eine weiter fortgeschrittene Syntax-Hervorhebung kannst du Code-Highlighting-Bibliotheken wie Prism.js oder Highlight.js verwenden. Diese Bibliotheken analysieren den Code und wenden basierend auf seiner Syntax entsprechende Stile an.
Vorteile der Hervorhebung von Code-Blöcken
Das Hervorheben von Code-Blöcken bietet folgende Vorteile:

• Verbesserte Lesbarkeit und Verständlichkeit des Codes
• Einfache Identifizierung von Code-Elementen wie Schlüsselwörtern, Variablen und Operatoren
• Unterstützung für die Bereitstellung von Code-Beispielen in Dokumentationen oder Online-Ressourcen
• Verbesserte Fehlerbehebung und Debugging, da der hervorgehobene Code leichter zu analysieren ist

Troubleshooting: Probleme bei der Verwendung des

-Tags

Der Text wird nicht richtig formatiert

• Ursache: Du hast das Tag nicht korrekt verwendet.
• Lösung: Stelle sicher, dass das

  -Tag korrekt geöffnet und geschlossen ist, und dass der vorformatierte Text innerhalb des Tags platziert ist.

Der Text wird in einer anderen Schriftart angezeigt

• Ursache: Du hast dem

  -Tag ein CSS-Stylesheet zugewiesen, das die Schriftart für den Text ändert.

• Lösung: Entferne das Stylesheet oder setze die Schriftart im Stylesheet zurück.

Der Text ist zu breit

• Ursache: Der Text hat eine lange Zeile, die die Breite des Browserfensters überschreitet.
• Lösung: Verwende das Attribut white-space: nowrap im

  -Tag, um Zeilenumbrüche zu verhindern.

Der Text ist nicht hervorgehoben

• Ursache: Du hast die Syntax-Hervorhebung nicht korrekt eingerichtet.
• Lösung: Verwende eine Code-Bibliothek oder ein Tool wie Prettify oder Prism, um den Code hervorzuheben.

Der Text enthält HTML-Tags

• Ursache: Du hast das Attribut escape nicht verwendet, um HTML-Tags zu maskieren.
• Lösung: Füge dem

  -Tag das Attribut escape hinzu, um HTML-Tags als normalen Text anzuzeigen.

Weitere mögliche Probleme

• Der Text wird auf mobilen Geräten abgeschnitten: Verwende das Attribut overflow: scroll im

  -Tag, um Scrollbalken hinzuzufügen.

• Der Text hat einen unformatierten Rand: Setze das Attribut padding im

  -Tag auf 0, um den Rand zu entfernen.

• Der Hintergrund des Textes ist transparent: Füge dem

  -Tag das Attribut background-color hinzu, um einen Hintergrund festzulegen.

Beispiele und Anwendungsfälle für das <pre>-Tag

Das <pre>-Tag erweist sich in verschiedenen Szenarien als nützlich:

Anzeigen von vorformatiertem Text

• Dokumente im Klartextformat: Das <pre>-Tag eignet sich hervorragend zum Anzeigen von Dokumenten im Klartextformat wie z. B. E-Mails, Befehlszeilenausgaben oder Programmiercode.
• Tabellendaten: Du kannst das <pre>-Tag verwenden, um Tabellendaten in einem vorformatierten Layout anzuzeigen. Dies kann nützlich sein, wenn du Daten in seinen Spalten ausrichten möchtest.

Hervorheben von Code

• Code-Blöcke: Das <pre>-Tag ist ideal zum Hervorheben von Code-Blöcken auf deiner Website. Dies erleichtert Lesern das Verstehen und Kopieren von Code-Snippets.
• Syntaxhervorhebung: Du kannst externe Bibliotheken wie [Prism] oder [Highlight.js] verwenden, um die Syntaxhervorhebung für verschiedene Programmiersprachen innerhalb des <pre>-Tags zu aktivieren.

Andere Anwendungsfälle

• Beispieldaten: Du kannst das <pre>-Tag verwenden, um Beispieldaten auf übersichtliche Weise anzuzeigen, z. B. JSON- oder XML-Daten.
• Debugger-Ausgabe: Wenn du Debug-Informationen auf deiner Website anzeigen möchtest, kann das <pre>-Tag verwendet werden, um diese Informationen in einem vorformatierten Layout anzuzeigen.

Best Practices für die Verwendung des

-Tags

Bei der Verwendung des

-Tags sind folgende Best Practices zu beachten:
Trenne Code-Blöcke von Text
Verwende das 
-Tag nur für Code-Blöcke. Text sollte nicht innerhalb eines 
-Tags formatiert werden, da dies zu Inkonsistenzen im Layout und bei der Zugänglichkeit führen kann.
Verwende Code-Hervorhebung für Lesbarkeit
Nutze Code-Hervorhebungstools oder CSS, um Code-Blöcke im 
-Tag hervorzuheben. Dies verbessert die Lesbarkeit und ermöglicht es Entwicklern, Code schneller zu verstehen.
Wähle eine geeignete Schriftart
Wähle eine Schriftart für Code-Blöcke, die leicht lesbar und mit der Größe des umgebenden Texts kompatibel ist. Beliebte Optionen sind Monospace-Schriftarten wie Courier New, Consolas oder Monaco.
Beachte die Barrierefreiheit
Stelle sicher, dass Code-Blöcke für Benutzer zugänglich sind, die Screenreader verwenden. Verwende semantische Elemente wie <code/> und <kbd/>, um den Inhalt des Blocks zu beschreiben.
Verwende das 
-Tag sparsam
Verwende das 
-Tag nur, wenn es unbedingt erforderlich ist, um Code-Blöcke zu formatieren. Eine Übernutzung des 
-Tags kann zu visueller Unordnung und Leseproblemen führen.
Sichere die Eingabe
Stelle sicher, dass die in 
-Tags angezeigten Inhalte sicher sind. Vermeide die direkte Ausgabe von Benutzereingaben, die zu Sicherheitslücken führen könnten.
Unterstütze gängige Browser
Teste deine Website in verschiedenen gängigen Browsern, um sicherzustellen, dass das 
-Tag wie erwartet gerendert wird. Vermeide browserspezifische CSS-Hacks, die die Kompatibilität einschränken könnten.

Verwandte Artikel

• HTML-Button-Href: So verlinken Sie Schaltflächen
• Verwendung des HTML-Elements "Marquee" für dynamische Texteffekte
• HTML-Multiline-Kommentare: Versteckte Anmerkungen im Code
• Text in HTML umwandeln: Eine Schritt-für-Schritt-Anleitung
• Konvertieren Sie Text in HTML: Ein praktischer Leitfaden
• Richtig ausrichten mit HTML: Ein Leitfaden zum Ausrichten von Elementen nach rechts
• HTML-Text zentrieren: Methoden für eine perfekt ausgerichtete Website
• HTML Minifier: Optimieren und Verkleinern von HTML-Code für bessere Performance
• HTML-Superscript: So erstellen Sie Hochstellungen in Ihrem Code
• Non-Breaking Space in HTML: Trennwörter und Leerzeichen formatieren
• Link rel preload: Erhöhen Sie die Ladegeschwindigkeit Ihrer Website
• Bilder in HTML einfügen: Eine Schritt-für-Schritt-Anleitung
• HTML-Code-Tag: Das grundlegende Element der Webentwicklung
• HTML -Tag: Hervorhebung mit Stil