Sauberer HTML-Code
Was Webmaster auf ihren Server packen, ist manchmal recht merkwürdig. Die Aussage bezieht sich in diesem Fall auf den HTML-Code. Bei näherem Hinsehen entpuppen sich die Seiten als wahre Code-Müllhalden.
Im Folgendem geht es um nicht existierende Befehle, überflüssige und falsch angewandte Tags. Anhand von Beispielen und Erklärungen wird unnötiger Code beschrieben. Nach dem Lesen dieses Artikels sollten interessierte HTML-Programmierer in der Lage sein, sinnlosen Code zu erkennen und zu entfernen.
Inhalt
1. Überflüssige Meta-Angaben
2. Falsche / sinnlose Attribute
3. Sinnlose Tags
4. Sonstiger Unfug
1. Überflüssige Meta-Angaben
1.1. Editorenangabe
Codebeispiele:
<meta name="generator" content="Adobe GoLive 4">
<meta name="generator" content="Microsoft FrontPage 4.0">
<meta name="generator" content="Mozilla/4.7 [en] (WinNT; I) [Netscape]">
Erklärung:
Codezeilen dieser Art können problemlos gelöscht werden. Ein Beispiel: Wir nehmen die zweite
Meta-Angabe für Frontpage 4. Diese Angabe verschwendet bei 50 HTML-Seiten 3 kB Webspace. Für eine Million
HTML-Dokumente mit dieser Meta-Angabe erhöht sich der Webspace-Bedarf um ca. 57 MB.
1.2. Ein Robots zuviel
Codebeispiel:
..
<meta name="robots" content="index">
<meta name="robots" content="nofollow">
..
Erklärung:
Dieses Beispiel entstammt einer Header-Definition. Hier ist alles soweit in Ordnung. Trotzdem geht es
einfacher, sinnvoller und platzsparender. Eine einzige Meta-Angabe ersetzt die beiden Zeilen problemlos:
<meta name="robots" content="index, nofollow">
So programmiert man effektiv! Weitere Informationen über den HTML-Header und wie man ihn perfekt in den Griff bekommt, gibt es in einem Extra-Artikel von mir.
1.3. Meta-Schwachsinn
Codebeispiele:
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta NAME="Template" CONTENT="C:\PROGRAMME\MICROSOFT OFFICE\OFFICE\html.dot">
<meta name="Microsoft Border" content="none">
<META NAME="resource-type" CONTENT="document">
Erklärung:
Diese Meta-Angaben haben überhaupt keine Relevanz. Der Seitenaufbau wird durch sie nicht
beschleunigt. Suchmaschinen-Roboter verwerten diese Angaben in keiner Weise. Solche Code-Zeilen
dürfen bedenkenlos gelöscht werden.
2. Falsche / sinnlose Attribute
2.1. Width-Angabe
Codebeispiel:
<table width="101%">
Erklärung:
Bei diesem Beispiel ist die Festlegung der Breite (width) falsch. Diese kann mit einer
Zahl oder einem Prozentwert definiert werden. Der prozentuale Wert sollte zwischen 1 und
100% liegen. (Multilength bleibt hier mal unberücksichtigt.)
2.2. Ausrichtung mit Align / Valign
Codebeispiel:
<td align="middle">
Erklärung:
Hier wurde eine falscher Wert für das Attribut verwendet. Erlaubt ist
- bei ALIGN: center, char, justify, left, right
- bei VALIGN: baseline, bottom, middle, top
Der Syntax des gezeigten Beispiels ist daher totaler Müll und unnötiger Code-Ballast. Entweder wird der Attribut-Wert korrigiert oder man entfernt das align="middle".
2.3. unnötige Formatierung
Codebeispiele:
<div align="left">
<p align="left">
Erklärung:
Mit der Angabe align="left" werden Elemente nach links ausgerichtet. Das ist überflüssig,
da dies bereits die Voreinstellung von HTML ist. Diese Formatierungen können gelöscht werden.
Ähnlich verhält es sich mit der vertikalen Ausrichtung von Elementen in Tabellen, für die die Voreinstellung mittig (middle) ist. Folgendes Beispiel soll dies kurz verdeutlichen:
[1] <td>
[2] <td valign="middle">
Codezeile 1 bewirkt genauso viel wie Zeile 2. Daher ist das valign="middle" überflüssig und kann entfernt werden.
2.4. Trennlinienbreite
Codebeispiel:
<hr width="100%">
Erklärung:
Die Angabe der Breite (width) ist hier sinnlos. Trennlinien gehen, wenn nicht anders
festgelegt, immer über die ganze Breite des Anzeigenfensters. Die Width-Angabe kann
entfernt werden.
2.5. NATURALSIZEFLAG
Codebeispiel:
<img src="natur.gif" width="10" height="50" border="0"
alt="test" naturalsizeflag="3">
Erklärung:
Die Editoren Sitemill und Pagemill fügten einst dieses Attribut in den Image-Tag ein, um
Größenänderungen an Bildern zu dokumentieren. Da die Firma Adobe die beiden Programme nicht
mehr anbietet, wären weitere Ausführungen an sich sinnlos. In Gedenken an der/die/das
NATURALSIZEFLAG noch ein kleines Rechenbeispiel:
Wir nehmen wieder eine Million HTML-Dokumente. Jede dieser Seiten enthält 5 Bilder, also auch fünfmal das NATURAL-dings. Ergibt ca. 90 MB Code-Ballast, der nur von dem entsprechenden Editor interpretiert wurde...
3. Sinnlose Tags
3.1. Verweis-sensitive Grafiken
Codebeispiel:
<map name="Beispiel">
<area shape="rect" coords="10,40,100,150" href="bsp.html"></area>
</map>
Erklärung:
In diesem Fall ist der schließende Tag für den Area-Befehl überflüssig. In der "W3C
Recommendation" für HTML 4.0 wird ausdrücklich darauf hingewiesen, dass der
"closing tag" verboten ist. Hier kann </area> entfernt werden.
3.2. Doppelte Zentrierung
Codebeispiel:
..
<body>
<div align="center"><center>
..
</center></div>
</body>
</html>
Erklärung:
Hier wird der Inhalt im Body-Bereich gleich zweimal zentriert. Rein theoretisch kann also der DIV-
oder der CENTER-Befehl gelöscht werden. Es empfiehlt sich den Center-Tag zu entfernen, da dieser
auf der Abschuß-Liste des W3C steht und von neueren Browsern nicht mehr interpretiert wird.
3.3. No Noframes
Codebeispiel:
..
<noframes>
<body>
</body>
</noframes>
..
Erklärung:
Dieses beeindruckende und fast ungeschnittene Code-Beispiel einer geframeten Website zeigt
mal wieder, wie problematisch der Einsatz von Frames überhaupt sein kann. Der Gedanke,
einen Bereich für nicht frame-fähige Browser zu berücksichtigen, ist nicht schlecht. Man
hätte das Ganze evtl. mit ein wenig Inhalt füllen sollen.
Man könnte hier die NOFRAMES-Tags löschen oder eine sinnreiche Bemerkung, wie z.B. "dein Browser ist doof!" einfügen. Das Beispiel stammt übrigens (wie alle anderen) von einer real existierenden Website!
3.4. Doppel-Body
Codebeispiel:
..
</head>
<body onLoad="ScriptTerror();return true">
<body background="/gif/xxxxxx.jpg" bgcolor="#ffffff" text="#000000">
<center>
..
Erklärung:
Hier handelt es sich um eine völlig neue Kreation. Die Grundstruktur einer HTML-Seite
besteht aus den Bestandteilen Header und Body. Eine leicht verständliche
Festlegung die sogar die wildesten HTML-Editoren einhalten. Es kann sich nur um vorsätzlichen
Programmierer-Terror handeln oder um den ultimativen Browserstabilitätstest. Was hier falsch ist,
brauch ich wohl nicht zu erläutern oder?
4. Sonstiger Unfug
4.1. Code-Chaos
Codebeispiel:
..
<table width="100%">
<td width="20%"></td></tr><tr><td>
...... viel Text ......
</td>
</tr></table>
..
Erklärung:
Dies ist Code-Chaos in höchster Perfektion. Da wo jetzt 'viel Text' steht, war noch
eine Textpassage. Die habe ich aus mehreren Gründen (Urheberrecht etc.) entfernt.
Kurz noch ein paar Worte zum Code. Es fehlt einmal <tr>. Ferner ist die erste 'table data' leer. Mit höchster Wahrscheinlichkeit funktionieren die Breitenangaben nicht. Platzhalter oder sowas sind das vermutlich nicht. Ich weiß auch nicht...
4.2. Alt mal anders
Codebeispiel:
<img border="0" src="/pics/anonym.gif" width="20"
height="10" alt>
Erklärung:
Dieses Beispiel zeigt in exzellenter Weise, was man als "bad code" bezeichnet. Das
Alt-Attribut macht hier überhaupt keinen Sinn. Entweder muss das Alt weg (schlechte Lösung)
oder es wird in folgender Weise erweitert:
<img border="0" src="/pics/anonym.gif" width="20"
height="10" alt="ein kleines Bild">
4.3. finale Kürze
Codebeispiel / Erklärung:
Die folgende kleine Zusammenfassung hat nichts mit überflüssigen HTML-Code zu tun, sie weist nur noch mal auf permanent auftretende Fehler bei der HTML-Programmierung hin.
- Fehlende Attribute bei Bildern (height, width, border, alt)
- "closing tag" vergessen, meist bei Links (<a></a> u.s.w.)
- Fehler bei den Sonderzeichen, Bsp.   (falsch) statt (richtig) u.s.w.
- Die Tag-Schachtelung bei Tabellen ist meist fehlerhaft
- Mangelhafte Farbangaben, Bsp. Linkfarbe: link="0000ff" (Gatter # vergessen) u.s.w.
Robuste Browser ignorieren solche Fehler meist, da sie darauf getrimmt sind. Ältere Browser reagieren da gelegentlich schon etwas heftiger. Den Code seiner Seiten sollte man prüfen. Die passenden Werkzeuge dafür empfiehlt die Homepage-Bastler-Seite.
Fazit
Wer sauberen HTML-Code schreibt, gestaltet effiziente und platzsparende Seiten. Der Internet-Traffic wird gesenkt, Besucher freuen sich über funktionierende Seiten mit geringer Ladedauer und der Platz für genutzten Webspace kann minimiert werden.