13.07.2010 by Marco Hillebrecht  Kategorien: Blog Tipps und Tricks 


Tipp 2: Kein Dokument ohne DOCTYPE

Bisher haben wir uns in der Artikelreihe damit befasst, was für eine Webseite essentiell ist, nämlich fehlerfreier Code. Nun ist es Zeit, auf die in diesem Artikel angerissenen Punkte näher einzugehen und Schritt für Schritt zu zeigen, wie ein Webdokument aufgebaut ist, und was bei dessen Aufbau zu beachten ist. In den nächsten Folgen dieser Artikelreihe soll es also darum gehen, wie ein vollständiges Webdokument definiert wird.

Neben den reinen Nutzdaten, benötigt ein solches Dokument noch eine Reihe weiterer Angaben, die es dem verarbeitenden Programm, meist einem Browser, ermöglichen, den enthaltenen Code fehlerfrei und eindeutig zu interpretieren.

Teil 2 unserer Artikelreihe »10 Tipps für eine perfekte Webseite« befasst sich mit einem wesentlichen Bestandteil eines jeden Webdokumentes, dem DOCTYPE.

Was ist der DOCTYPE?

Der DOCTYPE– genauer die Dokumenttypdefinition (englisch Document Type Definition, DTD) – kann als ein Satz von Regeln betrachtet werden, die beschreiben, wie ein Dokument eines bestimmten Typs aufgebaut sein muss.

Genauer gesagt teilt die DOCTYPE-Definition dem verarbeitenden Programm mit, welche Art von Code das zu verarbeitenden Dokument enthält und entsprechend welcher Regeln der Code erstellt wurde. Somit wird durch den DOCTYPE quasi die Syntax definiert, der das Dokument gehorcht. Ein Programm erhält somit einen wertvollen Hinweis darauf, wie der vorliegende Code zu behandeln ist.

Hierbei kann es durchaus zu gravierenden Unterschieden in der Darstellung kommen, da nicht alle Elemente, die durch HTML definiert werden, in allen Dokumenttypen erlaub sind. Dazu aber später mehr.

Es gibt eine Vielzahl von Dokumenttypen. Für die Verwendung innerhalb einer Webseite kommen aber nur ein paar wenige infrage.

Muss der DOCTYPE angegeben werden?

Ein HTML- oder XHTML-Dokument wird nach einem festen Schema aufgebaut. Dieses Schema ist in der Dokumenttypdefinition spezifiziert. In dieser Spezifikation ist auch enthalten, welcher der verschiedenen Spezifikationen das aktuelle Dokument unterliegt.

Um ein gültiges (valides) Dokument zu erstellen, ist es immer erforderlich, den verwendeten Dokumenttypen zu spezifizieren, und sich an die Regeln des angegebenen Dokumenttyps zu halten. Im Umkehrschluss bedeutet dies, dass ein Webdokument, also eine Webseite, nie ein gültiges Dokument sein kann, wenn es auf die Angabe des DOCTYPE verzichtet. Zwar ist es keine zwingende Voraussetzung, einem Browser ein valides Dokument vorzusetzen, was aber passieren kann, wenn man dies dennoch tut, ist einleuchtend.

Kennt der Browser den vorliegenden DOCTYPE nicht, wird versuchen, den vorliegenden Code dennoch zu interpretieren. Dies geschieht in der Annahme, dass das vorliegende Dokument einem Standard-DOCTYPE genügt. Auf Basis dieser Annahme wird er nun versuchen, das Dokument zu interpretieren. Sicher wird er zu einem Ergebnis kommen, das Ergebnis mag aber weit von der Erwartung entfernt sein. Um dies zu vermeiden, empfiehlt sich die Angabe des DOCTYPES. Zum einen um Fehlinterpretationen vorzubeugen und auszuschließen, aber auch um die Regel einzuhalten, dass für gültige Dokumente die Angabe des DOCTYPES zwingend erforderlich ist. Hier schließt sich nun der Kreis.

Wie füge ich den DOCTYPE in ein Dokument ein?

Nachdem wir uns nun darüber einig sind, dass ein DOCTYPE für jedes Webdokument nicht nur Sinn macht, sondern auch zwingend vorgeschrieben ist, wollen wir uns ansehen, wie und wo diese Definition in ein Webdokument eingefügt wird.

Sinn macht die Angabe des DOCTYPES natürlich nur am Beginn eines Dokumentes. Auf diese Weise wird dem verarbeitenden Programm die Möglichkeit gegeben, diesen auf einfache Weise zu extrahieren.

<?xml version=”1.0″ ?>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
   ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

Der genaue Aufbau eines (X)HTML-Dokumentes ist Thema in Teil 3 dieser Artikelreihe.

Varianten

