Besseres Markup in 5 Schritten

Ich erkläre in 5 einfachen Schritten, wie man die Qualität von HTML-Seiten verbessert. Besonders hilfreich kann dieser kleine Ratgeber für Webdesigner sein, denen Webstandards noch neu sind.

1. Verwende einen Doctype

Der Doctype verrät dem Benutzeragenten (Browser etc.) um welche Art von Dokument es sich handelt. Ggf. schaltet dieser dann in den Standards Compliance Mode oder in den Quirks Mode bevor er das Dokument rendert. So kann dein Dokument validiert werden und es können Darstellungsfehler verschiedener Browser vermieden werden.

2. Vergiss nicht den Content-Type

Der Benutzeragent erfährt durch den Content-Type die Kodierung und den Inhaltstyp des Dokuments.

Beim Webdesign tritt kommt der Content-Type text/html; charset=utf-8 für Unicode oder text/html; charset=iso-8859-1 für westliche Kodierung zum Einsatz.

3. Nutze das TITLE-Element

Der einzig echte Seitentitel steht im TITLE-Element. In Browsern meist in der Titelleiste zu sehen, sollte das TITLE-Element dem Benutzer grob erklären, um was es auf der Seite geht. Jede Seite einer Website sollte einen eigenen Titel besitzen.

So freuen sich besonders Benutzer, die das Tabbed-Browsing nutzen. Im Allgemeinen wird der Seitentitel auch als Tab-Beschriftung genutzt.

Im TITLE-Element sollte mindestens 2 Dinge enthalten sein: Der Seitentitel und der Websitetitel. Für Weblogs schlage ich folgendes Schema vor:

Eintragstitel - Kategorie - Websitetitel

Warum? Ganz einfach. Nehmen wir mal an, dass der Benutzer mehrere Seiten von dir auf. Er möchte dann nicht jedes Mal den Websitetitel in den Tabs lesen, sondern lieber den Seitentitel. Plausibel, oder?

4. Setze semantisches Markup ein

Vermehrt müssen Webprojekte für mehrere Medien optimiert werden. Tabellenlayouts und Spacer-GIFs machen das unmöglich. Setze HTML-Elemente nach Sinn und Bedeutung, nicht nach Aussehen ein. Später kannst du dann für jedes Medium eine eigene CSS Datei schreiben. Das spart Zeit und Geld.

5. Schreibe sparsam

Meist resultiert ein schlankes Dokument aus der Verwendung semantisch relevanter HTML-Elemente. Setze auch kein DIV oder SPAN ein, wo es nicht sein muss. Es summiert sich wirklich und 56k Modem-Nutzer werden dir danken.

veröffentlicht am 17.04.2006 um 22:00 von Martin Labuschin in


Ich muss Kristof Dreier da mal recht geben, du solltest das Geschriebene vielleicht noch einmal gegenlesen lassen, da sind ja Konstrukte dabei, mein lieber Scholli :-)


Zum Inhalt: Wenn gegeben ist, dass die Seite wirklich nur im deutschsprachigen, oder sagen wir mal westlichen Raum abgerufen wird, dann ist gegen iso-8859-1 prinzipiell nichts einzuwenden. Aber warum nicht gleich bei Unicode bleiben, dass optisch keine Veränderung gegenüber iso-8859-1 aufweist, es aber so ziemlich jedem Weltbürger erlaubt, deine Seite anzuschauen? Oder anders gesagt: Es gibt heute überhaupt keinen Grund mehr, Unicode nicht einzusetzen.

Du schreibst text/html sollte der MIME-Type sein. Das ist korrekt, so lange man HTML <= 4.01 einsetzt. XHTML erfordert eigentlich einen MIME-Type vom Typ application/xhtml+xml, und der einzige Grund, warum sich das immer noch nicht durchgesetzt hat, nennt sich (wie so oft) Internet Explorer...

Danke für deinen Kommentar. Dein Einwand zu text/html finde ich jedoch unbegründet, denn schon in der Einleitung habe ich HTML genannt und nicht XHTML :)

Oha, stimmt. Ich nehms zurück! :-)

charset=iso-8859-1 würde ich in der Tat langsam als überholt betrachten, auch wenn es noch häufig verwendet wird. Gerade im Zeitalter der Weblogs, wo auch mal Japaner, Blogger aus Hongkong usw. verlinken, ist UTF-8 einfach angebrachter, erfäßt den kompletten Bereich von iso-8859-1 und ist zukunftssicher.

blog comments powered by Disqus
The Ruby on Rails Link Library Spanning Sync SEO-Dokumentation Gowalla
ProWebApps WellDone (β) Pinboard (α) Netzwerk Münsterland
Blogs Bücher Frameworks iPhone Mac Web-Apps