Strukturierung von HTML-Code
Gesamtstruktur eines Dokuments
Heute werden wir die HTML-Tags eingehender behandeln. Sie werden lernen, wie man Überschriften, Paragraphen und verschiedene Listen in die Webseite eingibt. Dieses Kapitel behandelt außer den HTML-Tags noch folgende Themen:
- Tags für eine allgemeine Seitenstruktur:
<html>,<head>und<body> - Tags für Titel, Überschriften und Paragraphen:
<title>,<h1>...<h6>und<p> - Tags für Kommentare:
<!--...--> - Tags für Listen:
<ol>,<ul>,<li>,<dt>und<dd>
HTML definiert drei Tags, die benutzt werden, um die Gesamtstruktur eines Dokuments zu beschreiben und um einige einfache "Header"-Informationen (ein Begriff aus dem E-Mail-Bereich; hier wird mit "Header" gewissermaßen der "Briefumschlag" bezeichnet) anzubieten. Diese drei Tags - <html>, <head>, <body> - identifizieren Ihre Seite in Browsern oder HTML-Werkzeugen. Wenn man sich an die genaue HTML-Definition hält, dann sind diese Kennungen nicht zwingend. Wenn Ihre Seite sie nicht enthält, können die Browser sie normalerweise immer noch lesen. Diese Tags jedoch sind zwingend erforderliche Elemente in XHTML 1.0. In Zukunft wird es Werkzeuge und Browser geben, die diese Tags brauchen werden. Deshalb sollten Sie sich von vornherein angewöhnen, diese Struktur-Kennungen in Ihr Dokument einzufügen.
Obwohl es sich um keinen Seitenstruktur-Tag handelt, braucht man für die vorgeschlagene XHTML 1.0 Spezifikation noch eines: die DTD.
Die erste Zeile einer jeden Seite muss einen DOCTYPE-Kennzeichner beinhalten, der die XHTML 1.0 Version, nach der sich Ihre Seite richtet, definiert. Das heißt also, dass Sie eine Document Type Definition (DTD) brauchen, die die Spezifikation definiert, gefolgt von den <html>, <head> und <body> Tags. Im folgendem Beispiel erscheint das XHTML 1.0 Transitional Dokument vor den Seitenstruktur-Tags:
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>HTML Lernen - Grundlagen und Tutorials</title>
</head>
<body>
... Ihre Seite ...
</body>
</html>
Insgesamt gibt es drei verschiedene Arten von HTML 4.0 Dokumenten, die in den XHTML 1.0 Spezifikationen angegeben sind: Strict, Transitional und Frameset.
<html>
Die erste Struktur-Kennung in jedem HTML-Dokument ist das <html>-Tag, welches anzeigt, dass der Inhalt dieser Datei in HTML geschrieben wurde. In der XHTML 1.0 Spezifikation sollte das <html> Tag nach dem DOCTYPE-Kennzeichner kommen. Sehen Sie hierzu folgendes Beispiel.
Der gesamte Text und alle HTML-Befehle in Ihrem HTML-Dokument sollten wie hier zwischen der einleitenden und abschließenden
<html>-Kennung stehen:
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="de" lang="de">
... Ihre Seite ...
</html>
<head>
Das <head>-Tag bestimmt, dass die Zeilen zwischen der einleitenden und der abschließenden Kennung als Dateivorspann angesehen werden. Generell gibt es nur wenige Kennungen, die in den <head>-Teil der Seite gehören (vornehmlich der unten beschriebene Dokumententitel). Sie sollten niemals Teile des Textes Ihrer Seite in den <head>-Teil schreiben.
Hier ist ein typisches Beispiel dafür, wie Sie das <head>-Tag richtig benutzen (über <title> erfahren Sie nachher mehr):
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>HTML Lernen - Grundlagen und Tutorials</title>
</head>
... Ihre Seite ...
</html>
<body>
Der Rest Ihres HTML-Dokuments, einschließlich des gesamten Textes und anderen Inhalts (Verknüpfungen, Bilder und so weiter), ist in ein <body>-Tag eingeschlossen. In Kombination mit den <html>- und <head>-Kennungen sieht das dann so aus:
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>HTML Lernen - Grundlagen und Tutorials</title>
</head>
<body>
... Ihre Seite ...
</body>
</html>
Sie werden bemerken, dass jede HTML-Kennung verschachtelt ist, die beiden <body>- und </body>-Tags gehören zwischen die beiden <html>-Kennungen; das gleiche gilt für die beiden <head>-Kennungen. Alle HTML-Tags funktionieren auf diese Weise, indem sie individuelle verschachtelte Abschnitte von Text bilden.
Sie sollten darauf achten, Kennungen niemals zu überlappen, das heißt, vermeiden Sie Folgendes zu tun:
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="de" lang="de">
<head>
<body>
</head>
</body>
</html>
Vergewissern Sie sich, wenn Sie eine HTML-Kennung abschließen, dass Sie jeweils die Kennung abschließen, die zuletzt geöffnet wurde (Sie werden später noch mehr darüber erfahren).
In HTML 4.0 und früheren Versionen gibt es einige Tags, die man nicht zwingend schließen muss. In anderen Tags sind schließende Tags gänzlich verboten. In der XHTML 1.0 Spezifikation müssen alle Tags geschlossen werden. Warum, wie und wo wird in anderen Artikeln erklärt. Die in diesem Kapitel aufgezeigten Beispiele zeigen Ihnen wie man Tags korrekt abschließt. Somit können auch ältere Browser die geschlossenen Tags in XHTML 1.0 interpretieren.