CSS INTENSIVSTATION

DOCTYPE

Die erste Zeile jeder HTML-Datei

Die DOCTYPE-Deklaration ist eine Anweisung an den Browser, nach welchem Standard das Dokument interpretiert werden soll. Sie steht immer ganz oben – noch vor dem <html>-Tag.

Der HTML5-DOCTYPE ist nicht case-sensitiv. Gross- und Kleinschreibung spielen keine Rolle.

<!DOCTYPE html>
<!doctype html>
<!Doctype HTML>

HTML5 DOCTYPE

Seit HTML5 ist die DOCTYPE-Deklaration extrem einfach.

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>Meine Seite</title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

Warum DOCTYPE?

1. Standards Mode aktivieren

Ohne DOCTYPE läuft der Browser im Quirks Mode – einem Kompatibilitätsmodus für sehr alte Websites.

  • Standards Mode – Modernes HTML & CSS wird korrekt interpretiert
  • Quirks Mode – Browser verhält sich wie alte Internet-Explorer-Versionen

2. Browser-Konsistenz

Der DOCTYPE sorgt dafür, dass alle Browser deine Seite möglichst gleich rendern.

3. Validation

Validatoren prüfen dein HTML gegen den DOCTYPE. Ohne DOCTYPE ist keine klare Regelbasis definiert.

HTML validieren kannst du mit dem W3C Validator: https://validator.w3.org/

Standards vs. Quirks Mode

Im Quirks Mode wird das alte Internet-Explorer-Box-Model verwendet. Das führt zu unberechenbarem Layout-Verhalten.

Rendering Mode prüfen

Du kannst in der Browser-Konsole prüfen, welcher Modus aktiv ist.

// In der Browser-Konsole (F12)
console.log(document.compatMode);

// "CSS1Compat"  → Standards Mode
// "BackCompat" → Quirks Mode

Alte DOCTYPEs

Vor HTML5 waren DOCTYPE-Deklarationen deutlich komplexer und verwiesen auf sogenannte DTD-Dateien. HTML 4.01 und XHTML 1.0 kannten mehrere Varianten (Strict, Transitional, Frameset). Mit HTML5 wurde diese Komplexität entfernt. Heute genügt <!DOCTYPE html>.

HTML 4.01 Strict, Transitional, Frameset

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

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

XHTML 1.0 Strict, Transitional, Frameset

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

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

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

XHTML 1.1 DTD

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

Geschichte

In den 1990er-Jahren interpretierten Browser HTML unterschiedlich. Als Web-Standards eingeführt wurden, musste gleichzeitig die Darstellung alter Websites erhalten bleiben.

Der DOCTYPE wurde zum „Schalter“:

  • Moderner DOCTYPE → Standards Mode
  • Fehlender oder alter DOCTYPE → Quirks Mode

Mit HTML5 wurde dieser Mechanismus stark vereinfacht – technisch notwendig, aber heute fast unsichtbar.

Kurz gesagt

  • DOCTYPE aktiviert den Standards Mode
  • Ohne DOCTYPE: Quirks Mode
  • HTML5: <!DOCTYPE html>
  • Steht immer in der ersten Zeile
  • Nur einmal verwenden