Sauberer HTML-Code
Jan Schmager (www.schmager.de), 21.9.2000
Was Webmaster auf ihre Server packen, ist manchmal schon recht merkwürdig. Meine 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 nun 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 entsprechend zu eliminieren.
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="Microsoft FrontPage 3.0">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="GENERATOR" content="Mozilla/4.5 [de] (Win95; I) [Netscape]">
Erklärung:
Codezeilen dieser Art können sofort problemlos gelöscht werden. Nur ein kleines Rechenbeispiel: Wir nehmen die erste Meta-Angabe für Frontpage 3. Diese Angabe verschwendet bei ca. 50 Html-Seiten 3 kB-Webspace. Für eine Million Html-Dokumente mit dieser Meta-Angabe erhöht sich der Webspace-Bedarf um ca. 60 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 viel 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 Aufbau der Seiten wird durch sie nicht beschleunigt. Suchmaschinen-Roboter verwerten diese Angaben in keiner Weise. Solche Code-Zeilen dürfen bedenkenlos gelöscht werden.
[Index]
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 möglichst 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">
<td align="left"> ......
Erklärung:
Mit der Angabe align="left" werden Elemente nach links ausgerichtet. Das ist aber völlig ü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:
Dieses wunderbare Attribut verdanken wir der Firma Adobe. Durch die Editoren 'Sitemill' und 'Pagemill' wird der/das/die NATURALSIZEFLAG in Bildangaben eingefügt. Der Variablenwert (0-3) gibt Auskunft über mögliche Größenänderungen des Bildes.
Okay, weil es so schön ist noch mal ein kleines Rechenbeispiel : Wir nehmen wieder 1 Million Html-Dokumente. Jede dieser Seiten enthält 5 Bilder, also auch 5 mal das NATURAL-dings. Ergibt ca. 87 MB Code-Ballast, der ausschließlich von dem entsprechenden Editor interpretiert wird ....
Es handelt sich bei Natural-Baby übrigens in keiner Weise um einen Html-Standard. Dieses Attribut kann / muss sofort gelöscht werden.
[Index]
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 muss / 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. Aufgrund eventuell auftretender Probleme mit Netscape 3 (siehe HTML-Überraschungen) wäre es sinnvoll, den kompletten DIV-Tag zu löschen.
Zwar steht der <CENTER>-Befehl auf der Abschuß-Liste des W3C, i.d.R. interpretieren alle gängigen Browser den CENTER-Tag problemlos.
3.3. No Noframes
Codebeispiel:
..
<noframes>
<body>
</body>
</noframes>
..
Erklärung:
Dieses beeindruckende Code-Beispiel einer geframeten Website zeigt mal wieder, wie problematisch der Einsatz von Frames überhaupt sein kann. Der Grundgedanke, einen Bereich für nicht frame-fähige Browser zu berücksichtigen, ist ja nicht schlecht. Man hätte das Ganze evtl. mit ein wenig Inhalt füllen sollen.
Man kann 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 einfache und 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 ?
[Index]
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, Copyright etc.) entfernt.
Kurz noch ein paar Worte zum Code. Es fehlt einmal <TR>. Außerdem ist die erste 'table data' leer. Mit höchster Wahrscheinlichkeit funktioniert die Breitenangabe nicht. Kennen wir alle oder? (Platzhalter-Gif etc.) So gesehen ist auch die erste Zeile umsonst. Die 20% breite leere Zelle ist definitiv kein Platzhalter. 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 normaler Weise als "bad code" bezeichnet. Das Alt-Attribut macht hier überhaupt keinen Sinn. Wackelige Browser stürzen hier evtl. ab ?!
Entweder muss das Alt weg 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 zwar 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.
Die großen Browser ignorieren solche Fehler meist, da sie darauf getrimmt sind. Sensible und ältere Browser reagieren da gelegentlich schon etwas heftiger.
Auf meiner Homepage verweise ich mehrfach auf Möglichkeiten, wie oder wo man seinen Html-Code kostenlos prüfen kann. In diesem Zusammenhang sei auf meine Homepage-Bastler-Seite und den Artikel Webmüll-Killer hingewiesen.
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.
aus http://www.xwolf.de/artikel/sauberhtml.shtml______________
Signatur entfernt von Support-Team
Bitte die Größe von 650 x 150 einhalten !