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:

<meta name="GENERATOR" content="Microsoft FrontPage 2000">
<meta name="GENERATOR" content="Microsoft FrontPage 1998">

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:

<meta name="robots" content="index">
<meta name="robots" content="nofollow">

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:

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

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:

<div align="left">
<p align="left">
<td align="left">

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:

<MAP name="Beispiel">
<AREA shape=rect coords="10,40,100,150" href="bsp.html"></AREA>
</MAP>

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:

<noframes>
<body>
</body>
</noframes>

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:

<BODY BACKGROUND="/gif/xxxxxx.jpg" BGCOLOR="#FFFFFF" TEXT="#000000">

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:

<img border="0" src="/pics/anonym.gif" width="20" height="10" alt="">

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

Bookmark setzen... These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Bloglines
  • MisterWong
  • MySpace
  • Reddit
  • SEOigg
  • Technorati
  • TwitThis
  • Y!GG
  • Google Bookmarks

Weiterführende Links: