XHTML-Grundlagen - Start-Tag, End-Tag, Elemente, Grundgerüst


Linkübersicht XHTML und CSS


XHTML-Grundlagen

Am Anfang jeder Website steht XHTML. Hier lernen Sie die Basics kennen.

Start-Tag, End-Tag

Jede XHTML-Seite besteht aus Tags und normalem Text. Tags sind Markierungen. Diese werden in spitzen Klammern geschrieben und man unterscheidet zwischen Start-Tag und End-Tag. Das End-Tag sieht genauso aus wie das Start-Tag, aber mit einem zusätzlichen Slash(/). Das Grundschema sieht also wie folgt aus:

<strong>Mein Text</strong>

Elemente

In diesem Beispiel haben wir unserem Text die Auszeichnung strong (betont) zugewiesen. <strong>ist das Start-Tag und </strong> das End-Tag. Start- und End-Tag begrenzen also den Bereich, für den die Auszeichnung gilt.

strong selbst ist ein Element. Es hat eine vorgegebene Bedeutung und wird auf eine bestimmte Art von Browsern dargestellt. Typisch für XHTML ist, dass die Namen für Elemente englischsprachig sind, zum Teil ausgeschrieben oder aber auch abgegekürzt.

Grundgerüst

Nun also sehen wir uns das Grundgerüst an, das die Basis jedes XHTML-Dokuments darstellt. Es besteht aus mehreren ineinander verschachtelten Elementen.

<!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>
 <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
 <title>Grundger&uuml;st</title>
</head>
<body>
 <p>Meine erste Webseite!</p>
</body>
</html>

Gleich zu Beginn steht die Dokumenttypangabe <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">. Sie bestimmt die verwendete Markup-Sprache - ob XHTML oder HTML eingesetzt wird, und welche Variante.

Wurzelelement

Hinter der Dokumenttypangabe folgt das Wurzelelement, das für HTML als auch XHTML einfach nur html lautet. Das Wurzelelement ist jenes, das alle anderen Elemente umschließt. Das Start-Tag <html> und das End-Tag </html> umfassen alle weiteren Bestandteile und bedeuten, dass dazwischen XHTML-Code steht.

Innerhalb des Start-Tags befindet sich bei XHTML noch eine weitere Angabe: xmlns="http://www.w3.org/1999/xhtml". Hierbei handelt es sich formal um ein Attribut. Attribute geben zusätzliche Informationen zu bestimmten Elementen.

Attribute werden nur im Start-Tag notiert. So steht dieses Attribut also in <html>, aber nicht zum Schluss bei </html>. Attribute bestehen immer aus einem Attributnamen (hier xmlns) und einem Attributwert (hier http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd), die durch ein Gleichheitszeichen miteinander verbunden werden. Der Attribut-Wert wird stets in Anführungszeichen - einfachen oder doppelten - notiert.

Das Attribut xmlns im html-Tag dient zur Angabe eines Namensraums und ist nur bei XHTML notwendig, nicht bei HTML. Namensräume sind ein XML-Konzept. Dadurch ist die gleichzeitige Verwendung von verschiedenen XML-Sprachen innerhalb eines Dokuments möglich, da die verwendeten Elemente durch den Namensraum eindeutig einer Markup-Sprache zugeordnet werden. So kann man zum Beispiel mathematische Formeln aus MathML - ebenfalls einer XML-basierten Sprache für mathematische Formeln - innerhalb von XHTML benutzen.

Innerhalb des Wurzelelements html gibt es zwei weitere Elemente, die das Dokument in zwei Hauptbereiche teilen. head (Kopf) und body (Körper). Innerhalb des head-Elements sind Informationen über das Dokument untergebracht, zum Beispiel der Seitentitel titel.

Seitentitel

Den Seitentitel sehen wir in der Titelleiste des Browserfenster. Außerdem wird der Seitentitel als Vorgabe verwendet, wenn der Nutzer die betreffende Seite in die Bookmarks/Favoriten aufnimmt. Bei Suchmaschinen ist der Seitentitel der anklickbare Verweis. Der Seitentitel ist also eine ganz zentrale Komponente der Webseiten und sollte immer einen aussagekräftigen Text beinhalten.

head-Bereich

Darüber hinaus können innerhalb des head-Elements noch weitere Informationen über das Dokument angegeben werden, wie Name des Authors, Erstellungsdatum, Beschreibung der Webseite oder Informationen für Suchmaschinen.

Leere Elemente

Im obigen Beispiel haben wir über das meta-Element den Zeichensatz der Webseite festgelegt. Dieses besteht nicht aus einem Start- und End-Tag sondern nur aus einem Tag. Das meta-Element selbst enthält weder Text noch andere Elemente. Damit ist es ein sogenanntes leeres Element. Leere Elemente werden in XHTML mit nur einem Tag notiert, bei dem vor der schließenden spitzen Klammer ein Slash (/) steht.

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

Leere Elemente enthalten aber häufig Attribute, wie z.B. http-equiv beim meta-Element.

body-Bereich

Nach dem head-Element folgt das body-Element. Dort steht das, was auf der Webseite dargestellt wird, sprich das, was im Browserfenster zu sehen ist. Im obigen Beispiel ist es ein Absatz - Element p - mit dem Text "Meine erste Webseite!". Hier werden auch XHTML-Elemente für Bilder, Verlinkungen, weitere Strukturierungselemente und außerdem die Texte eingefügt.

>> Dokumenttypangaben

W3C Validator | W3C CSS-Validator