HTML5: Das erste HTML-Dokument
Um einen ersten Eindruck von der Sprache zu bekommen, gibt es zunächst praktische Beispiele für Dokumente.
Details werden danach erläutert.
So soll ein direkter Einstieg in die Praxis erleichtert werden.
Dementsprechend geht es in diesem Kapitel um den Aufbau eines einfachen HTML-Dokuments.
Prinzipiell ist der Name des Dokumentes frei wählbar. Weil allerdings Metainformationen über Dokumente bei gängigen Dateisystemen noch immer häufig über Teile des Dateinamens verwaltet werden, ist es empfehlenswert, nach bester Praxis bestimmte sogenannte Dateiendungen zu verwenden. Diese sind '.xhtml' (für die XHTML-Variante) oder '.html' oder '.htm' für die Markierungssuppen-Variante, dazu später mehr.
Soll ein Projekt erstellt werden, welches über ein Dienstprogramm für HTTP oder HTTPs ausgeliefert werden soll, gibt es von dem Dienstprogramm zumeist Vorgaben, wie die Startseite heißen soll. Meistens ist dies 'index.xhtml' (beziehungsweise 'index.html' oder 'index.htm'). Diese Datei wird dann automatisch ausgeliefert, wenn lediglich das Verzeichnis aufgerufen wurde.
Beispiel XHTML-Variante (mit XML-Deklaration in der ersten Zeile):
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xml:lang="de" lang="de"
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Meine erste Seite</title>
</head>
<body>
<h1>Hallo Welt</h1>
<p>Ein Absatz repräsentiert einen abgeschlossenen Gedankengang.</p>
<p>Ein Dokument kann natürlich viele Absätze enthalten.</p>
</body>
</html>
Beispiel ohne XML-Deklaration, kann für die XHTML-Variante mit UTF-8-Kodierung verwendet werden oder für die Markierungssuppen-Variante:
<!DOCTYPE html>
<html xml:lang="de" lang="de"
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>Meine erste Seite</title>
</head>
<body>
<h1>Hallo Welt</h1>
<p>Ein Absatz repräsentiert einen abgeschlossenen Gedankengang.</p>
<p>Ein Dokument kann natürlich viele Absätze enthalten</p>
</body>
</html>
Erklärung der einzelnen Strukturen und Elemente
Bearbeiten<?xml version="1.0" encoding="UTF-8" ?>
Das ist die XML-Deklaration in der XHTML-Variante. Eine solche Deklaration hat eine besondere, in XML definierte Syntax, welche hier nicht weiter erläutert wird, diese ähnelt der Notation einer Elementanfangsmarkierung, man beachte auch das Fragezeichen als besonderes Merkmal der Notation.
Die XML-Deklaration macht das Dokument als XML-Dokument kenntlich und gibt die Kodierung an. Diese ist hier UTF-8, was auch der Fall ist, wenn das Pseudoattribut encoding nicht notiert ist. Bei anderen Kodierungen ist allerdings encoding immer anzugeben. Wichtig hinsichtlich der Angabe der Kodierung: Diese kann zum Beispiel überschrieben werden, wenn ein Dienstprogramm (HTTP(S)) das Dokument ausliefert und dabei eine Kodierungsangabe macht. Es ist also immer darauf zu achten, daß solche Dienstprogramme diesbezüglich keine oder korrekte Angaben machen.
Die XML-Deklaration sollte bei der XHTML-Variante notiert werden, nicht jedoch bei der Markierungssuppen-Variante.
Ist unklar, welche Variante später verwendet wird, so ist die Zeile einerseits wegzulassen, andererseits anderweitig sicherzustellen, daß dem Darstellungsprogramm die korrekte Kodierung des Dokumentes zur Kenntnis gebracht wird.
Siehe zur XML-Deklaration auch das Buch zu XML.
Nach der XML-Deklaration können Leerzeichen, Kommentare und Verarbeitungsanweisungen folgen. Verarbeitungsanweisungen sind bei XHTML in der Praxis eher unüblich, die Verwendung und Syntax kann aber ebenfalls im XML-Buch nachgelesen werden.
<!DOCTYPE html>
Die Bedeutung und Verwendung dieser Struktur ist eine Besonderheit. Bei der XML-Notation handelt es sich um eine so weitgehend sinnlose Dokumenttypdeklaration. Wird das Dokument als XHTML ausgeliefert, kann man diese Struktur weglassen. Alternativ kann man darin Entitäten (Abkürzungen) definieren, welche alsdann im Dokument verwendet werden können, siehe dazu auch das Buch zu XML.
In der Markierungssupppenvariante hat diese Struktur keine solche Bedeutung, sollte aber auf jeden Fall notiert werden. Einige Darstellungsprogramme ändern die Interpretation der Markierungssuppe hin zu etwas, was der fehlerhaften Interpretation von HTML2 oder HTML3.2 ähnelt, wenn diese Zeile fehlt (ein paar andere sind ebenfalls für den Zweck möglich, gehören allerdings zu speziellen Versionen von HTML oder XHTML).
Gelegentlich wird behauptet, die Zeile würde kennzeichnen, daß es sich um ein HTML5-Dokument handelt, das ist allerdings falsch. In einem reinen HTML5-Dokument gibt es keine Möglichkeit, dies formal normativ als HTML5-Dokument zu kennzeichnen.
Nach der Zeile können wieder Leerzeichen und Kommentare folgen.
Damit endet der sogenannte Prolog des Dokumentes. Ein solcher Prolog enthält gesonderte Informationen zum Dokumenttyp, zur Kodierung und eventuell zur Verarbeitung. Danach folgt die eigentliche Hauptstruktur eines Dokumentes mit seinem Inhalt und den Metainformationen über diesen Inhalt.
<html xml:lang="de" lang="de"
xmlns="http://www.w3.org/1999/xhtml">
...
</html>
Das Element html umschließt immer als sogenanntes Wurzelelement den sonstigen Inhalt der Seite. Ein XML-Dokument und auch ein HTML-Dokument hat exakt ein Wurzelelement.
Außerhalb können lediglich besondere Strukturen stehen, die nicht präsentiert werden, hier auch nicht weiter erläutert werden. Der komplette sonstige Inhalt der Seite ist also der Inhalt dieses Elementes.
Mit den Attributen xml:lang="de" und lang="de" wird die Sprache notiert, in diesem Falle deutsch. lang="de" ist dabei lediglich notwendig oder sinnvoll, wenn die Markierungssuppen-Variante verwendet wird.
Bei der Markierungssuppenvariante wird nur lang ausgewertet. xml:lang ist ein allgemeines Attribut für XML-Dokumente, welches unabhängig vom speziellen Format interpretierbar ist, also eine generelle Bedeutung über HTML hinaus hat, bei XML-Notation somit auch interpretiert wird. Werden beide Attribute notiert, müssen sie denselben Wert haben.
xmlns="http://www.w3.org/1999/xhtml" ist die für die XML-Variante erforderliche Namenraumangabe, damit eine Interpretation nach HTML erfolgt, nicht nach einem anderen XML-Format. Für die Markierungssuppenvariante hat die Angabe keine Funktion, stört allerdings auch nicht.
Der Inhalt von html hat abgesehen von erlaubten Kommentaren und Leerzeichen eine genau vorgegebene Struktur, exakt ein Element head gefolgt von exakt einem Element body.
<head>
...
</head>
In diesem Element, dem Dokumentkopf, werden Meta-Informationen über das Dokument notiert. Diese Informationen werden nicht im normalen Fluß des eigentlichen Inhaltes präsentiert, allenfalls anders, etwa der Titel als Kopfzeile des Anzeigefensters.
Typisch wird im Kopf auch auf die Stilvorlagen (CSS) verwiesen oder sie werden in einem speziellen Element hier notiert. Ähnlich wird im Bedarfsfalle auch mit JavaScript verfahren, welches allerdings auch anderweitig notiert werden kann.
head sollte mindestens exakt ein Element title als Inhalt enthalten.
Weil bei der Markierungssuppen-Variante innerhalb des Dokumentes noch keine Angabe zur Kodierung notiert wurde, sollte dies hier als Meta-Information als erstes Element im head erfolgen:
<head>
<meta charset="UTF-8" />
<title>Meine erste Seite</title>
<!-- ... sonstige Meta-Informationen zum Dokument -->
</head>
Eigentlich kommt der Hinweis zur Kodierung an dieser Stelle bereits zu spät, weil die Angaben im Prolog allerdings typisch mit Zeichen erfolgen, die in gängigen Kodierungen gleich sind, kommt es erst mit dem Inhalt von title zu ersten eventuell kritischen Zeichen. So oder so muß ein Programm gegebenenfalls das Dokument komplett neu dekodieren, wenn es auf diese Information stößt. Daß dies passiert, wird zunehmend unwahrscheinlicher, wenn die Angabe nicht gleich zu Beginn im head steht.
Wie bereits bei der Kodierungsangabe in der XML-Deklaration gilt auch hier: Kommt von einer anderen Instanz eine Angabe zur Kodierung, hat diese Angabe höhere Priorität als diese im Dokument.
In der XML-Notation gilt die Kodierungsangabe in der XML-Deklaration, diese Angabe mit dem Element meta im head ist also obsolet und wird nicht interpretiert, sie kommt zu spät.
Die Kodierungsangabe im Dokument kann allerdings auch als Hilfe für Autoren angesehen werden. Im Zweifelsfalle können sie ihre Editoren bei Änderungen anhand der Angabe auf die Kodierung einstellen, sofern der Editor die Kodierung nicht automatisch richtig erkennt.
<head>
<title>Meine erste Seite</title>
</head>
Das Element title (deutsch: Titel) gibt den Titel des gesamten Dokumentes an. Beispielsweise heißt diese Wikibooks-Seite HTML5: Das erste HTML-Dokument – Wikibooks, Sammlung freier Lehr-, Sach- und Fachbücher.
Es gibt genau ein Element title in head. Der Inhalt von title ist einfacher Text.
<body>
...
</body>
Das Element body ist der eigentliche Körper des Dokumentes, es umschließt den im normalen Fluß zu präsentierenden eigentlichen Inhalt der Seite.
Der weitere Inhalt besteht im obigen Beispiel aus einer Hauptüberschrift und zwei Absätzen. Was genau als Inhalt eines bestimmten Elementes erlaubt ist, wird anderweitig jeweils beim entsprechenden Element erklärt.
body kann in HTML5 neben Kommentaren einfachen Text, Phrasenelemente und Blockelemente enthalten. Im Sinne einer guten Dokumentstruktur ist es allerdings praktisch nie sinnvoll, Text oder Phrasenelemente direkt im body zu notieren.
Die strikte Variante von HTML4 und XHTML1.0 und XHTML1.1 haben diese gute Struktur bereits berücksichtigt und nur Blockelemente als Inhalt erlaubt. HTML5 erlaubt mehr, primär um die Interpretation von mangelhaft strukturierten Dokumenten für das Publikum sicherzustellen. Autoren sollten jedoch immer auf eine sinnvolle und gute Struktur ihrer Dokumente achten, entsprechend also Blockelemente als Inhalt verwenden, wie bei früheren strikten Varianten vorgesehen.