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>