Videos eBook Forum Kontakt

jetzt Videos kaufen
zum Lernen von HTML,
CSS und Webdesign

Jetzt das HTML-Seminar bestellen als
Video-Tutorial mit über 210 Videos:
von den Grundlagen bis zur fertigen Website
Video-Kurs HTML5, CSS & Webdesign

Video-Kurs bestellen HTML5, CSS & Webdesign
Video-Kurs bestellen HTML5, CSS & Webdesign

HTML-Befehl <pre> - vorformatierter Text

Dieser HTML-Befehl hat die Eigenschaft, dass die Ausgabe des umschlossenen Textes immer vorformatiert ausgegeben wird.

Das Bedeutet für die Ausgabe durch <pre>

  • Leerzeichen (whitespaces) werden alle ausgegeben
  • Zeilenumbrüche werden ausgegeben
  • Tabs werden wiedergegeben
  • Dicktengleiche Schriftart (alle Zeichen haben die gleiche Breite) wird verwendet

Im Vergleich zum HTML-Befehl <p> aus dem letzten Kapitel macht das ein riesigen Unterschied. Browser fassen bei der Ausgabe mehrere Leerzeichen zusammen zu einem Leerzeichen und zeigen keine Textumbrüche an (sofern nicht ein entsprechender HTML-Befehl für Umbrüche verwendet wurde).

Beispiel für <pre>

Wenn wir folgende 3 Textzeile uns ansehen, kommen dort Leerzeichen mitten im Text, eine Einrückung und Zeilenumbrüche vor:

Hier kommen 3 Leerzeichen     mitten im Satz vor!
    Eine Einrückung vor diesem Satz und ein Um
bruch (orthografisch nicht korrekt)

Ausgabe über <p>

Die Ausgabe bei Verwendung von <p> würden mehrere hintereinander folgende Leerzeichen zu einem zusammengefasst, Umbruche würde aufgehoben und alles kommt am Stück:

Hier kommen 3 Leerzeichen mitten im Satz vor! Eine Einrückung vor diesem Satz und ein Umbruch (orthografisch nicht korrekt)

Der entsprechende HTML-Code dazu:

<p>Hier kommen 3 Leerzeichen     mitten im Satz vor!
    Eine Einrückung vor diesem Satz und ein Um
bruch (orthografisch nicht korrekt)</p>

Das ist das übliche Verhalten von den meisten HTML-Befehlen und ist auch praktisch und geschickt. Will man das allerdings nicht, dann benötigt man als HTML-Befehl <p>.

Ausgabe über <pre>

Bei Verwendung von <pre> erfolgt die Ausgabe wie der Text vorliegt mit allen Umbrüchen und Leerzeichen:

<pre>Hier kommen 3 Leerzeichen     mitten im Satz vor!
    Eine Einrückung vor diesem Satz und ein Um
bruch (orthografisch nicht korrekt)</pre>

Und als Ausgabe:

Hier kommen 3 Leerzeichen     mitten im Satz vor!
    Eine Einrückung vor diesem Satz und ein Um
bruch (orthografisch nicht korrekt)

Fallstricke bei <pre>

Hierbei ist wichtig, dass bei sehr langen Textzeilen diese auch nicht umgebrochen werden und man dann im Browserfenster nach rechts scrollen muss!

Bitte unbedingt einmal probieren!

Anwendungsfeld von <pre>

Für was benötigt man solche Ausgabearten? Diese Ausgaben bieten sich beim Anzeigen von Computercode wie HTML, CSS, JavaScript oder z.B. der Programmiersprache Python an. Bei der Quellcode von Python sind die entsprechenden Leerzeichen sogar zwingend notwendig, sonst würde das Programm nicht laufen.

Hier ein Beispiel aus https://www.python-lernen.de/while-schleife.htm (eine Schwesterseite vom HTML-Seminar (wenn man Python lernen mag):

durchgang = 0
while durchgang < 11:
    print(durchgang)
    durchgang = durchgang + 1
print("nach der Schleife")

Würde die dritte Zeile ohne die entsprechenden Leerzeichen im Editor eingegeben, käme es zu einem Fehler und das Programm würde abbrechen.

Analysiert man auf der Seite https://www.python-lernen.de/ den HTML-Code, findet man folgenden Aufbau:

<pre>
    <code>
        durchgang = 0
        …
    </code>
</pre>

Wer sich über die Schachtelung von <code> innerhalb von <pre> wundert: <pre> hat keinen Charakter außer dass die Ausgabe preformatiert ausgegeben wird. Dagegen hat <code> den Charakter, dass es sich bei der Ausgabe laut Definition um ein Computecode handelt

Tipp am Rande

Mit <pre> kann man Daten ausgeben, damit alles sauber untereinander kommt. Oft würde man dafür sonst eine aufwendigere Tabelle (die entsprechenden HTML-Befehle für Tabellen kommen in einem späteren Kapitel) verwenden. Das klappt man <pre> auch und ist manchen Fall der schneller Weg.

Beispiel:

Messwerte Stadion 19u3       2.9342
Messwerte Stadion 4a2       15.23
Messwerte Stadion 3n323      0.343
weitere eigene Projekte: