Gutes und schlechtes HTML im Vergleich

Zuerst das schlechte Beispiel:

<P><A HREF="http://www.adfc-bw.de/mannheim" class="menu" 
target="Inhalt"title="ADFC Mannheim Startseite"><
IMG SRC="gelberpunkt.gif" ALT="bullet"BORDER=0 HEIGHT=8 WIDTH=8></A>
<P><A HREF="http://www.adfc-bw.de/mannheim.html" class="menu" 
target="Inhalt"title="ADFC Mannheim Startseite">Startseite</A>
<P><A HREF="http://www.adfc-bw.de/mannheim/kalender.html" class="menu" 
target="_blank"><IMG SRC="gelberpunkt.gif" ALT="bullet" BORDER=0
HEIGHT=8 WIDTH=8></A>
<P><A HREF="http://www.adfc-bw.de/mannheim/kalender.html" 
class="menu" target="_blank">Kalender</A>
<P><A HREF="http://www.adfc-bw.de/mannheim/verkehr.html" class="menu">
<IMG SRC="gelberpunkt.gif" ALT="bullet" BORDER=0 HEIGHT=8 WIDTH=8></A>
<P><A HREF="http://www.adfc-bw.de/mannheim/verkehr.html" class="menu">
Verkehr</A>
<P><A HREF="http://www.adfc-bw.de/mannheim/rtp_hw.html" class="menu">
<IMG SRC="gelberpunkt.gif" ALT="bullet" BORDER=0 HEIGHT=8 WIDTH=8></A>
<P><A HREF="http://www.adfc-bw.de/mannheim/rtp_hw.html" class="menu">
Tourismus</A>
<P><A HREF="http://www.adfc-bw.de/mannheim/mitnahme.html" class="menu">
<IMG SRC="gelberpunkt.gif" ALT="bullet" BORDER=0 HEIGHT=8 WIDTH=8></A>
<P><A HREF="http://www.adfc-bw.de/mannheim/mitnahme.html" class="menu">
F&auml;hrzeiten</A>
<P><A HREF="http://www.adfc-bw.de/service.html" class="menu" 
target="Inhalt"><IMG SRC="gelberpunkt.gif" ALT="bullet" BORDER=0
HEIGHT=8 WIDTH=8></A>
<P><A HREF="service.html" class="menu"target="Inhalt">Service</A>
<P><A HREF="http://www.adfc-bw.de/mannheim/aktuell.html" class="menu">
<IMG SRC="gelberpunkt.gif" ALT="bullet" BORDER=0 HEIGHT=8 WIDTH=8></A>
<P><A HREF="http://www.adfc-bw.de/mannheim/aktuell.html" class="menu"
>ADFC Mannheim</A>
<P><A HREF="http://www.adfc-bw.de/mannheim/adfc_pm.html" class="menu">
<IMG SRC="gelberpunkt.gif" ALT="bullet" BORDER=0 HEIGHT=8 WIDTH=8></A>
<P><A HREF="http://www.adfc-bw.de/mannheim/adfc_pm.html" class="menu">
Presseservice</A>
<P><A HREF="http://www.adfc-bw.de/mannheim/kontakt.html" class="menu">
<IMG SRC="gelberpunkt.gif" ALT="bullet" BORDER=0 HEIGHT=8 WIDTH=8></A>
<P><A HREF="http://www.adfc-bw.de/mannheim/kontakt.html" class="menu">
Wir &uuml;ber uns</A>
<P><A HREF="http://www.adfc-bw.de/mannheim/links" class="menu" 
target="_blank"><IMG SRC="gelberpunkt.gif" ALT="bullet" BORDER=0
HEIGHT=8 WIDTH=8></A>
<P><A HREF="http://www.adfc-bw.de/mannheim/links" class="menu"
target="_blank">Internet-Links</A>
<P><A HREF="http://www.adfc-bw.de/adfcforum.htm" class="menu" 
target="_blank" title="Forum"><IMG SRC="gelberpunkt.gif"
ALT="bullet" BORDER=0 HEIGHT=8 WIDTH=8></A>
<P><A HREF="service.html" class="menu" target="_blank"
title="Forum">Ihre Meinung</A>
<P><A HREF="http://www.adfc-bw.de/mannheim/sitemap.html" class="menu">
<IMG SRC="gelberpunkt.gif" ALT="bullet" BORDER=0 HEIGHT=8 WIDTH=8></A>
<P><A HREF="http://www.adfc-bw.de/mannheim/sitemap.html" class="menu">
Site-map</A>
<P><A HREF="http://www.karl-drais.de" class="menu" target="_blank">
<IMG SRC="gelberpunkt.gif" ALT="bullet" BORDER=0 HEIGHT=8 WIDTH=8></A>
<P><A HREF="http://www.karl-drais.de" class="menu" target="_blank">
Karl Drais</A>
<P><A HREF="http://www.adfc-bw.de/mannheim/english.html" class="menu" 
target="_blank"><IMG SRC="gelberpunkt.gif" ALT="bullet" BORDER=0
HEIGHT=8 WIDTH=8></A>
<P><A HREF="http://www.adfc-bw.de/mannheim/english.html"class="menu"
target="_blank"> Summary</A>

Volumen: ca. 3,4 KB

Dieser HTML-Code ist keine böswillige Erfindung von mir, den gibt es wirklich! Ich fand den in einer real existierenden Web-Seite eines real existierenden Anbieters im real existierenden weltweitem Netz. Und es ist ohne jeden Zweifel maschinell (mit einem Tool) erzeugt, da wette ich drauf.

Und das ist noch nicht einmal die ganze Seite, das ist nur das Menü daraus! Aber keine Panik, der Rest von dem Ding sieht auch nicht besser aus.

Und so habe ich das Problem gelöst:

<menu style="list-style-image:url(img/gelbe-kugel.gif);"> 
<li><a href="index.html"   >Startseite       </a></li>
<li><a href="kalender.html">Kalender         </a></li>
<li><a href="verkehr.html" >Verkehr          </a></li>
<li><a href="rtp_hw.html"  >Tourismus        </a></li>
<li><a href="mitnahme.html">F&auml;hrzeiten  </a></li>
<li><a href="service.html" >Service          </a></li>
<li><a href="aktuell.html" >ADFC Mannheim    </a></li>
<li><a href="adfc_pm.html" >Presse-Service   </a></li>
<li><a href="kontakt.html" >Wir &uuml;ber uns</a></li>
<li><a href="links.html"   >Internet-Links   </a></li>
<li><a href="service.html" >Ihre Meinung     </a></li>
<li><a href="sitemap.html" >Sitemap          </a></li>
<li><a href="karl-drais.de" target="_blank">karl-drais.de</a></li>
<li><a href="english.html" >summary          </a></li>
</menu>

Volumen: ca. 920 Byte

Das is’n Unterschied, was!? Wie man im direkten Vergleich sieht, ist der maschinell generierte Code mehr als dreimal so groß als der handgeschriebene solche. Oder anders gesagt, er enthält ca. 1/3 Nutzcode und 2/3 Schrott, welcher als Ballast die Ladezeiten verlängert, den Seitenaufbau verschleppt und die Kosten treibt!

Und dann ist das noch nicht einmal gültiges HTML, was die Software da abliefert! Wenn ich den Code über den Valodator vom W3C jage, dann kriege ich eine Fehlerliste präsentiert die fast genau so lang ist wie der Code selbst.

Es gibt also gute Gründe, warum ich meinen HTML-Code stets selbst schreibe und ihn mir niemals automatisch von irgend einer Software erstellen lasse!