Feb 2009

HTML-Tag pre • Vorvormatierter Text

HTML pre stellt vorformatierten Text dar. »Vorformatiert«, da der Text vom Browser exakt in der gleichen Weise dargestellt wird, wie er innerhalb des öffnenden und schließenden <pre>-Tags steht – inklusive Leerzeichen, Tabulatoren und Zeilenumbrüchen.

Zeilen und Spalten bleiben bestehen, ebenso extra Leerzeichen oder Weißraum.

Die häufigste Anwendung des <pre>-Tags liegt sicherlich in der Darstellung von Computercode auf Webseiten, aber auch für die Ausgabe von Tabellen mit kurzen einzeiligen Einträgen kann das pre-Tag u.U. eine effiziente Alternative zum table-Tag sein.

Browser stellen den Text in einer nicht proportionalen Schrift dar. Die folgenden Tags sollten nicht innerhalb des öffnenden und schließenden <pre>-Tags stehen: big, img, object, small, sub oder sup. Bilder und Objekte können also nicht innerhalb von pre-Tags eingesetzt werden.

CSS für automatischen Zeilenumbruch in pre-Tags

Zwar ist es schön, dass HTML pre Text exakt so anzeigt, wie der Text im pre-Tag gesetzt ist, aber auf der anderen Seite gibt es keinen automatischen Zeilenumbruch, wenn der Text länger als der Platz im Layout ist.

Erst durch die Kombination von CSS white-space und word-wrap gibt es dann auch innerhalb von pre-Tags einen automatischen Zeilenumbruch.

white-space: -moz-pre-wrap !important;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;

Einfache Tabelle mit dem pre-Tag

<pre>
Wellenlänge    +0 nm       +1 nm       +2 nm       +3 nm
----------------------------------------------------------------
    380 nm    0.0002000   0.0002280   0.0002610   0.0002990
    385 nm    0.0003960   0.0004550   0.0005250   0.0006040
    390 nm    0.0008000   0.0009160   0.0010500   0.0012000
</pre>

Wellenlänge    +0 nm       +1 nm       +2 nm       +3 nm
---------------------------------------------------------------
    380 nm    0.0002000   0.0002280   0.0002610   0.0002990
    385 nm    0.0003960   0.0004550   0.0005250   0.0006040
    390 nm    0.0008000   0.0009160   0.0010500   0.0012000

Alternativen für HTML pre

Das pre-Tag ist ein Block-Tag – d.h. mit dem öffnenden <pre> beginnt in eine neue Zeile.

Das code-Tag hingegen ist ein Inline-Tag, das nicht zu einem Zeilenumbruch führt. Es wird benutzt, wenn ein Begriff oder kurzer Text innerhalb des Fließtextes als Computertext hervorgehoben werden soll.

HTML-Tag pre: Attribute und Events

class, dir, id, lang, style, title