10 HTML-Sünden, die man meiden sollte

KATEGORIE: (X)HTML & CSS, TIPPS VOM 27.08.2011 1

Webseitenerstellung hat sich im letzten Jahrzehnt geändert. Sowohl auf professioneller Seite als auch bei privaten Webseitenbetreibern. Einen großen Anteil daran haben die unterschiedlichsten Webeditoren, die es dem User mehr oder weniger leicht machen, sich eine Webseite „zusammen zu klicken“. Die aktuellen Versionen der Webeditoren arbeiten mittlerweile mit konformen HTML- und CSS-Code. Wie effektiv diese Editoren arbeiten, hängt jedoch vom Wissen und Können des Benutzers ab.

Ein Blick in den Quellcode mancher Seiten treiben einem als Webentwickler schon die Tränen in die Augen. Diese Seiten lassen oft die Struktur vermissen, die HTML zu Eigen ist, führen aber zum Ausgleich fast alles auf, was HTML zu bieten hat – leider an den falschen Stellen und dann geradezu inflationär. Von einer Zugänglichkeit für Sehbehinderte braucht man bei diesen Seiten nicht mehr zu reden. Aber auch Suchmaschinen können nicht viel mit solchen Seiten anfangen – und an diesem Punkt schießen sich die Betreiber der Seite selbst ins Knie. Suchmaschinen orientieren sich am semantischen Aufbau einer Seite. Je weniger der Quellcode dem entspricht, desto weniger wird indiziert. Unterlässt oder korrigiert man die folgenden 10 Sünden, so hat die Seite schon enorm an Qualität gewonnen.

1. Sünde: Tabellen-Layout

Tabellen-Layout ist nicht nur tot, es ist Geschichte. Das war mal vor 10 Jahren notwendig, um in den ersten Browsergenerationen ein einheitliches Layout zu garantieren. Tabellen sind Tabellen; sie sind dazu da Texte oder Daten in eine geordnete Zusammenstellung zu bringen. Diese Inhalte werden in Zeilen und Spalten gegliedert. Die optimale Darstellung einer Tabelle ist der Tabellenkopf und darunter die Tabellenfelder, eventuell noch ein Tabellenfuß. Ein Webseitenlayout sollte mittlerweile mit Blockelementen und CSS erstellt werden.

2. Sünde: Der Überschriftengeiz

<p><strong>Überschrift</strong></p>
<p>Es folgen die Texte</p>

HTML stellt Überschriftengrößen von h1 bis h6 zur Verfügung, mit abnehmender Schriftgröße. Damit lassen sich Texte hervorragend gliedern, und die Abstände vor und nach dem Text werden automatisch hergestellt.
<h3>Überschrift dritten Grades</h3>
<p>Es folgen die Texte</p>

3. Sünde: Verzicht auf Listen, wo sie notwendig sind

Eine Auflistung von Informationen wird immer noch gerne über Absätze und Zeilenumbruch erstellt.
<p>
KingKong<br />
Godzilla<br />
Rumpelstilzchen<br />
Nosferatu<br />
</p>

HTML bietet geordnete (ol) und ungeordnete (ul) Listen an. In der geordneten Liste werden in der Regel den Listenelementen Zahlen vorangestellt, in den ungeordneten sind dies Auflistungszeichen. Der Vorteil der Listen besteht darin, dass nach jedem Listenelement ein automatischer Zeilenumbruch erfolgt, wie sich das für eine anständige Liste gehört.
<ul>
<li>KingKong</li>
<li>Godzilla</li>
<li>Rumpelstilzchen</li>
<li>Nosferatu</li>
</ul>

4. Sünde: Zu viele Zeilenumbrüche

Um Abstände zwischen Texten oder Bildern zu erhalten wird häufig der Zeilenumbruch mehrfach hintereinander genutzt. Dafür ist er nicht gedacht.
Es lebt!, rief Doktor Frankenstein.
<br />
<br />
<br />
Sein Diener Igor hilft dem Wesen vom Tisch.

Zum Erstellen Zwischenräumen bei Texten und Bildern werden entweder Absätze benutzt oder mittels CSS margins (Außenabstände) erzeugt.
<p>Es lebt!, rief Doktor Frankenstein.</p>
<p>Sein Diener Igor hilft dem Wesen vom Tisch.</p>

Unter diese Sünde fällt übrigens auch die mehrfache Nutzung des &nbsp; (Leerzeichen ohne Umbruch) hintereinander.

5. Sünde: „Vergessen“ des alt-Attributs bei Bildern

Das alt-Attribut (Alternativtext) für Bilder wird in konformen HTML-Code erwartet. Für Nutzer mit Screenreadern ist dieses Attribut wichtig, um Informationen über das Bild zu erhalten. Auch bei großen Bildern und langsamer Verbindung gibt das alt-Attribut Aufschluss über den Inhalt. Es sollte also in jedem Fall vorhanden sein. Bei eher dekorativen Bildern reicht es das Attribut leer zu lassen: alt="".
<img src="frankenstein.jpg" />
<img src="frankenstein.jpg" alt="Doktor Frankenstein im Labor" />

6. Sünde: Hyperlinks ohne title

Hyperlinks sollten generell schon als solche zu erkennen sein. Noch besser, vor allem in Hinsicht auf Barrierefreiheit, ist die Nutzung des Attributs title.
<a href="kapitel_02.html" title="Kapitel 2">Nächstes Kapitel</a>

7. Sünde: Verwendung von <b> und <i> für fett und kursiv

<b> und <i> sind Textformatierungen und in diesem Zusammenhang nicht richtig. Für die Betonung einzelner Wörter oder Sätze sind die logischen Textauszeichnungen <strong> und <em> Mittel der Wahl. Textformatierungen sollten mit CSS vorgenommen werden.
<b>Das ist eine fette Schrift</b>, aber <strong>dieses ist besser.</strong>

8. Sünde: Platzieren von Block-Elementen in Inline-Elementen

Block-Elemente in HTML erzeugen einen Zeilenumbruch und haben häufig einen eigenen oberen und unteren Abstand zu den nächsten Elementen. Dazu gehören Überschriften, Absätze, Tabellen und div’s. Inline-Elemente bleiben im Textfluss und können beliebig in Block-Elemente eingefügt werden. Zu ihnen gehören Bilder, Anker (Hyperlinks) und span’s. Block-Elemente werden demnach niemals in Inline-Elemente platziert.
<a href="#"><h1>Falsche Platzierung</h1></a>
<h1><a href="#">Richtige Platzierung</a></h1>

9. Sünde: Inline Styles

Die moderne und konforme Webseitenerstellung trennt Inhalt und Formatierung voneinander. Die Formatierung des Inhalts wird mit CSS vorgenommen. Insofern unterlaufen Inline-Styles diese Absicht. Der Quellcode wird aufgebläht und unübersichtlich.
<h1 style="font-family: Arial; font-weight: bold; font-size: 16px; color: #000;">Überschrift</h1>
Solche Formatierungen gehören in ein StyleSheet, vornehmlich in den Head-Bereich, oder noch besser, in eine externe CSS-Datei.

10. Sünde: grafische Navigation

Verläufe im Hintergrund, ausgefallene Schriften, schöne Roll-Over-Effekte – auch wenn der Webeditor solche Features bereithält, grafische Navigationen schließen einen Teil der Besucher aus und Suchmaschinen finden sie nicht. Man muss nicht unbedingt auf einen Screenreader angewiesen sein, auch jemand, der nicht mehr so gut sehen kann, hat bei Textbildern keine Möglichkeit die Schrift zu vergrößern.

Fazit:

Wer eine Seite ins Internet stellt, impliziert, dass er anderen Menschen etwas mitteilen möchte. Dieser Absicht sollte man auch Rechnung tragen. Dazu gehört ein logischer Aufbau der Seite und seiner Inhalte. Die Inhalte sollten für den Besucher gut lesbar, die Seite gut bedienbar sein und die Ladezeiten nicht die Geduld überstrapazieren. Der saubere Aufbau einer Webseite und die Nutzung logischer Auszeichnungen von Inhalten erleichtert den Suchmaschinen die Indizierung der Seite. Sie wird besser gefunden und relevante Stichworte eher gelistet. Und zu guter Letzt spart man sich bei der Überarbeitung der Seite ungemein viel Arbeit.

Ein Kommentar zu „10 HTML-Sünden, die man meiden sollte“

  1. Paul   15.06.2012, 06:22

    Eine sehr schön Aufzählung, die Liste ließe sich jedoch noch deutlich erweitern. So fällt mir gelegentlich ein „Gedichtstil“ auf: Hobbywebmaster formatieren ihre Texte über Hund, Katze oder Kegelverein gern zentriert. Diese 11 Sünde wird dann noch gern mit einer oder mehreren der bereits erwähnten kombiniert.