XHTML: Dokumentaufbau

Erstellt: 11.12.2005 | Aktualisiert: 05.01.2009

Korrekter Aufbau und Hauptbestandteile eines XHTML-Dokuments.

Die Struktur eines XHTML-Dokuments setzt sich aus den folgenden Hauptkomponenenten zusammen:

  • XML-Deklaration
  • Dokumenttyp
  • XML-Namensraum
  • Dokumentkopf
  • Dokumentkörper

Deklaration

<xml version="1.0" encoding="utf-8">

Die XML-Deklaration hat die Funktion ein XML-Dokument zu deklarieren, das heisst die Versionsnummer der zugrundliegenden XML-Spezifikation und kann ebenfalls dazu verwendet werden die Zeichenkodierung festzulegen. Wird diese nicht angegeben, wird automatisch die Zeichencodierung UTF-8 gewählt.

Die Verwendung der XML-Deklaration wird vom W3C empfohlen und ist somit nicht Bedingung. Da vielen Browsern die Interpretation der XML-Deklaration Mühe bereitet, verzichten Webentwickler oft darauf diese anzugeben.

Dokumenttyp

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

Für XHMTL stehen drei standardisierte Dokumenttypen zur Verfügung. Innerhalb einer Dokumenttypen-Deklaration können weitere Elementtypen, Attributslisten und Notationen definiert werden. Bei XHTML-Dokumenten muss der Dokumenttyp zwingend genannt werden.

Namensraum

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-CH" lang="de-CH">

Im Start-Tag des Wurzelelements html wird der XML-Namensraum und die Sprache angegeben.

Dokumentkopf

<head>...

Das Öffnungselement des Dokumentkopfes. Dieser Part enthält Stil- und Scriptinformationen. Muss bei XHTML zwingend gesetzt werden.

Dokumenttitel

<title>Titel des Dokumentes</title>

Als nächstes Element folgt der Dokumenttitel, der auch in der Titelleiste des Browser angezeigt wird. Aus Gründen der Accessibility und Usability empfiehlt es sich auf Sonderzeichen zu verzichten. Titel-Element muss in XHTML zwingend geschrieben werden.

Meta-Angaben

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

Meta-Elemente bieten zusätzliche Informationen für den Web-Server, den Web-Browser oder auch Suchroboter. Im obigen Beispiel wird die Zeichensatzkodierung angegeben.

CSS-Verknüpfungen

<link rel="stylesheet" type="text/css" href="style.css" media="all" />

Mit dem link-Element kann ein externes Stylesheet verknüpft werden. An dieser Stelle können auch Javascript-Anweisungen innerhalb des script-Element gesetzt werden.

JavaScript-Verknüpfung

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

Der Dokumentkopf wird End-Tag des head-Elements wieder geschlossen.

...</head>

Dokumentkörper

<body>...

Der Dokumentkörper wir mit dem body-Element eröffnet

<h1>Hauptüberschrift der Seite</h1>

Das h1-Element ist die wichtigste Ãœberschrift der Seite und wird oft für den Seitennamen verwendet. Insbesondere Suchmaschinen sind ganz “heiss” h1-Tags.

<p>Text immer im Paragraphen-Element</p>

Der Inhalt des Dokumentes sollte mittels Ãœberschriften- und Paragraphen-Elementen korrekt ausgezeichnet werden. Auf diese Weise lassen sich die verschiedenen Element dank CSS auch optimal gestalten.

Als Abschluss des Dokumentkörpers folgt das abschliessende body-Element

...</body>

Zum Schluss wird das XHTML-Dokument mit dem End-Tag des Wurzelelements abgeschlossen.

...</html>

Verwandte Snippets

Weiterführende Links