Saubere Sache
out of the box
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.
Einem Freund empfehlen
