Sauberer HTML – Code | Onlinemagazin: devmag.net

HTML - Sauberer HTML Code
Was Webmaster auf ihre Server packen, ist manchmal schon recht
merkwürdig. Bei näherem Hinsehen entpuppen sich die
HTML Codes mancher 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.

1. überflüssige Meta-Angaben

1.1. Editorenangabe

Beispiele:

Codezeilen dieser Art können sofort problemlos gelöscht
werden, Sie werden von so manchem Programm einfach in den Code geschrieben.

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

Beispiel:

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">

1.3. Meta-Schwachsinn

Beispiele:

Auch hier hat irgendein Programm mitgespielt.
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.

2. falsche / sinnlose Attribute

2.1. Width-Angabe

Beispiel:

<table width="101%">

Bei diesem Beispiel ist die Festlegung der Breite (width) falsch.
Diese kann mit einer Zahl oder einem Prozentwert definiert werden.
Der prozentuale Wert kann nur zwischen 1 % und 100 % liegen.

2.2. Ausrichtung mit Align / Valign

Beispiel:

<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

Beispiele:

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.

2.4. Trennlinienbreite

Beispiel:

<hr width="100%">

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.

3. sinnlose Tags

3.1. Verweis-sensitive Grafiken (Image Maps)

Beispiel:

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

Beispiel:

<body>
<div align="center"><center>
Inhalt
</center></div>
</body>
</html>

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

Beispiel:

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

Beispiel:

</HEAD>
<body onLoad="ScriptTerror();return true">
<BODY>
<CENTER>
..

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
?

3.5 Weiteres im <body>

Beispiel:

Da als Hintergrund ein Bild eingefügt wird, ist die Definition
der Hintergrundfarbe unnötig, sofern das Hintergrundbild gekachelt
ist. Andernfalls ist die Definition der Hintergrundfarbe auf Weiß
(#FFFFFF), und der Textfarbe auf Schwart (#000000) unnötig,
da der Hintergrund standardmäßig weiß ist, und
die Textfarbe schwarz ist.

4. sonstiger Unfug

4.1. Code-Chaos

Beispiel:

<table width="100%">

<td width="20%"></td></tr><tr><td>

…… viel Text ……

</td>
</tr></table>
..

Dies ist Code-Chaos in höchster Perfektion.
Es fehlt einmal <TR>. Außerdem ist die erste ‘<td>’
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.

4.2. Alt mal anders

Beispiel:

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">
Nach dem HTML 4.0 Standard muss das ALT-Attribut jedoch immer gesetzt
sein.

4.3. finale Kürze

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

Die großen Browser ignorieren solche Fehler meist, da sie
darauf getrimmt sind. Sensible und ältere Browser reagieren
da gelegentlich schon etwas heftiger.

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.

schmager.de

Sauberer HTML – Code

Leave a Reply

Categories