HTML/Dokumentstruktur und Aufbau
Hier ist der grundsätzliche Aufbau eines HTML-Dokuments beschrieben.
- html
- das gesamte HTML-Dokument
- head
- Kopfdaten, etwa Titel, Zeichencodierung
- body
- der anzuzeigende Inhalt
Inhaltsverzeichnis |
Grundgerüst einer HTML-Datei
Eine gewöhnliche HTML-Datei besteht grundsätzlich aus folgenden Teilen:
- Dokumenttyp-Deklaration (Angabe zur verwendeten HTML-Version)
- head (Kopfdaten. z.B. Angaben zu Titel u.ä.)
- body (Körper - anzuzeigender Inhalt, also Text mit Überschriften, Verweisen, Grafikreferenzen usw.)
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>aussagekräftiger Titel der Seite</title> </head> <body> <!-- Sichtbarer Dokumentinhalt im body --> <p>Sehen Sie sich den Quellcode dieser Seite an. <kbd>(Kontextmenu: Seitenquelltext anzeigen)</kbd></p> </body> </html>
- Jeder Browser „versteht“ diesen Doctype.
- Sie können sowohl die neuen HTML5-Elemente nutzen als auch bestehenden HTML4-Code weiterverwenden.
- Der doctype ist kürzer und übersichtlicher ;-)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="de"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>aussagekräftiger Titel der Seite</title> </head> <body> <!-- Sichtbarer Dokumentinhalt im body --> <p>Sehen Sie sich den Quellcode dieser Seite an. <kbd>(Kontextmenu: Seitenquelltext anzeigen)</kbd></p> </body> </html>
Die erste Zeile ist eine Dokumenttyp-Deklaration. Einzelheiten dazu finden Sie weiter unten unter Dokumenttyp-Deklaration.
Der gesamte übrige Inhalt einer HTML-Datei wird in die Tags <html> bzw. </html> eingeschlossen. Das html-Element wird auch als Wurzelelement einer HTML-Datei bezeichnet. Hinter dem einleitenden HTML-Tag folgt das einleitende Tag für den Kopf <head>. Zwischen diesem Tag und seinem Gegenstück </head> werden die Kopfdaten einer HTML-Datei notiert. Die wichtigste dieser Angaben ist der Titel der HTML-Datei, markiert durch <title> und </title>. Ebenfalls sinnvoll ist die Angabe der verwendeten Zeichencodierung (hier: UTF-8) sowie eine viewport-Angabe, damit Smartphones oder Tablets die Seite angepasst darstellen. Näheres zum genauen Aufbau dieser Zeilen finden Sie bei den Metadaten. Bitte beachten Sie, dass diese Angabe zur Zeichencodierung nicht immer die einzige ist, die der Browser erhält, wenn die Datei aus dem Internet geladen wird, und es somit trotzdem Probleme mit der Darstellung geben kann. Näheres erfahren Sie unter Zeichenkodierung und geschriebene Sprache. Unter der Angabe zur Zeichencodierung folgt in unserem Grundgerüst der Textkörper, begrenzt durch <body> und </body>. Dazwischen wird dann der eigentliche Inhalt der Datei notiert, also das, was im Anzeigefenster des Browsers angezeigt werden soll.
<html>, </html>, <head>, </head>, <body> und </body> sind optionale Tags, d.h. sie können beim Schreiben von HTML normalerweise weggelassen werden.Grundgerüst einer XHTML-Datei
Wenn Sie XML-gerechtes HTML schreiben wollen, sieht das Grundgerüst ähnlich aus. Nur am Anfang ist einiges anders.
Es gilt zu unterscheiden:
- XHTML, das als XML ausgeliefert wird (MSIE versteht XML erst ab Version 9.).
- XHTML, das als HTML ausgeliefert wird (betrifft nur XHTML 1.0).
Erfordert die XML-Deklaration in der ersten Zeile.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> <head> <title>Titel der Seite</title> </head> <body> <!-- Inhalt hier --> </body> </html>
Die XML-Deklaration in der ersten Zeile darf nicht vorhanden sein.
Für die Sprachangabe verwenden Sie zusätzlich das
lang-Attribut ohne Namespace.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>Titel der Seite</title> </head> <body> <!-- Inhalt hier --> </body> </html>
Die erste Zeile mit den Frageezeichen hinter der öffnenden spitzen Klammer und vor der schließenden spitzen Klammer heißt XML-Deklaration und dient dazu, den Bezug zu XML herzustellen und die verwendete Zeichencodierung zu benennen. Notieren Sie diese Zeile so wie im Beispiel angegeben. Es handelt sich um eine so genannte XML-Deklaration. Diese Zeile entfällt praktisch, wenn Sie XHTML als HTML ausliefern, was im WWW der Standard ist. Diese Option steht Ihnen jedoch nur für XHTML 1.0 zur Verfügung.
Im einleitenden <html>-Tag muss der verwendete XML-Namensraum mit einem Attribut namens xmlns angegeben werden. Benutzen Sie die Angabe wie im obigen Beispiel.
Damit ist die Datei als XHTML-Datei deklariert. Der weitere Quelltext ist im Prinzip normales HTML, allerdings müssen Sie die Unterschiede zwischen XHTML und HTML beachten. Befassen Sie sich mit diesen Unterschieden aber erst, wenn Sie schon etwas vertrauter mit HTML sind.
Dokumenttyp-Deklaration
Innerhalb der als Content-type:text/html ausgelieferten Ressourcen stellt die Dokumenttyp-Deklaration ein Überbleibsel eines theoretischen Konzepts dar, das in der Praxis aber nicht zum gewünschten Ergebnis geführt hat. Relevant ist die Dokumenttyp-Deklaration heutzutage nur noch zum Validieren und um bei bestimmten Browsern zwischen dem Standard-Modus und Quirks-Modus zu wechseln.
Sinn und Zweck des Validierens wurde bereits im Abschnitt HTML/Allgemeine Regeln/Textauszeichnung#Validierung erklärt.
Heutzutage brauchen Sie sich darüber keine weiteren Gedanken zu machen. Für neue Seiten benutzen Sie einfach eines der oben angegebenen Grundgerüste.
Doctypes für Content-type:text/html
Praktisch werden im WWW heute HTML-Ressourcen als text/html ausgeliefert. Grund dafür ist der mangelnde XML-Support gerade auch bei ältern Versionen (IE 6-8) des Internet Explorer.
HTML5
HTML 4.01
- Jeder Browser „versteht“ diesen Doctype.
- Sie können sowohl die neuen HTML5-Elemente nutzen als auch bestehenden HTML4-Code weiterverwenden.
- Der doctype ist kürzer und übersichtlicher ;-)
XHTML 1.0
- Jeder Browser „versteht“ diesen Doctype.
- Sie können sowohl die neuen HTML5-Elemente nutzen als auch bestehenden HTML4-Code weiterverwenden.
- Der doctype ist kürzer und übersichtlicher ;-)
Die Bezeichner DOCTYPE und HTML sind case-insensitive, können also groß und klein geschrieben werden. Vor allem aus Kompatibilitätsgründen sind die folgenden Varianten „überflüssigerweise erlaubt“ (obsolete permitted), welche aber vermieden werden sollten, weil sie unnötig lang sind.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
XHTML 1.0
XHTML 1.1
Wenn Sie nun trotzdem verunsichert sind und sich fragen, was denn nun die eigentliche Bedeutung der Angabe <!DOCTYPE HTML> ist, hier eine kurze Erklärung: Der Autor der Seite sagt damit dem Browser: "Ich versuche, mich so gut wie möglich an den HTML-Standard zu halten, versuch du bitte dasselbe!"
siehe auch
- Guter HTML-Stil
- Übersicht über Doctype-Deklarationen: http://www.w3.org/QA/2002/04/valid-dtd-list.html
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Titel</title> </head> <body> </body> </html>