HTML Pre und Code Tag – bester Nutzen

(Last Updated On: 19. August 2015)

Mein Post über die Einrückung von Code-Blöcken in Content Mangaement Systemen hat mich nun dazu verleitet, einen kleinen Artikel über das Setzen der <code>- und <pre>-tags üfr das Darstellen von Code zu schreiben.

Das code-TAg wird in HTML-Dokumenten oft mit dem pre-Tag kombiniert, da das pre-Tag es ermöglicht, dass Tabstopps in einem Textdokument 1:1 im HTML-Dokument übernommen werden. Somit ist es möglich, den angezeiten Code ohne irgendwelche CSS-Formatierungen einzurücken – man kann den Quellcode direkt vom Texteditor, in welchem der code geschrieben wurde, in das HTML dokument kopieren und der code wird mit den Original-einrückungen richtig angezeigt. In einem pre-Tag werden also alle Doppellerzeicehn, Tabs, Leerzeilen und andere whitespaces 1:1 dargestellt.

Das <code>-Tag wiederum kennzeichnet den Inhalt als Auflistung eines Quellcodes. Das ist wichtig für a) die Barrierefreiheit der Website, so dass die Screenreader den Besucher darauf hinweisen kann, dass jetzt die Auflistung eines quellcodes kommt, und andererseits ist das Tag wichtig für suchmaschinen, welche das setzen von Quellcode innerhalb eines code-Tags positiv bei der Suchmaschinenplatzierung belohnen.

Sie kennen es wahrscheinlich von Ihren Texteditoren oder IDEs, mit denen Sie programmieren, dass sogeannnte Monospace-schriften genutzt werden. Das heißt: die Schrift ist so konzipiert, dass jeder Buchstabe die selbe Breite hat. das verbessert wesentlich die Lesbarkeit des Quellcodes. Was bei normalem Fließtext eher als störend empfunden wird, macht also bei der Auflistung von Quellcode durchaus Sinn. Deswegen sollten auch Sie innerhalb Ihrer Code-Listings Monospace-Schriften verwenden. Grundsätzlich wird jeder code, den sie innerhalb eines <pre>-Tags platzieren, schon von Haus aus von allen gängigen Browsern mit einer Standard-Monospace-Schrift gerendert.

Neben Quellcode macht das pre-Element übrigens auch bei anderen Text-Listings Sinn – etwa bei Gedichten, Zitaten, beim Einfügen von ASCII-Art und generell überall, wo Leerschritte und Whitespaces einen Einfluss auf den Sinngehalt des Textes haben.

Grundsätzlich empfiehlt es sich, den <code>-Tag innerhalb des <pre>-Tags zu verschachteln, also

 <pre><code>
Hier ist das Quellcode-Listing
</code></pre>

Tricky wird es, wenn Sie innerhalb dieses Doppelcontainers nun HTML-Quellcode listen wollen. Denn wenn Sie den Quellcode 1:1 reinkopieren, wird er ganz normal vom Webbrowser gerendert. Heutige content Management Systeme haben in Ihren WYSIWYG-Editoren meistens kein Problem damit, denn Sie ersetzen jedesmal, wenn der User innerhalb des visuellen Editor auf die <-Taste drückt, ein Kleiner-Zeichen mit &lt; und ein Größer-Zeichen mit &gt; auf HTML-Ebene. Damit wird erreicht, dass die <>-Zeichen nicht als HTML-Container, sondern als pure Zeichen vom Browser gerendert werden und daher der HTML-Code 1: 1 gerendet wird.

Wenn Sie kein Content Management system verwenden, sondern puristisch in HTML coden, müssen Sie diese Substitutionen eigenhändig machen. Wenn sie also wollen, dass ihr HTML-Code später richtig angezeigt wird, müssen Sie den quellcode folgendermaßen formatieren.

 &lt;html&gt;
&lt;head&gt;
&lt;title&gt;
&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;/body&gt;
&lt;/html&gt;

Dies wird dann im fertigen HTML-element richtig angezeigt.

<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>

Selbiges Problem haben Sie auch mit  ein paar anderen Zeichen wie Anführungszeicehn „, dem kaufmännischen Und & usw. Sie können Probleme diesbezüglich vermeiden, indem Sie den HTML-Quellcode, den Sie in einem <code>-Tag listen wollen, einfach mit einem HTML-Unespace-Tool einfügen und Espacen lassen.. Alle anderen Zeichen hingegen können Sie einfach 1:1 in das HTML-Dokument schreiben, sofern Sie als character Set UTF-8 konfiguriert haben.

Das nächste Problem, das Sie haben werden, wenn Sie Code listen wollen, ist die Tatsache, dass die Zeilenbreite in ihrem Texteditor in der Regel größer ist als auf ihrer Website. Das bedeutet Sie werden Probleme bekommen, den Code genau so auf ihrer Website einzubinden, wie Sie ihn auf dem Texteditor eingetippt haben, also eine Zeilentreue hinzubekommen.

Als erstes müssen Sie verhindern, dass zu langer Text über das Code-Element „hinausstehen“ kann. Deswegen müssen Sie durch CSS-Formatierungen verhindern, dass der Code bei zu großer Breite aus dem Element ausbricht und Ihnen Ihr Design zerstört. Damit können Sie beispielsweise eine CSS-Formatierung für Ihre pre-Elemente festlegen. Die gängigste Lösung ist die, dass bei zu breitem Quellcode eine horizontale Scrollbar eingeblendet wird. Das erreichen Sie über

 pre {
    overflow: auto;
}

wenn Ihnen diese Lösung nicht gefällt, Sie also nicht wollen, dass Ihre User scrollen müssen, um den Quellcode zu lesen, können Sie auch festlegen, dass zu breiter Code einen automatischen Zeilenumbruch bekommt. Das würden sie folgendermaßen erreichen

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

Als letztes Tuning, um zu verhindren, dass Ihr code zu breit wird, ist die Breite von Tabstopps zu verringern. Tabstopps sind standardmäßig vier Leerzeichen weit. Das ist bei TExteditoren kein Problem, da diese wie bereits angesprochen eine sehr hohe Zeilenbreite haben. Beim Browserfenster hingegen macht es Sinn, Tabstopps nur 2 Leerzeichen breit zu machen, um den Code kompakter zu halten. Auch dies erreichen Sie mit einer CSS-Formatierung.

 pre {
    tab-size: 2;
}

die letzte Maßnahmen, um die Lesbarkeit Ihres Quellcodes zu verbessern, wäre Syntax Highlighting, beispielsweise über eine JavaScript-Bibliothek. wie das geht, zeige ich Ihnen aber später einmal in einem anderen Posting.

Andreas Loibl ist SAP-Berater, Ethical Hacker und Online Marketing Manager und schreibt auf seinem Blog DaFRK Blog über verschiedene Themen in den Sektoren Projektmanagement, Informationstechnik, Persönlichkeitsentwicklung, Finanzen und Zeitmanagement.

DaFRK

Andreas Loibl ist SAP-Berater, Ethical Hacker und Online Marketing Manager und schreibt auf seinem Blog DaFRK Blog über verschiedene Themen in den Sektoren Projektmanagement, Informationstechnik, Persönlichkeitsentwicklung, Finanzen und Zeitmanagement.

Das könnte Dich auch interessieren …

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.