Es gibt eine klare Aufgabenteilung im Bereich des World Wide Web. Das war nicht immer so und ist eine echte Errungenschaft in der (kurzen) Geschichte des Internets:

  1. HTML: Inhalt, Struktur und Bedeutung
  2. CSS: Grafische Gestaltung / Styling
  3. Javascript: Animation, Interaktion, Kommunikation zum Server

Noch bevor wir zu unserer ersten Sprache HTML kommen, behandeln wir die Meta-Sprache XML, denn: HTML ist eine XML-Sprache.

1.1 Einführung

XML steht für eXtensible Markup Language (erweiterbare Markierungssprache). XML ist eine Meta-Sprache, d.h. sie stellt Grundkonzepte zum Definieren einer konkreten Sprache (wie HTML) zur Verfügung.

XML ist keine Programmiersprache, sondern dient lediglich dazu, Daten zu repräsentieren, damit man sie in Textform speichern kann. Wozu braucht man so etwas? Ganz einfach: Sie wissen, dass der Arbeitsspeicher eines Computers beim Ausschalten gelöscht wird. Wenn Sie Ihr Adressbuch oder den Stand Ihres Computerspiels nicht verlieren möchten, muss dies auf die Festplatte gespeichert werden. Auch zum Weitergeben von Daten an Freunde und Kollegen ist es praktisch, wenn man die Daten speichern kann.

Als Speicherplatz noch knapp war, hat man Daten häufig binär gespeichert, d.h. man hat Informationen möglichst platzsparend in Zahlen umgewandelt. Die Zahl 182 konnte man in einem Byte (0 bis 255) speichern. Später hat man bemerkt, dass es praktisch ist, wenn Daten als Text gespeichert ist, weil die Programmierer dann schnell prüfen konnten, ob alles korrekt gespeichert wurde. Die Zahl 182 wurde dann als drei Textzeichen, also "182" gespeichert, erforderte als (mindestens) drei Byte, wenn man ein Zeichen mit einem Byte abspeichert. XML verwendet ebenfalls Text als Grundlage.

Definitionen:

Extensible Markup Language (XML) is a markup language that defines a set of rules for encoding documents in a format that is both human-readable and machinereadable

(Wikipedia.org)

… ist eine Auszeichnungssprache zur Darstellung hierarchisch strukturierter Daten in Form von Textdateien.

(de.Wikipedia.org)

1.2 Aufbau eines XML-Dokuments

Die Bestandteile eines XML-Dokuments sind

Nehmen wir an, wir möchten ein Adressbuch speichern. Jeder Eintrag steht für eine Person mit Name und Telefonnummer.

1.2.1 Tags

Ein Tag ist ein Wort in spitzen Klammern:

<foo>

Einen einzelnen Namen kennzeichnen wir mit zwei Tags, die beide gleich heißen: einem öffnenden und einen schließenden Tag. Der schließende Tag wird mit einem Schrägstrich gekennzeichnet.

<name>
</name>

Der öffnende Tag wird auch Start-Tag genannt, der schließende End-Tag.

Wichtig: Groß-/Kleinschreibung spielt eine bedeutungsunterscheidende Rolle. Generell sollte man möglichst immer klein schreiben, wenn man XML formuliert.

1.2.2 Elemente

Die Tags bilden Klammern um die eigentlichen Inhalte, in diesem Fall der Vor- und Nachname. Die gesamte Einheit aus Tags und Inhalten nennt man ein Element:

<name>
  Harry Hacker
</name>

Man könnte auch sagen, dass man den Inhalt (Harry Hacker) als Namen markiert. Deshalb spricht man auch immer wieder von Markierungssprachen (engl. markup languages).

Wie genau Sie ein Element setzen (Einrückung, Zeilenumbrüche, Leerzeichen) ist übrigens egal. So ginge es auch:

<name>Harry Hacker</name>

Wie auch beim Programmieren sollte man immer darauf bedacht sein, den "Code" übersichtlich und lesbar zu halten.

Elemente können verschachtelt sein. Um eine Person mit Namen, Telefonnumer etc. zu repräsentieren, fügen wir ein Element tel hinzu und umklammern das ganze nochmal als Element person:

<person>
  <name>
    Harry Hacker
  </name>
  <tel>
    0821 111 222 33
  </tel>
</person>

Im obigen Beispiel haben wir es mit drei Elementen zu tun: person, name und tel. Das Element person enthält die Elemente name und tel.

Wichtig ist, dass Elemente nur vollständige Elemente enthalten darf. Der folgende Fall ist falsch und somit kein gültiges XML:

<foo>
  Hallo
  <bar>
</foo>
  Welt  
  </bar>

Man kann auch sagen, dass sich im obigen Beispiel zwei Elemente überlappen. Dies ist nicht erlaubt.

1.2.3 Leere Elemente

Manchmal braucht man nur ein Element ohne Inhalte. Dafür gibt es leere Elemente. Zum Beispiel könnten wir ein leeres Element einführen, um Harry als "ledig" zu kennzeichnen:

<person>
  <ledig/>
  <name>
    Harry Hacker
  </name>
  <tel>
    0821 111 222 33
  </tel>
</person>

Um zu zeigen, dass ledig keinen End-Tag mehr benötigt, markiert man den Tag mit einem Schrägstrich vor der schließenden spitzen Klammer.

1.2.4 Attribute

