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. &nbsp (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.