Einführung

Das HTML-Element <pre> steht für „preformatierter Text“. Alles, was in diesem Element steht, wird vom Browser genau so dargestellt, wie es im Quelltext geschrieben ist: Leerzeichen, Tabs und Zeilenumbrüche bleiben erhalten. Dadurch eignet sich <pre> besonders gut für Code-Beispiele, Log-Ausgaben oder andere Inhalte, bei denen die exakte Formatierung wichtig ist.

Was macht <pre> genau?

Normalerweise fasst ein Browser mehrere Leerzeichen zu einem zusammen und bricht Text automatisch um. Innerhalb von <pre> gilt das nicht: Der Text wird im sogenannten „preformatted“-Modus dargestellt. Typischerweise wird dabei eine Monospace-Schrift verwendet, also eine Schriftart, bei der alle Zeichen gleich breit sind. Das erleichtert das Lesen von Code und tabellarisch angeordnetem Text.

<pre> und <code> zusammen verwenden

Häufig wird <pre> mit <code> kombiniert, um sowohl die Formatierung als auch die Semantik abzudecken:

<pre><code>
function hallo() {
    console.log('Hallo Welt');
}
</code></pre>

In diesem Beispiel sorgt <pre> dafür, dass Zeilenumbrüche und Einrückungen erhalten bleiben, während <code> dem Inhalt die Bedeutung „Quellcode“ gibt. Das ist hilfreich für Suchmaschinen, Screenreader und Tools zur Syntaxhervorhebung.

Typische Einsatzszenarien

• Code-Beispiele: HTML-, CSS-, JavaScript- oder PHP-Snippets.
• Log-Ausgaben: Server- oder Anwendungslogs mit festen Spalten.
• ASCII-Grafiken: Textbasierte Diagramme oder Tabellen.
• Vorformatierte Texte: Alles, was exakt so aussehen soll wie im Editor.

HTML im <pre>-Block sicher darstellen

Wenn du HTML-Code in einem <pre>-Block anzeigen möchtest, musst du die spitzen Klammern escapen, damit der Browser sie nicht als echtes HTML interpretiert:

<pre>
<h1>Überschrift</h1>
<p>Dies ist ein Absatz.</p>
</pre>

So wird der Code als Text angezeigt, statt als echte Überschrift und Absatz gerendert zu werden.

Schritt-für-Schritt: Einen <pre>-Block sinnvoll einsetzen

1. Inhalt auswählen

Überlege zuerst, welcher Text wirklich eine feste Formatierung benötigt – zum Beispiel ein Code-Beispiel oder eine Log-Ausgabe. Normale Fließtexte gehören nicht in <pre>.

2. Text vorbereiten

Formatiere den Text in deinem Editor so, wie er später aussehen soll: mit Einrückungen, Zeilenumbrüchen und eventuell ausgerichteten Spalten. Genau diese Struktur wird im Browser übernommen.

3. In <pre> einbetten

Umgib den vorbereiteten Text mit einem <pre>-Element. Wenn es sich um Code handelt, kannst du zusätzlich ein <code>-Element verwenden:

<pre><code>
if (x > 10) {
    console.log('Größer als 10');
}
</code></pre>

4. HTML-Zeichen escapen

Enthält dein Beispiel selbst HTML-Tags, ersetze < durch < und > durch >. So stellst du sicher, dass der Browser den Inhalt nicht als echtes Markup interpretiert.

5. In Joomla einfügen

In Joomla solltest du den Code im Editor möglichst im Quelltext- oder „kein Editor“-Modus einfügen, damit nichts automatisch umformatiert wird. Speichere den Artikel und prüfe im Frontend, ob der <pre>-Block so aussieht wie gewünscht.

Fazit

Das <pre>-Element ist ein einfaches, aber sehr mächtiges Werkzeug, wenn es um die Darstellung von vorformatiertem Text geht. In Kombination mit <code> eignet es sich ideal für technische Artikel, Dokumentationen und Tutorials – auch in Joomla-Artikeln, ganz ohne zusätzliche CSS-Anpassungen.