Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt
Sie befinden sich: Startseite » HTML lernen – Website erstellen & strukturieren » vorformatierter Text <pre>

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 einen 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 Textzeilen 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, Umbrüche 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 <pre>.

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>

Wofür 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 dem 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 einen Computercode 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, wenn man <pre> verwendet auch und ist manchmal der schnellere Weg.

Beispiel:

Messwerte Stadion 19u3       2.9342
Messwerte Stadion 4a2       15.23
Messwerte Stadion 3n323      0.343

Weiterempfehlen • Social Bookmarks • Vielen Dank

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Vielen Dank für Ihre Hilfe

    E-Books zum Kurs

    von HTML-Seminar.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details