Galerie

Sourcen und Listings: 5 Profitipps - HTML-Codieren leicht gemacht: Das <pre>-Element gibt Zwischenraumzeichen so wieder, wie sie im Code stehen.

HTML-Codieren leicht gemacht: Das
-Element gibt Zwischenraumzeichen so wieder, wie sie im Code stehen.

Tipp 1: Das Tag: <pre>...</pre>

Sie machen sich die Arbeit leichter, wenn Sie das HTML-Tag<pre> für das Layout Ihrer Webseite verwenden.

Ein eher spezielles, aber sehr praktisches HTML-Element ist das <pre>-Tag, umso mehr, weil es von fast allen modernen Browsern unterstützt wird. In <pre>...</pre> eingeschlossener HTML-Code wird nämlich vom Browser genauso dargestellt, wie er zwischen den beiden Tags steht, einschließlich aller Leerzeichen, Tabulatorschritte und Zeilenumbrüche.

Die Empfehlung geht dahin, das pre-Element für die Ausgabe von Programm- bzw. Skriptcode zu verwenden. Es spricht aber nichts dagegen, sich das Leben etwas einfacher zu machen und das pre-Element immer dort zu verwenden, wo es gerade auf Zwischenraumzeichen ankommt. Sie haben so beim Codieren eine bessere Vorstellung davon, wie der Text später im Browser platziert wird. Hier der HTML-Quellcode:

<pre>
#include "stdafx.h"
using namespace System;
int main(array<System::String %5E> %5Eargs)
{
Console::WriteLine(L"Hello World");
return 0;
}
</pre>

Die Ausgabe im Firefox-Browser sehen Sie im Bild HTML-Codieren leicht gemacht. Beachten Sie bitte, dass die Einrückungen vom Seitenrand genau denen im HTML-Quelltext entsprechen. Dabei spielt es keine Rolle, in welchem Abstand Sie das <pre>-Tag platzieren.