Grundgerüst einer html-Datei (Website)

Das Grundgerüst einer html-Datei:

Das Grundgerüst einer html-Datei
mit Erweiterungen für html 4.01
und Erweiterungen für xhtml 1.0.
sowie Probleme mit xhtml 1.0 strict
Die Dokument-Typ-Definitionen
Probleme mit xml, Doctype-Deklarationen und Browsern
Internationalisierung mit xhtml
Die Zukunft von XHTML
Der Stand der Dinge für mich

Eine html-Datei besitzt immer folgendes Grundgerüst:

<html> <head> <title>Dieser Text erscheint in der Titelleiste des Webbrowsers</title> </head> <body> Dieser Text erscheint in der Website selbst ... </body> </html>

Zurück zum Anfang dieses Dokumentes.

Das vollständige Grundgerüst für "fortgeschrittene" HTML-Seiten sieht in Zeiten von HTML 4.01 so aus:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/transitional.dtd"> <html> <head> <title>Den Titel immer als erstes Tag im Head-Bereich angeben</title> <meta name="description" content="Beschreiben Sie hier den Inhalt der Webseite ..."> <meta name="keywords" content="Listen Sie hier relevante Stichworte auf: html, grundgerüst, web, www"> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <link rel="stylesheet" type="text/css" href="inc/formate.css"> </head> <body> Dieser Text erscheint in der Website selbst ... </body> </html>

Kurze Erläuterung der "fortgeschrittenen" Version:

Die erste Zeile ist eine Dokument-Typ-Definition und soll dem Programm, das die Webseite darstellt, mitteilen, daß die Seite dem "transitionalen" HTML 4.01-Sprachstandard entspricht. Das ist zwar sehr regelgerecht, macht aber nur Sinn, wenn die Seite gemäß der benannten Standards z.B. beim WWW-Consortium geprüft (validiert) wurde und eben diese Standards auch einhält;. Der Privatmann, der z.B. mittels FrontPage am Wochenende eine Vereins-Homepage aktualisiert, dürfte solchen Anforderungen nicht gewachsen sein und kann die erste Zeile mit der DTD-Anweisung getrost weglassen.

Anders bei professionellen Webdesignern: Diese sollten sich bewußt sein, daß sie elektronische Dokumente erstellen, die von einer nicht vorhersehbaren Anzahl verschiedener Software-Produkte (z.B. Web-Browser) auch elektronisch ausgewertet werden. Wer reguläres Geld für die Erstellung einer Webseite bezahlt, kann auch erwarten, daß die Auftragnehmer sich an technischen Standards orientieren (s.a. die Liste der Dokument-Typ-Definitionen).

Die Meta-Tags "description" und "keywords" sind wichtig für die Auswertung der Seite durch die spiders, robots und crawlers und robots der Suchmaschinen.
Die beschriebene Reihenfolge (zuerst "description" und danach "keywords") findet sich in den meisten Dokumentationen genau anders herum, da ich aber von mindestens einem Spider weiß, daß er eine Webseite in der meta-tag-Reihenfolge "keywords" und danach "description" nicht richtig auslesen kann, habe ich mich für das erste Verfahren entschieden und damit auch durchweg gute Erfolge gehabt.

Die folgende Zeile beschreibt den verwendeten, sprachbezogenen Zeichensatz, ISO-8859-1 steht z.B für den westeuropäischen Zeichensatz.
Z.B. könnte ein Chinese, der des lateinischen Alphabets mächtig ist und dessen Browser solche Zeichensatz-Angabe versteht, eine westliche Webseite auf seinem Browser mit den eigentlich gültigen, westlichen Zeichen lesen.
Außerdem ermöglicht es dem Autor einer Webseite, Wörter gemäß der deutschen Schreibweise zu notieren.
Das ist allerdings nicht dafür gedacht, um alle Sorgfalt fahren zu lassen (auch wenn es die Arbeit erleichtert, Wörter wie "gemäß" nicht immer umständlich als "gemäß" im html hinterlegen zu müssen), sondern kann vielmehr dem Zweck dienen, daß wichtige Begriffe, über die eine Webseite etwas aussagt, so geschrieben werden können, wie es im Deutschen üblich ist.
Schließlich geben Menschen, die Suchmaschinen benutzen, die Begriffe auch so ein, wie sie in der Muttersprache geschrieben werden.

Das Thema Zeichensätze ist übrigens was größeres:
Stand 2007 verstehen modernere Browser durchweg auch die Zeichensatz-Angabe "UTF-8", die alle in Unicode darstellbaren Zeichen kennt.

Als letzte Erweiterung des head-Bereiches ist hier das "Einbinden" einer CascadingStyleSheet-Datei angeführt.
Die Entwicklung der HTML- und XML-Standards gehen dahin, html-interne Auszeichnungsmerkmale z.B. zur Schriftgröße aus dem html-Dokument komplett zu verbannen und stattdessen entsprechende Definitionen gemäß dem CSS-Standard vorzunehmen.

Zurück zum Anfang dieses Dokumentes.

Das vollständige Grundgerüst für "fortgeschrittene" HTML-Seiten gemäß xhtml 1.0 (in der gnädigen Transitional-Variante):

<?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Den Titel immer als erstes Tag im Head-Bereich angeben</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <meta name="description" content="Beschreiben Sie hier den Inhalt der Webseite ..."> <meta name="keywords" content="html, grundgerüst, web, www"> <link rel="stylesheet" type="text/css" href="inc/formate.css"> </head> <body> Dieser Text erscheint in der Website selbst ... </body> </html>

Anmerkungen:

Die erste Zeile enthält eine vereinfachte Auszeichnung, die den Bezug zu XML, der bezogenen Version sowie dem zu verwendendem Zeichensatz herstellt. Das ist eigentlich doppelt gemoppelt, da später ja per "<meta http-equiv="content-type" ..." der Zeichensatz nochmals genannt wird. Da aber die xhtml- sowie css-Validatoren des W3C sich zumindest um 2003 herum einander nicht "grün" waren, konnte nur so allen Problemen entgegnet werden. Siehe hierzu auch Probleme mit xml, Doctype-Deklarationen und Browsern; kurz gesagt: als erste Zeile sollte die DocType-Deklaration stehen, sonst verschlucken sich diverse Versionen des Microsoft Internet Explorers - also weg mit der xml-Zeile.
Die zweite Zeile enthält die Dokumenttyp-Deklaration, die den Bezug zu einer Document Type Definition (DTD) herstellt.
Ebenfalls neu ist die Erweiterung des <html>-Wurzelelementes zu <html xmlns="http://www.w3.org/1999/xhtml">.
Beachtenswert sind in den meta- und link-Tags im head-Bereich die xml-"wohlgeformten", expliziten Abschlüsse </meta> am Ende der Tags !

Ein paar goldene Regeln für gültiges XML:

Immer brav die Elemente <html>, <head>, <title>, <body> sowie deren End-Tags angeben.
Bei allen Tags, die Inhalte haben können (z.B. <p>, <li>, <option>) muß am Ende des Inhaltes ein Abschluß-Tag (</p>, </li>, </option>) stehen.
Sogenannte "leere Tags" wie <img> und <br> werden in "sich selbst" beendet: <img ... /> und <br />.
Namen von Elementen IMMER klein schreiben.
Namen von internen Ankern (z.B. <a name="XHTML">) sollten in XHTML eigentlich ein id="XHTML" besitzen.
Damit es auch in älteren Browsern funktioniert, sollte beides notiert sein (<a name="XHTML" id="XHTML">).

Im obigen xhtml-Grundgerüst werden die Meta-Tags, die selbst nur aus Attributen bestehen und keinen Inhalt umschließen, nicht intern mit " /", sondern mit einem explizitem "</meta>" beendet, da mindestens ein Suchmaschinen-Spider nachweislich über das " /" stolperte und die Meta-Tags nicht verstand. Um so ärgerlicher, wenn z.B. ein Referenztool für sauberes html wie das vom W3C empfohlene html-tidy handgeschriebene <meta ...></meta>-Konstrukte zu <meta /> zurückverwandelt, was dann wieder Ärger mit Suchmaschinen-Spider verursacht.

Apodyktiker und Hardcore-Masochisten können versuchen, die Regeln der sog. "Strict"-Variante einzuhalten, die sowohl für HTML 4.01, XHTML bzw. XML die Spitze des apodyktischen (die reine Lehre betreffend) Eisberges darstellt. Entsprechend sieht die erste Zeile mit der Dokument-Typ-Definition dann so aus:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

