HTML/Dokumentstruktur und Aufbau

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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

[Bearbeiten] 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.)
Beispiel: HTML5 ansehen … frickln …
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta 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>
Kopiervorlage:
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
  </body>
</html>
Beispiel: HTML 4.01 strict
Empfehlung: Erstellen Sie HTML5-Dokumente.
  • 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). Näheres zum genauen Aufbau dieser Zeile 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.

Beachten Sie: Die genannten Tags <html>, </html>, <head>, </head>, <body> und </body> sind optionale Tags, d.h. sie können beim Schreiben von HTML normalerweise weggelassen werden.

[Bearbeiten] 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 kein XML).
  • XHTML, das als HTML ausgeliefert wird (betrifft nur XHTML 1.0).
Beispiel
XHTML als XML
Erfordert die XML-Präambel 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>
XHTML als HTML
Die XML-Präambel 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 Ausrufezeichen hinter der öffnenden spitzen Klammer und vor der schließenden spitzen Klammer heißt XML-Präambel 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.

[Bearbeiten] 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. Den Quirks-Mode werden Sie in einem späteren Kapitel kennenlernen.

Heutzutage brauchen Sie sich darüber keine weiteren Gedanken zu machen. Für neue Seiten benutzen Sie einfach eines der oben angegebenen Grundgerüste.

[Bearbeiten] 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 dem Internet Explorer.

[Bearbeiten] HTML5

  • HTML5
Beispiel
Einfache Version
<!DOCTYPE HTML>

[Bearbeiten] HTML 4.01

Beispiel
Empfehlung: Erstellen Sie HTML5-Dokumente.
  • 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 ;-)
Variante strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Variante transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Variante frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

[Bearbeiten] XHTML 1.0

Beispiel
Empfehlung: Erstellen Sie HTML5-Dokumente.
  • 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 ;-)
Variante strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Variante transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Variante frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

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.

Beispiel
<!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">

[Bearbeiten] Doctypes für Content-type:application/xhtml+xml

Wegen der mangelnden XML Unterstützung im WWW wird von der Auslieferung als application/xhtml+xml abgeraten.

[Bearbeiten] XHTML 1.0

Beispiel
Variante strict
<?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">
Variante transitional
<?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">
Variante frameset
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Beachten Sie: Die Angabe zum Zeichenencoding gilt es sinngemäß anzupassen.

[Bearbeiten] XHTML 1.1

Beispiel
Es gibt keine Varianten.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Beachten Sie: Die Angabe zum Zeichenencoding gilt es sinngemäß anzupassen.

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!"

[Bearbeiten] siehe auch

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Hilfe
SELFHTML
Diverses
Werkzeuge
Flattr
Soziale Netzwerke