HTML - Grundlagen - Dokumentstruktur
1. Aufbau
Ein HTML-Dokument besteht aus drei Hauptbereichen:
- der DOCTYPE Definition (dazu gleich mehr)
- dem Head-Bereich
- dem Body-Bereich
So und jetzt wagen wir uns erstmals an richtigen HTML-Code heran. Das Grundschema einer Seite sieht so aus (die Pünktchen stehen für weiteren Code):
<!DOCTYPE ...>
<html>
<head>
<title>Titel der Seite</title>
...
</head>
<body>
...
</body>
</html>
Wir sehen also, dass das eigentliche Dokument vom <html>-Tag eingeschlossen ist. Dieses wird dann in zwei
separate Teile untergliedert, den oben erwähnten Bereichen <head> und <body>.
Wichtig!
Wenn ihr euch dagegen für XHTML entscheidet, so müsst ihr auf eine Feinheit achten. Das <html> muss
zwingend um die folgenden Attribute ergänzt werden:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="de">
Noch wichtiger!
Laut Spezifikation muss bei einem XHTML-Dokument zu Beginn folgende Anweisung stehen:
<?xml version="1.0" encoding="ISO-8859-1" ?>
Leider spielt uns da Internet Explorer 6 mal wieder einen üblen Streich. Denn wenn ihr euch doch tatsächlich an den vorgegebenen Standard haltet, so schaltet er sich in einen Modus, der euch direkt in die Hölle führt. Weitere Infos dazu liefere ich euch gleich, aber das solltet ihr jetzt schon merken. Niemals anwenden! Ganz böse, böse!
2. Head
In diesem "unsichtbaren" Bereich können zum Beispiel Zusatzinformationen, so genannte Meta-Daten, bereitgestellt werden, die vom Browser und auch von Suchmaschinen interpretiert werden. Dazu gehören unter anderem Angaben über den verwendeten Zeichensatz, automatische Weiterleitungen, Anweisungen zum "Cachen" einer Datei, oder logische Bezüge von verschiedenen HTML-Dokumenten zueinander. Auch kann man hier externe CSS- oder JavaScript-Dateien einbinden.
Der Titel (<title>...</title>) ist bei den HTML-Varianten das einzige Element innerhalb des Head-Bereichs,
der laut Spezifikation zwingend vorhanden sein muss. Das hat mehrere Gründe:
- er wird in der Titelleiste des Browsers dargestellt (der bunte Balken ganz oben, wo sich auch das "X" befindet)
- er wird bei Tabs (Karteireitern), wie sie zum Beispiel Firefox oder Opera anbieten, im Reiter dargestellt
- er wird bei den Favoriten angezeigt (wenn man nicht explizit etwas anderes angibt)
- er dient vielen Suchmaschinen als wichtige Informationsquelle
Bei XHTML dagegen muss zusätzlich immer der verwendete Zeichensatz angegeben werden. Auf die Details dazu gehe ich später ein, vorab nur ein Beispiel:
<meta http-equiv="content-type" content="text/html;
charset=ISO-8859-1" />
So umgeht ihr das Problem mit dem nicht nutzbaren <?xml version="1.0" encoding="ISO-8859-1" ?>.
3. Body
Dieser Bereich beinhaltet letztendlich alles, was der Browser darstellt, Kommentare mal ausgenommen.