Neben Tags und Elementen gibt es noch Attribute. Nehmen wir an, wir möchten zu jeder Person im Adressbuch noch Alter und Schuhgröße speichern. Diese könnten wir innerhalb des öffnenden Tags von "person" speichern:

<person alter="21" schuhgroesse="42">
  <name>
    Harry Hacker
  </name>
  <tel>
    0821 111 222 33
  </tel>
</person>

Zu beachten ist, dass Attributwerte immer mit Anführungszeichen versehen werden sollten (auch wenn es sich um Zahlen handelt). Ein Element kann eine beliebige Anzahl von Attributen enthalten.

Sie werden bemerkt haben, dass man die zwei Informationen auch in Elementen hätte speichern können:

<person>
  <name>
    Harry Hacker
  </name>
  <tel>
    0821 111 222 33
  </tel>
  <alter>
    21
  </alter>
  <schuhgroesse>
    42
  </schuhgroesse>
</person>

Tatsächlich ist beides möglich und im Grunde eine Designentscheidung. Ein konzeptioneller Unterschied zwischen Attribut und Element ist, dass ein Element wiederum Unterelemente haben kann, z.B. beim Namen:

<person>
  <name>
    <vorname>
      Harry
    </vorname>
      Hacker
    <nachname>
    </nachname>
  </name>
</person>

Ansonsten ist es noch so, dass Elemente manchmal etwas übersichtlicher zu lesen sind (für Menschen). Als Faustregel kann man vielleicht sagen, dass grundlegende, wichtige und potentiell komplexe Informationen in Elementen gespeichert werden sollte und Attribute eher für Nebeninfomationen und Modifikatoren genutzt werden sollten.

1.3 Grammatik und Validierung

Wenn Sie die Übung oben gemacht haben, werden Sie bemerkt haben, dass Sie Ihre "Sprache" lediglich über Beispiele definiert haben. Vielleicht hätten Sie lieber Regeln aufgestellt, also z.B. ein Vokabular, das besagt, welche Tag-Namen denn überhaupt zulässig sind, und dann noch Regeln, welche Elemente in welchen Elementen enthalten sein dürfen und welche Attribute in welchen Elementen auftauchen dürfen oder müssen.

Eine solche Systematik nennt man Grammatik und ist Ihnen natürlich aus anderen menschlichen Sprachen oder Programmiersprachen bekannt.

Und natürlich gibt es auch für XML eine Möglichkeit, eine konkrete XML-Sprache mit Hilfe einer Grammatik zu definieren. Der große Vorteil einer klar definierten Grammatik ist, dass sie eine maschinelle Überprüfung der grammatikalischen Korrektheit eines Dokuments erlaubt. Das nennt man auch Validierung. Dazu gibt es Softwarepakete in vielen Programmiersprachen: Sie geben eine Grammatik z.B. für MusicML an und können dann maschinell für jedes beliebige MusicML-Dokument überprüfen lassen, ob es sich an die Regeln hält.

Sie finden Online-Anwendungen zur Validierung z.B. bei w3schools.com. Wichtiger ist aber, dass Sie solche Mechnismen auch in eigenen Programmen verwenden können und unter vielen Bibliotheken wählen können.

Als Beispiel wollen wir Regeln definieren, die wiedergeben, dass wir

  1. die Elemente name, vorname und nachname zulassen und
  2. dass vorname und nachname in Element name enthalten sein müssen.

Konkret sieht ein XML-Schnipsel so aus:

<person>
  <name>
    Harry Hacker
  </name>
  <tel>
    0821 111 222 33
  </tel>
</person>

Die Grammatik dafür kann mit dem DTD-Mechanismus definiert werden. Die Schreibweise von DTD ist etwas sperrig:

<!ELEMENT person (name, tel)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT tel (#PCDATA)>

DTD steht für Document Type Definition und war der erste Mechanismus, um XML-Sprachen zu spezifizieren. Die modernere Variante der Spezifikation nennt sich XML Schema (kurz: XSD). XSD ist selbst auch eine XML-Sprache, also etwas angenehmer zu lesen. Außerdem bietet XSD Typen (ähnlich wie int, String, boolean in Programmiersprachen) an.

Wir werden hier nicht weiter auf die Details von DTD und XSD eingehen, da wir zur Verwendung von HTML5 keine Grammatik benötigen. Sie haben aber jetzt eine Vorstellung davon, wie man eine konkrete Sprache wie HTML automatisch validieren also auf grammatikalische Korrektheit prüfen kann.

1.4 Bekannte XML-Sprachen

Obwohl man XML vorwerfen kann, dass es etwas "sperrig" ist und die Dateien schnell groß werden (und dadurch wiederum unübersichtlich), hatte XML doch großen Erfolg, insbesondere durch die Vielzahl an Programmbibliotheken, die das Einlesen, Schreiben und Überprüfen von XML-Dokumenten erleichtern.

Neben HTML sind mittlerweile viele etablierte Dateiformate in XML formuliert:

ODF (open document format): Formatierte Textdokumente, wird u.a. von LibreOffice/OpenOffice verwendet

Collada: 3D-Modelle und sonstige Assets im Bereich 3D-Grafik

SVG (Scalable Vector Graphics): Vektorgrafiken

OpenStreetMap (OSM): Land-/Straßenkarten

SMIL und MPEG-7: Formate u.a. fürs Synchronisieren von Multimedia-Inhalten

Wenn Sie in eine dieser Dateien hineinschauen, werden Sie verblüfft sein, wieviel Sie "verstehen", ohne das Dateiformat genau zu kennen.