Für die Verwendung in Webdokumenten existieren sieben wichtige Dokumenttypdefinitionen. Welche Variante Verwendung findet, hängt zum einen von der Intention des Dokumentes ab, zum anderen aber auch von den technischen Gegebenheiten. Generell ist es immer zu empfehlen, die Variante zu wählen, die striktere Vorgaben in Bezug auf die Syntax macht. Zwar wird der Aufwand bei der Erstellung des Codes etwas höher ausfallen, da nicht alle Elemente irgendwo verwendet werden können, die Ausführungsgeschwindigkeit ist aber evtl. höher. Der Grund dafür ist, dass durch die strikteren Vorgaben bei der Interpretierung des Codes entsprechenden Optimierungen vorgenommen werden können. Und natürlich, das Finden von Fehlern wird zum Teil deutlich vereinfacht.

Folgende Varianten stehen zur Verfügung

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
   ”http://www.w3.org/TR/html4/loose.dtd”>

HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
   ”http://www.w3.org/TR/html4/strict.dtd”>

HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN”
   ”http://www.w3.org/TR/html4/frameset.dtd”>

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
   ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
   ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
   ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

XHTML 1.1

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
   ”http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>


Welche Wahl ist die richtige?

Eine allgemeingültige Lösung zur Auswahl des richtigen DOCTYPEs gibt es nicht. Wir, d.h. die Entwickler von i:MotioN, haben aber natürlich einen klaren Favoriten:

XHTML 1.0 Strict

Warum aber verwenden wir diesen DOCTYPE für unsere Projekte? Die Gründe sind folgende:

  • XHTML-Elemente müssen korrekt verschachtelt sein
  • XHTML-Elemente müssen immer geschlossen werden (auch leere Elemente)
  • XHTML-Elemente werden immer klein geschrieben
  • Attribute müssen in Anführungszeichen gesetzt werden
  • Attribute dürfen nicht abgekürzt werden

All diese Gründe haben ein Ziel, nämlich qualitativ hochwertigen Code. Durch die strikten Vorgaben in Bezug auf den Aufbau des Codes ist es möglich, Fehlerquellen zu vermeiden, die Fehlerfindung zu erleichtern und nicht zuletzt die Ausführungsgeschwindigkeit zu steigern. Nicht zuletzt führt eine hohe Qualität auch dazu, dass Anzeigen konsistenter und somit vorhersagbarer werden, schon zur Entwicklungszeit. Das spart nicht nur Arbeit und somit Zeit während der Entwicklung sondern vereinfacht auch das Finden von Fehlern.

Fazit: Strikte Vorgaben darüber, wie Code zu gestalten ist, mögen auf den ersten Blick als gängelnd und überflüssig erscheinen. Bei genauerer Betrachtung hilft dies jedoch vor allem Fehler zu vermeiden und sogar Geschwindigkeitsvorteile zu erzielen. Jeder, der sich mit der kommerziellen Entwicklung von Webseiten beschäftigt, muss ein Interesse daran haben, qualitativ hochwertige Ergebnisse zu liefern. Die einfache Verwendung des richtigen DOCTYPE fördert und fordert auf simpelste Weise. Ein Aufwand der sich lohnt.

Und um diese Thema geht es das nächste Mal:

Tipp 3: Das (X)HTML-Code-Gerüst




Pingbacks


Pingback | 24.06.2011
HTML 5 Doctype

[...] Dokumente dennoch angezeigt werden können. Wer HMTL5 noch nicht verwenden möchte, findet eine Liste der existierenden DOCTYPE Deklarationen bei [...]

Pingback | 04.10.2010
ZabaZoom – SHOP-BLOG » Schritt 1: Optimierung des Shop Systems

[...] möchte  ich an dieser Stelle auf eine externe Quelle verweisen, die sich mit dem Thema “fehlerfreier Quellcode” [...]

Pingback | 13.07.2010
i:MotioN : 10 Tipps für eine perfekte Webseite! Teil 1: Fehlerfreier Code.

[...] um dieses Thema geht es im nächten Artikel dieser Reihe: Tipp 2: Kein Dokument ohne DOCTYPE!   Navigation:   [...]

Pingback | 13.07.2010
i:MotioN : 10 Tipps für eine perfekte Webseite

[...] 1: Fehlerfreier Code Tipp 2: Kein Dokument ohne DOCTYPE [1] Artikel auf Spiegel-Online zum Thema Browsersicherheit   Navigation:   [...]
 
So erreichen Sie uns:

Home Icon Büro Magdeburg
Albert-Vater-Straße 87
39108 Magdeburg

Telefon-Icon +49 (172) 31 30 475
bpullwitt@imotion-design.de
Icon W3C XHTML 1.0 Icon W3C CSS 1.0
SpezielleServices
intelligenter Service
Website-Check
Website-Leasing
Suchmaschinenoptimierung
Suchmaschinenmarketing
Aktualisierungsservice
Datenanalyse

Wir wollen, dass Sie von unserer Arbeit begeistert sind. Dies erwarten wir selbstverständlich auch von unserem Service.
Lassen Sie sich begeistern!
Kundenlogin: