Doctype und Quirks

Auf dieser Seite:

HTML und Co

HTML hat verschiedene Generationen, typisierte Versionen und Derivate gezeitigt. Browser müssen wissen nach welchen Regeln der Quelltext geschrieben wurde und also interpretiert werden soll. Am Seitenanfang des Quellcodes steht darum eine DOCTYPE Deklaration.

<!DOCTYPE ... >

Auf dieser Seite werden die unterschiedenen Doctypes vorgestellt.

HTML 4.01

HTML 4.01 ist noch die gebräuchlichste HTML. Der Dokument-Typ Transitional erlaubt einige Abweichungen (gewisse Fehler werden einfach übergangen bzw. verziehen) gegenüber dem danach eingeführten und eigentlich wünschenswertem Typ Strict. Als dritter Typ ist das Frameset zu nennen, Frames arrangieren einzelne HTML Dateien zu einer einzigen Seite zusammen; eine Technik, die bei neuen Sites nicht mehr verwendet werden soll.

Die Doctype gibt den Browsern auch noch eine Adresse an, wo sie sich Interpretationsanweisungen holen können:

<!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//EN" "http://www.w3.org/TR/html4/strict.dtd">

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

XHTML

XHTML verwendet grundsätzlich die selben Tags wie HTML 4.01.

XHTML 1.0

Aus einer Teilmenge der Familie der SGML-Sprache (standard generalized markup language = normierte verallgemeinerte Auszeichnungssprache) in der HTML verfasst wurde, entstand XML (die besser zum Datenaustausch und der automatisierten Verarbeitung taugt). Mit XML wurde sodann XHTML geschrieben, XHTML (eXtensible also erweiterbares HTML) ist bloss die Übersetzung von HTML in XML. Für neue Dokumente empfahl sich fortan XHTML 1.0 Strict als fortschrittlicher.

XHTML benötigt vor Allem, also noch vor dem Doctype die Angabe der XML Version:
<?xml version="1.0" ?>

Da also aus HTML entstanden, kennt XHTML 1.0 wie HTML wieder die 3 Varianten (ist ja eben 'nur' eine Übersetzung).

<!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 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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

XHTML benötigt zudem im html-Tag noch diese Attribute:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

XHTML 1.1

XHTML 1.1 kennt nur noch strict und verzeiht keine Fehler mehr. Bei Fehlern wird die Seite im Browser gar nicht mehr angezeigt. Auch wird mit dem Gesetz gebrochen, dass unbekannte Tags einfach ignoriert werden! XHTML 1.1 ist modular erweiterbar mit SMIL (Multimedia), SVG (Vektorgrafik) und MathML (mathematischer Formelsatz). XHTML 1.1 ist gänzlich Darstellungsunabhängig aber bietet nur einen Vorteil, wenn die selbe Datei auch für andere Ausgabemedien (Drucker) gebraucht werden soll; für den Browser alleine ist es zu unverzeihend.

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

XHTML empfehle ich nicht. Die Zukunft bringt HTML 5!

XHTML 2

XHTML 2 sollte dann wirkliche Neuerungen bringen, deren Entwicklung wurde aber Ende 2009 gestoppt, da HTML 5 noch mehr versprach.

Transitional versus Strict

HTML 4.01 transitional versus XHTML 1.0 strict

Hauptunterschiede zwischen transitional und strict sind:

