out of the box

Unsicher, ob das HTML der eigenen Webseiten richtig ist? Hat der HTML-Export der Textverarbeitung oder der HTML-Editor Unfug produziert? Mit tidy räumen Sie auf.

out of the box

Es gibt tausende Tools und Utilities für Linux. “out of the box” pickt sich die Rosinen raus und stellt pro Monat ein Progrämmchen vor, das wir für schlichtweg unentbehrlich oder aber zu Unrecht wenig beachtet halten.

Wer eigene Webseiten ins Netz stellt, erzeugt diese auf die eine oder andere Art. Sei es mit einem einfachen Texteditor oder mit einem HTML-Editor, der nach dem WYSIWYG-Prinzip arbeitet, es kann in beiden Fällen Fehler geben. Mit tidy steht ein Werkzeug zur Verfügung, das Ihnen hilft, “saubere” und standardkonforme HTML-Dokumente zu erstellen.

Optimaler Müll

Oft liest man auf WWW-Seiten den Schriftzug “optimiert für Netscape Navigator” oder “optimiert für Internet Explorer”. Tatsächlich bedeutet diese angebliche Optimierung aber, dass die Benutzer anderer Browser mit falsch oder unvollständig dargestellten Seiteninhalten rechnen müssen. Besser ist es, gültige Standards zu benutzen, die die Mehrzahl der Browser unterstützt.

Dass tidy sich sehr genau an HTML-Standards hält, kommt nicht von ungefähr. Es wird von Dave Raggett im Rahmen des WWW-Konsortiums (W3C) entwickelt, das genau diese Standards ausarbeitet. Doch bevor tidy für Sie aufräumt, müssen Sie es installieren.

Aus verlässlicher Quelle

Von der tidy-Homepage (http://www.w3.org/People/Raggett/tidy/) oder von der Heft-CD holen Sie sich dazu das Quellen-Archiv und installieren es mit den folgenden Kommandos:

tar xzf tidy4aug00.tgz
 cd tidy4aug00
 make
 su  (root-Passwort eingeben)
 make install ; exit

Lief diese Prozedur fehlerfrei ab, können Sie tidy einem ersten Funktionstest unterziehen.

Mach’s besser

Erzeugen Sie mit einem Texteditor die Datei schlampig.html (Listing 1).

Listing 1

HTML mit Fehlern

<title>Schlampige Seite
 <h1>Eine Seite voller Fehler</h2>
 … und damit Futter für tidy!
 <P>
 Auf dieser Seite sind
 <LI> falsche und fehlende Tags,
 <li>eine unvollständige Liste
 <li>und falsch <B>geschachtelte</B> Tags zu finden.

Auf diese HTML-Katastrophe lassen Sie nun tidy los und leiten das verbesserte Ergebnis in die Datei besser.html um:

tidy -upper schlampig.html > besser.html

Das Ergebnis sehen Sie in Listing 2.

Listing 2

Tidy hat aufgeräumt

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
 <HTML>
 <HEAD>
 <META name="generator" content="HTML Tidy, see www.w3.org">
 <TITLE>Schlampige Seite</TITLE>
 </HEAD>
 <BODY>
 <H1>Eine Seite voller Fehler</H1>
 …und damit Futter für <C>tidy</I>!
 <P>Auf dieser Seite sind</P>
 <UL class="noindent">
 <LI>falsche und fehlende Tags,</LI>
 <LI>eine unvollständige Liste</LI>
 <LI>und <C>falsch <B>geschachtelte</B></I> Tags zu finden.</LI>
 </UL>
 </BODY>
 </HTML>

Das Programm gibt zusätzlich zur korrigierten Ausgabe einige Warn- und Fehlermeldungen aus. So können Sie genau nachvollziehen, was tidy nicht gefiel und was hinzugefügt oder ersetzt wurde. Die Option -upper sorgt dafür, dass alle Tags einheitlich groß geschrieben werden. Zu den Korrekturen zählen unter anderem:

Ergänzung der Seite um HTML-, HEAD- und BODY-Tags,
Schließen des TITLE-Tags (ein gravierender Unterschied, wie man in den Abbildungen 1 und 2 sieht),
Berichtigung der irrtümlich mit </H2> geschlossenen H1-Überschrift,
Umschließen der Listen-Tags mit einem UL-Tag,
Schließen jedes einzelnen Listen-Tags mit </LI>,
Tauschen der schließenden Tags </I> und </B> für korrekte Schachtelung und
Ersetzen der Umlaute durch HTML-Entitäten.

Der letzte Punkt ist aufgrund des von tidy hinzugefügten DOCTYPE-Kommentars nötig. Taucht darin DE statt EN auf, so sind ISO-Latin-1-kodierte Umlaute erlaubt. Um solche Umlaute beim tidy-Lauf unverändert zu lassen, verwenden Sie die Option -raw. Tabelle 1 gibt übrigens eine kleine Tag-Übersicht.

Tabelle 1: Wichtige HTML-Tags

Bezeichnung	Bedeutung
HTML	Kennzeichnung des Dokuments als HTML-Text.
HEAD	Kopfbereich des Dokuments. Hier können sie unter anderem den Seitentitel (TITLE) unterbringen.
BODY	Rumpf des Dokuments. In diesen Bereich kommt der eigentliche Inhalt.
H1, H2, …	Überschriften in verschiedenen Ebenen.
UL	Einfache Aufzählung ohne Nummerierung.
OL	Einfache Aufzählung mit Nummerierung.
LI	Aufzählungspunkt.
I	Schräggestellter Text (Italic).
B	Fettgesetzter Text (Bold).

Abbildung 1: Netscape ist verwirrt

Abbildung 2: tidy wirkt Wunder

Bella HTML

Um maschinell erzeugtes HTML für die manuelle Nachbearbeitung gut leserlich zu formatieren, besitzt tidy die -indent-Option, die die jeweiligen HTML-Elemente entsprechend ihrer Schachtelungstiefe einrückt. In den Listings 3 und 4 ist die Wirkung dieser Option demonstriert.

Listing 3

Struktur nicht erkennbar…

<ol><li>Ein <ul><li>dicker<li>fetter</ul>
 <li>Fisch <li>
 ging <li>angeln</ol>

Listing 4

… jetzt aber schon

<ol>
   <li>
     Ein
     <ul>
       <li>dicker</li>
       <li>fetter</li>
     </ul>
   </li>
   <li>Fisch</li>
   <li>ging</li>
   <li>angeln</li>
 </ol>

Falls Sie Tabellen-Elemente auf die gleiche Weise einrücken lassen, kann sich deren Darstellung aufgrund von Fehlverhalten einiger Browser leicht ändern. Kontrollieren Sie also besser das Ergebnis.

Sogar das mit proprietären Erweiterungen durchsetzte HTML-Derivat, das von MS Office 2000 erzeugt wird, kann tidy in eine saubere und besser für’s WWW geeignete Form bringen (Option --word-2000 yes). Im Test reduzierte sich ein Dokument von 90 kB Länge auf ein Zehntel(!), ohne Informationsgehalt einzubüßen.

Diashow

Wer ein längeres HTML-Dokument geschrieben hat und dieses gerne zwecks Präsentation in Form von einzelnen Folien mit dem Beamer an die Wand werfen will, sollte die Option -slides ausprobieren. Aus einer einzelnen Datei erzeugt tidy durchnumerierte Dateien slideN.html, wobei jeweils das <H2>-Tag (also eine Überschrift der Ebene 2) als Folientrenner fungiert. Auf jeder Folie befinden sich Links zur vorigen, ersten und nächten Folie.

Finetuning

Falls Sie bestimmte Kommandozeilenoptionen von tidy immer wieder benötigen, aber müde sind, diese ständig einzutippen, bieten sich Einträge in eine Konfigurationsdatei an. Ob Sie eine systemweite Konfiguration oder eine an Ihren Benutzer-Account gebundene benutzen wollen, bleibt Ihnen überlassen. Um tidy mitzuteilen, wo sich die Konfigurationsdatei befindet, setzen Sie die Environment-VariableHTML_TIDY auf den entsprechenden Dateinamen, etwa /etc/htmltidy.conf. Dazu fügen Sie Ihrer .bashrc die Zeile export HTML_TIDY=/etc/htmltidy.conf hinzu.

In der Konfigurationsdatei tragen Sie nun ihre Standardoptionen ein. Listing 5 zeigt ein Beispiel. Eine umfangreiche Übersicht der Optionen finden Sie in der Datei Overview.html im tidy-Quellarchiv.

Listing 5

Beispiel für htmltidy.conf

wrap: 72
 indent: auto
 char-encoding: latin1
 uppercase-tags: yes

Mit wrap: 72 werden im HTML-Dokument Zeilen nach 72 Zeichen umgebrochen, indent: auto sorgt für automatisches Einrücken mit Ausnahme von Tabellen, char-encoding: latin1 wählt die Zeichensatzkodierung und uppercase-tags: yes bewirkt das gleiche wie die Option -upper. Zu weiteren Funktionen und Möglichkeiten von tidy kann ich die Homepage des Programms sehr empfehlen.

Glossar

HTML: “HyperText Markup Language”, die ursprünglich am CERN entwickelte Auszeichnungssprache für Seiten des World Wide Web. Durch sogenannte Tags wird die Auszeichnung bestimmter Textteile als Überschriften, Listen, Tabellen und ähnliches erreicht.
WYSIWYG: “What You See Is What You Get”, ein besonders im Office-Bereich gern eingesetztes Konzept, um Eingaben sofort in der formatierten Darstellung zu sehen. Da bei HTML das genaue Aussehen von Überschriften und anderen Seitenelementen nicht festgelegt ist, lässt es sich kaum mit dem WYSIWYG-Konzept vereinbaren.
HTML-Entitäten: Eine Ersatzschreibweise für Zeichen außerhalb des 7-Bit-ASCII-Zeichensatzes oder Zeichen, die in HTML eine Sonderbedeutung haben. Die Entität für den Umlaut ü ist ü, die für das Copyright-Zeichen © oder die für das Kleiner-als-Zeichen <.
ISO-Latin-1: Ein Standard für die Kodierung von länderspezifischen und Sonderzeichen als Erweiterung des ASCII-Zeichensatzes. Letzterer schreibt nur die Kodierungen von 0 bis 127 fest und lässt so z. B. Umlaute außen vor.
Environment-Variable: (auch: Umgebungsvariablen) Mit diesen Variablen werden bestimmte Systemeinstellungen automatisch an Prozesse weitergegeben, zum Beispiel der Suchpfad für Programme PATH, die Lokalisierungseinstellungen LC_LANG und LC_CTYPE oder eben der Name einer Konfigurationsdatei.