HTML/Textstrukturierung/pre

Das Element pre repräsentiert einen vorformatierten (engl.: preformatted) Textblock, in dem die Strukturen durch typographische Konventionen und nicht durch seinen Inhalt oder semantische Elemente gekennzeichnet ist.

• 
• 
• 
• 
• 
• 
• 
• 

Beispielsweise ist es für Programmlistings wichtig, dass sie in dicktengleicher Schrift dargestellt werden, und dass Whitespace wie Zeilenumbrüche und Einrückungen durch mehrere Leerzeichen oder Tabs so wiedergegeben werden, wie sie beim Editieren eingegeben wurden.

Allgemeines

Präformatierter Text eignet sich in vielen Fällen zur Ausgabe von Debug-Meldungen beim Entwickeln mit serverseitigen Programmiersprachen wie PHP.

Beispiel ansehen …

<h1>„Hallo, Welt!“ in PHP</h1> <pre> <code class="language-php"> <?php echo "Hallo, Welt\n"; ?> </code> </pre>

<pre> leitet einen Textabschnitt mit präformatiertem Text ein. </pre> beendet den Abschnitt. Alles, was dazwischen steht, wird so angezeigt, wie es eingegeben wurde. Das gilt insbesondere für Leerzeichen.

ansehen …

pre-Elemente werden häufig eingesetzt, um Quelltext darzustellen. In diesem Fall ist es semantisch korrekt, den Inhalt mit einem code-Element zu umfassen:<pre><code>...</code></pre>

Gestaltung

Browser wenden in der Regel ein Standardformat auf das pre-Element an, insbesondere wird eine monospace-Schriftart verwendet. Verwenden Sie CSS, um vorformatierte Textblöcke nach Ihren Vorstellungen zu formatieren.

Beispiel ansehen …

pre {
  background-color: darkblue; 
  color: yellow; 
  font-family: Fixedsys,Courier,monospace; 
  padding: 10px;
}

Das pre-Element im Beispiel erhält einen blauen Hintergrund, gelbe Schriftfarbe, und als Schriftart wird "Fixedsys" gewünscht, oder, falls nicht verfügbar, eine Courier-Schrift. Damit der Text nicht so am Rand klebt, wird außerdem ein Innenabstand von 10 Pixeln definiert.

ansehen …

ASCII-Art

Mit dem pre-Element ist es auch möglich ASCII-Art in seinen richtigen Proportionen darzustellen:

Beispiel ansehen …

<pre>
   .
   |
   |   
   |
   #         +------------------------------+
  (=)        |           ACHTUNG!           |
   H         |      PRÄFORMATIERTER TEXT!   |            =o=
   H         |                           __;                 ~^
   H         +------------TT-----------°            _               _ _  
   H                      ||    ________________   | |             | (_)   
   H                      ||    | SELF-Treffen >   | |__   ___ _ __| |_ _ __ 
   M       oÖo            ||    |°°°°°°°°°°°°°°°   | '_ \ / _ \ '__| | | '_ \ 
   M        |  ö          ||    |                  | |_) |  __/ |  | | | | | |  
  / \~"""~"""~"""~"""~"""~"""~"""~~"""~"""~"""~""""|_.__/ \___|_|  |_|_|_| |_|
</pre>

Das pre-Element enthält ein Bild, dass aus einzelnen Zeichen „gemalt“ wurde. Hierbei sind die einzelnen Positionen innerhalb des Rasters aus Zeilen und Spalten wichtig.

ansehen …

Siehe auch

• Referenz: pre
• CSS/Eigenschaften/Textausrichtung/white-space

Weblinks

• W3C: the pre element
• mediatemple: Considerations for styling the < pre > tag vom 26.05.2015