HTML strict/XHTML verlangt innerhalb der <tagpfeilklammern> konsequente Kleinschreibung (transitional ist nicht casesensitiv, macht also keinen Unterschied zwischen VERSAL oder vErSal).
HTML strict/XHTML kennt deshalb die Javascript Eventhandler onClick, onMouseOver etc. nicht, richtig ist onclick, onmouseover etc.
HTML strict/XHTML akzeptiert keine Tags ohne End-Tag mehr: <p> (für paragraph = Absatz) muss mit </p> beendet werden. Auch Listenzeilen <li>...</li> und Selectoptionen <option>...</option> sind zwingend zu schliessen.
'Inhaltsleere Tags' beinhalten im Opentag den Slash des Endtag quasi selbst: <br /> (für brake = Zeilenumbruch) oder <hr /> (Linie) und <input type="..." /> (Formularfelder).
HTML strict/XHTML verlangt immer ein Attributnamen-Attributwert-Paar, der Wert muss unbedingt in Anführungszeichen stehen. Z.B.: <input type="radio" checked="checked" />
HTML strict/XHTML verlangt, dass jeder Text innerhalb eines blockbildenden Tag-Paares steht: <p>...</p> (Absatz), es gibt keinen Text welcher ausserhalb eines Blocks steht.
Als Block gelten auch div-Container, pre, Überschriften, die Listen, Tabellen, Formulare und Fieldset, Blockquote, address, del, ins. (siehe logische Tags).
Und umgekehrt dürfen keine Block-Elemente innerhalb Inline-Elementen vorkommen, und die Hierarchie muss gewahrt bleiben.
Falsch sind z.B. <span><p>...</p></span> und <p><h1>...</h1></p> und <p><form>...</form></p>
Der Validator wird eine solche Bemängelung ausgeben:
Line 174, Column 4: document type does not allow element "h1" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag
HTML strict/XHTML deprecated (missbilligt) die meissten Format-Tags wie <font size="" face="" color="">...< bgcolor="..."/font> zur Schrift- oder Schriftfarb- Auswahl; Formatangaben sollen nicht inline, sondern durch CSS (Cascading Style Sheets) gemacht werden; der Inhalt und die Formatierung sollen getrennt sein.
XHTML in allen Varianten fordert die Angabe des Namespaces im Starttag des Wurzelelements HTML: <html xmlns="http://www.w3.org/1999/xhtml">
XHTML verlangt die Umschreibung von Sonderzeichen wie & durch & auch in Adresszeilen und < durch < auch in Javascripts welche nicht im Head stehen (#PCDATA).
XHTML 1.0 strict verbietet das Style-Tag (für CSS) im Body, es muss im Head stehen.
XHTML 1.0 strict ersetzt in den Tags a, frame, img, map und form das Attribut name durch id. (Darum wird für besseren Zugriff auf die Elemente und deren Namen via DOM lieber die Variante XHTML 1.0 transitional verwendet!)
XHTML 1.0 strict verbietet das target Tag (in Links).

HTML 5

HTML 5 versus XHTML

<!DOCTYPE html> Wow!

HTML 5 fügt viele Tags zu HTML 4.01 hinzu und nimmt nur wenige weg.

HTML 5 soll erst 2014 endgültig sein, es wird aber Ende 2011 bereits von den neuesten Browsern (ca. 1/5 aller verwendeten Browser) unterstützt, so dass es bereits eingeschränkt einsetzbar ist. HTML 5 wird die Dokumentbeschreibungsstandards HTML 4.01, XHTML 1.0 und DOM Level 2 berücksichtigen und somit ablösen.

HTML 5 will rückwärts kompatibel sein und verzeiht fast alles, was XHTML oder der strict-Modus verbot! HTML 5 legt zwar Wert auf ein wohlgeformtes Dokument - ist aber gar nicht strikt in der Schreibweise. Beispielsweise können die Tags und die Attribute VERSAL oder klein geschrieben werden, und beide Anführungszeichen oder auch keine können für die Wertangabe verwendet werden:

Also ist das <p class = 'egal'>...</p> wie das <p CLASS = "EGAL">...</p> und das <p class=egal>...</p> (ohne Leerschläge) gleichermassen erlaubt.

Die wichtigsten neuen Tags in HTML 5

Schnittstellen zu verknüpften Multimediainhalten, Tags wie <video>, <audio> und <canvas>.
Semantisch strukturierende und gruppierende (logische) Elemente sind <article>, <section>, <aside>, <figure>, <nav>, <header>, <footer>, <dialog>, hinzugefügt. (Die weiterhin gültigen Tags wie <address>, <cite> und <blockquote> geben auch Auskunft über ihren Inhalt, sind aber nicht gruppierend.)
Und schliesslich wurden auch im Formular etliche neue input-types hinzugefügt: <input type='search'>, <input type='url'>, <input type='email'>, <input type='tel'>, <input type='time'> und <input type='datetime'>.

Die ungültigen Tags in HTML 5

basefont, big, center, dir, font, frame, frameset, noframes, strike, tt, u.

'small' bleibt gültig, bekommt aber die Bedeutung von 'Kleingedrucktem' z.B. für AGBs oder Haftungsausschluss.

Quirks Mode

Bei der Einführung von CSS wurden die W3C-Normen vom damaligen IE Browser (IE 4) nur ungenügend und nicht übereinstimmend umgesetzt.

Eine Text-Box (div container) mit Massangaben 100px Breite, 20px Padding und 5px Rahmen mass im NS 4.7 150px (was korrekt war und ist), im IE 4 jedoch blieb das Total bei 100px auf Kosten des Textes, welcher nur noch 50px breit war (das ist ein Quirk).
Zusätzlich 10px Margine liess die Box im NS auf 170px, im IE auf 120px wachsen (Margins wurden also gleich interpretiert). Um den diversen Interpretationen der Massangaben gerecht zu werden und in allen Browsern ein fast einheitliches Bild zu erhalten, musste entweder auf Padding und Border verzichtet werden, oder die Webmaster mussten verschiedenste Tricks anwenden (*HTML und andere Hacks).

Das Boxmodell zeigt wie Massangaben interpretiert werden sollten und werden.

Neuere Browser-Generationen konnten dann nicht plötzlich W3C Konform arbeiten, sonst hätten alle diese, dem Quirk angepasste Webpages plötzlich seltsam ausgesehen. So wird nun vom IE der Doctype abgefragt (ein Tag ganz am Anfang des Dokuments, zur Angabe des Grades des (X)HTML Standards), um eventuell in den Quirks Mode zu schalten, das heist, er stellt sich blöde und interpretiert den Code, als wäre er ein alter Browser.

IE Browser schalten in den Quirksmode wenn:

kein Doctype vorhanden ist
ein alter Doctype vorhanden ist (z.B. HTML 3.2 oder so)
dem neuen Doctype die Zeile vorangestellt wird: <?xml version="1.0" encoding="iso-8859-1"?>:
(Quirks Mode und trotzdem gültiger Code)
HTML 4.01 Transitional ohne URL - also so: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Browser rendern meisst im Standard/Strict Modus bei:

HTML 4.01 Transitional mit URL - also so: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 strict
XHTML
neuem/falschem/unbekanntem Doctype

(Meisst meint: je nach Browser werden die unterschiedlichen Doctype-Angaben mehr oder weniger strict ausgelegt.)
Ausführlichere Erklärungen und Angaben zur Kompatibilität finden sich auf folgender Seite:
http://www.quirksmode.org/

Browserweichen

Ich schreibe lieber W3C konformen Code, der von den zwei/drei marktbeherrschenden Browsern gleich interpretiert wird.

Um unterschiedliches Verhalten der unterschiedlichen Browser und ihrer Generationen abzufangen, kann der Browser erkannt und umgeleitet werden; es wird also ein Browserspezifischer Code angeboten (das kann sehr aufwändig werden).

InternetExplorer Conditional Comments

Ab Version 5 kann IE (die anderen nicht) in HTML-Kommentaren if Statements erkennen und auswerten. Der Code zwischen  wird ausgeführt, falls die Bedingung stimmt. Erlaubt sind alle Code-Sprachen wie HTML, XHTML, CSS und Scripte in PHP etc.

<!--[if IE 5]>
  <p>Das ist der Internet Explorer 5.</p>
<![endif]-->

Die Konditionen können noch spezifiziert werden:

! (Not-Operator): 
lt (Kleiner-als-Operator): 
lte (Kleiner-als oder Ist-Gleich-Operator): 
gt (Größer-als-Operator): 
gte (Größer-als oder Ist-Gleich-Operator):

Weiche für alle per PHP

Der Browser schickt eine Kennung an den Server bei seiner Anfrage, der Server speichert das in der environment Variablen 'HTTP_USER_AGENT'. Das kann mit PHP abgefragt werden:

<?php
  $browser = getenv('HTTP_USER_AGENT');
    if(eregi("firefox", $browser))
    {
      // $stylesheet="moz.css";
      echo "Ich bin ein FireFox Browser, das habe ich via PHP erkannt.";
    }
    elseif (stristr($_SERVER['HTTP_USER_AGENT'], "opera"))
    {
      // $stylesheet="iex.css";
      echo "Ich bin ein Opera Browser, das habe ich via PHP erkannt.";
    }
    elseif (stristr($_SERVER['HTTP_USER_AGENT'], "msie"))
    {
      // $stylesheet="iex.css";
      echo "Ich bin ein InternetExplorer Browser, das habe ich via PHP erkannt.";
    }
    else {
      // $stylesheet="moz.css";
      echo "Browser nicht erkannt";
    }
    echo "<style type="text/css">@import url(die_normale_css.css);</style>"
?>

Browser nicht erkannt

Check den Code.

Head >> << Formulare

Ich bin hier: > HTML Lehrling >> Doctype und Quirks