In dieser Variante fehlen eine Reihe von teilweise gebräuchlichen html-Elementen, die in der praktikableren "Transitional"-Variante zwar bereits auf der Abschußliste stehen (als "deprecated" eingestuft), aber noch zulässig sind.

So können z.B. im strikten XHTML Framesets oder auch das target="_blank"-Attribut nicht mehr verwendet werden.

Das stellt einen gewissenhaften Webmaster vor beinahe unlösbare Probleme:
Wie soll dann z.B. ein Link zur Fahrplan-Auskunft der Bundesbahn realisiert werden, der aus einer Reihe von Gründen in einem eigenen Browserfenster dargestellt werden sollte ?

Ansätze zur Lösung:

Sprungziele per Javascript (kann beim Client aber auch abgeschaltet sein, dann tut's gar nicht !) in einem neuen Browserfenster öffnen.
Oder besser die Validierung des Dokumentes nach der "Transitional"-Variante durchführen.

Weitere Probleme ergeben sich mit der Einbettung von Script- und Style-Bereichen.
Die JavaScript-Interpreter in neueren Browsern stolpern über die html-Kommentarzeichen, die mit Rücksicht auf Uralt-Browser verwendet wurden, damit diese solche eingebetteten Bereiche ignorieren können.
Das kann verhindert werden, in dem man diese html-Kommentare nicht verwendet.
Die beste Vorgehensweise ist nach meiner Ansicht das Referenzieren externer Dateien, die den entsprechenden Code enthalten.
Beispiele finden Sie für javascript und CSS.
Doch nicht genug der Probleme:
In html 4.0 werden solche eingebetteten Bereiche intern als "PCDATA" behandelt, in xhtml hingegen als "CDATA".
Das führt elendigerweise dazu, daß Sie in xhtml in der strict-Variante innerhalb eines Script- oder Style-Bereichs HTML-eigene Zeichen wie <, >, & und " maskieren müssen.
Dies geschieht durch folgendes Konstrukt:


<script type="text/javascript">
// <![CDATA[
  /* JavaScript-Kommentar: jetzt folgt ein kleines Script */
  if (parseInt(navigator.appVersion) <5)
    alert("Oh, ein sehr alter Browser");
  /* und damit ist das Script auch schon zu ende */
// ]]>
</script>

Und genau damit fängt der Ärger auch schon an, wenn man die altmodischen html-Kommentare nicht weggelassen hat

<--
...
-->

Im Beispiel wird lediglich der XML-Parser befriedigt, aber ein Javascript-Interpreter wird über die alten html-Kommentare stolpern und einen Javascript-Fehler melden.

Wenn Sie diesem Dilemma entgehen möchten, lassen Sie die altmodischen html-Kommentare weg oder besser:
lagern Sie den Javascript-Code komplett aus, indem Sie den Code in eine eigene Datei schreiben und im html nur noch auf diese Datei verweisen:

<script src="quadrat.js" type="text/javascript">

Gleiches gilt leider auch für css-Deklarationen:

Wer sich die Mühe macht, Webseiten in xhtml zu kodieren und mit <!-- und <![CDATA[ arbeitet, wird sich wundern, wenn ein gewissenhafter Blick in die javascript-Konsole z.B. des Firefox-Browsers auf einmal seltsame Fehler gemeldet werden:


Fehler: Selektor erwartet.  Regelsatz wegen ungültigem Selektor ignoriert.

Fehler: Unerwartetes Dateiende beim Suchen nach 'Schließendes } eines ungültigen Regelsatzes'.

Diese merkwürdigen Fehler verschwinden erst wieder, wenn man <!-- wegläßt und <![CDATA[ so notiert: // <![CDATA[.
Auch hier gilt: die gewünschten Anweisungen gleich nach dem folgenden Schema in eine externe Datei verlagern:

<link rel="stylesheet" type="text/css" href="formate.css">

Zurück zum Anfang dieses Dokumentes.

Probleme mit xhtml 1.0 strict ... und der Ärger geht los

Das Einhalten technischer Standards ist erstrebenswert, wenn damit sichergestellt werden kann, daß z.B. Webseiten von Browsern zuverlässiger angezeigt werden.

xhtml 1.0 in der strict-Variante (damit entspricht es dann xhtml 1.1) bringt viele Vereinfachungen, aber auch Einschränkungen (z.B. das Wegfallen des target-Attributes bei Hyperlinks) mit sich.

Hier ein paar Beispiele:

Das form-Tag darf kein Attribut name mehr enthalten
Damit mißlingt dann auch prompt die javascript-Anweisung document.formular.email.focus();, mit der die Einfügemarke (Cursor) in ein Formularfeld gesetzt werden konnte (bestes Beispiel: www.google.de).
Das klappt erst dann wieder, wenn das zu fokussierende Feld ein id-attribut erhält und die javascript-Anweisung so aussieht: document.getElementById("email").focus();.
Innerhalb eines p-Tags darf kein table-Tag notiert werden.

Zurück zum Anfang dieses Dokumentes.

Dokument-Typ-Definitionen:

Eine amtliche Auflistung gültiger doctype-declarations (DTD) findet sich selbstverständlich beim W3C.

Bezeichnung	Notation im html-Quelltext
html 2.0	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 2.0//EN">
html 3.2	<HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
html 4.01 frameset	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.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 transitional	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
xhtml 1.0 frameset	<?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
xhtml 1.0 strict	<?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
xhtml 1.0 transitional	<?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
xhtml 1.1 only strict	<?xml version="1.1" encoding="ISO-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Wer sich die Mühe macht, html-Dokumente nach einem der xhtml-Standards zu kodieren, kann der Gründlichkeit noch eins drauf setzen und das Wurzel-Element <html> zu <html xmlns="http://www.w3.org/1999/xhtml"> erweitern.

Probleme mit xml, Doctype-Deklarationen und Browsern:

Die empfohlenen Standards machen leider auch Ärger.
Dem Microsoft Internet Explorer wird in der Version 6 nachgesagt, daß er eine Angabe zur Dokument-Typ-Definition nur verarbeitet, wenn diese in der allerersten Zeile des Dokumentes steht, wie es mit dem im Jahre 2007 anstehenden IE 7 aussehen soll, wird sich zeigen.
Das bedeutet, daß er bei Dokumenten, in deren erster Zeile eine xml-Angabe steht, fälschlicherweise in den sog. "Quirks"-Modus schaltet, anstatt diese Seite korrekt im sog. "Standard"-Modus anzuzeigen.
So wird die xlm-Zeile in manchen Webmaster-Forenbeiträgen auch als unsinnig und überflüssig bezeichnet.
Weitere Informationen zur damit verbundenen Problematik des Doctype-Switching finden sich bei Michael Jendryschik in einem IX-Artikel auf heise.de sowie beim W3C: Choosing the right doctype for your HTML documents.

Die xml-Zeile hatte ich selbst so um 2002 herum eingefügt, da beim W3C der css-Validator strenger war als der html-Validator und ich nur so einen im css-Validator gemeldeten Fehler eliminieren konnte. Im Jahre 2007 finden sich auf den Webseiten des w3.org xhtml-strict-Seiten mit (z.B. die Startseite w3.org) und ohne eine erste xml-Zeile (z.B. Startseite des w3.org-css-Validators).

Selbst im amtlichen deutschen Standardwerk für html-Fragen SelftHtml finden sich widersprüchliche Aussagen:

In Die XML-Deklaration und die Zeichenkodierung sowie Dokumenttyp-Deklaration mit interner DTD heißt es
"Das allererste, was am Anfang einer XHTML-Datei notiert werden sollte, ist eine so genannte XML-Deklaration."
und
"Die Dokumenttyp-Deklaration <!DOCTYPE ... muss zu Beginn einer XML-Datei hinter der XML-Deklaration () folgen."
während der Artikel Die XML-Deklaration und die Zeichenkodierung darauf hinweist:
"Wenn das Dokument hingegen als HTML verarbeitet wird, kann die XML-Deklaration die Seite Dokumenttyp-Weiche des Internet Explorers negativ beeinflussen, so dass Sie sie gegebenenfalls weglassen sollten."

Meine Meinung zur Problematik der xlm-Zeile:

Ok: die xml-Anweisung ist wichtig, wenn ein Dokument xml-Daten enthält (z.B. eine Adressenliste o.ä.), die entsprechend korrekt von einer Daten-verarbeitenden Anwendung verstanden werden sollen. Da macht dann auch die xml-Angabe <?xml version="1.0" encoding="ISO-8859-1" ?> Sinn, die der Anwendung mitteilt, gemäß welcher xml-Version die folgende Doctype-Deklaration unterliegt.

Bei einer Webseite, die im Jahre 2007 ca. 7 Jahre nach der Verabschiedung der Standards für xhtml 1.0 auch xhtml-gerecht sein sollte, führt die xml-Angabe zu Problemen bei der Darstellung (natürlich im Microsoft Internet Explorer). Hintergrund: wenn der IE6 auf ein korrekt deklariertes Dokument mit einer xlm-Vereinbarung in der ersten Zeile trifft, dann schaltet er in den sog. Quirks-Modus und stellt das Dokument auf eine abwärtskompatible, aber fehlerhafte Weise dar (ohne Box-Modell).

Da die Inhalte der Webseite als html (<!DOCTYPE html ...) zu interpretieren sind, tendiere ich zugunsten einer zuverlässigen Darstellung zum Rausschmiß der xml-Anweisung. Im Januar 2007 waren auch beide Validatoren (html) und css) des w3.org mit xhtml-1.0-strict-Dokumenten ohne eine xml-Angabe einverstanden.

Und das Beste: Das geht auch mit der xhtml-1.1-Variante
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
in Ordnung !

Internationalisierung mit xhtml:

Sowohl für Browser wie auch Suchmaschinen kann es sinnvoll sein, daß eine Webseite explizit sagt, in welcher Sprache die Inhalte (hauptsächlich) verfasst sind. Das W3C merkt hierzu an: When serving HTML use the lang attribute.

Im Web finden sich verschiedene Vorschläge zur Implementierung von Angaben zur Internationalisierung. Ich möchte nicht nur an dieser Stelle den xhtml-orientierten Vorschlägen des W3C folgen, die lang-Attribute für die Sprachangabe in der Zeile der html-Deklaration vorsehen.

In Kürze:

wer deutsches HTML ausliefert, sollte <html lang="de"> notieren.
wenn XHTML als text/html daherkommt, darf man dann sowohl das lang- wie auch das xml:lang-Attribut bemühen: <html lang="de" xml:lang="de" xmlns ="http://www.w3.org/1999/xhtml">
und wenn per XHTML XML geliefert wird, dann reicht in dieser Form: <html xml:lang="de" xmlns ="http://www.w3.org/1999/xhtml">
bei den Attributwerten ist grundsätzlich die kürzeste Form zu bevorzugen:
- für "französisch, wie es in Kanada" gesprochen wird, ist "fr-CA" genau richtig,
- ansonsten sollte man sich in diesem Beispiel mit allgemeinem Französisch begnügen: "fr"

Die Zukunft von XHTML:

Am 03.07.2009 meldete die Computerzeitschrift c't: XHTML 2 wird eingestellt

Hier ein Auszug:

"Gestern zog das Gremium für Webstandards den Schlussstrich unter XHTML 2, das schon seit Jahren auf dem Weg zum Fiasko war ... XHTML 2 war der ambitionierte Versuch, einige der Geburtsfehler von HTML zu korrigieren. Vor allem wollten die Macher der Arbeitsgruppe die SGML-Basis von HTML zugunsten von XML endgültig ad acta legen und den mit XHTML 1.1 eingeschlagenen Weg von Modularisierung und Namensräumen weitergehen ... In ihrem verbleibenden halben Jahr will sich die Arbeitsgruppe auf Korrekturen in den XHTML-1.1-Spezifikationen konzentrieren."

Der Stand der Dinge für mich:

Das xhtml den durch den Browserkrieg verschuldeten html-Wildwuchs beendete, finde ich gut. Daß vereinfachte und verbindliche Standards die Lesbarkeit elektronischer Dokumente auf lange Zeit sichern helfen, kann nur begrüßt werden.

Damit favorisiere ich ein xhtml-1.0-strict-konformes html-Grundgerüst, das so aussieht:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="de" xml:lang="de" xmlns ="http://www.w3.org/1999/xhtml"> <head> <title>Den Titel immer als erstes Tag im Head-Bereich angeben</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <meta name="description" content="Beschreiben Sie hier den Inhalt der Webseite ..."> <meta name="keywords" content="html, grundgerüst, web, www"> <link rel="stylesheet" type="text/css" href="inc/formate.css"> <script type="text/javascript" src="javascript.js"></script> </head> <body> Dieser Text erscheint in der Website selbst ... </body> </html>

Zurück zum Anfang dieses Dokumentes.

Zurück zur Startseite