Grundlegende Konzepte

Auszeichnungssprachen folgen trotz ihrer unterschiedlichen Einsatzbereiche (Web, Dokumentensatz, Datenaustausch) einer gemeinsamen Logik. Wenn du dies im Unterricht vermittelst, helfen diese Konzepte den Schülern, das „System“ hinter der Syntax zu verstehen, anstatt nur Befehle auswendig zu lernen.

Die wesentlichen Konzepte sind:

1. Trennung von Inhalt, Struktur und Gestaltung

Dies ist das wichtigste didaktische Konzept. Eine reine Auszeichnungssprache (wie HTML oder XML) beschreibt nur, was ein Element ist (z. B. eine Überschrift), nicht wie es aussieht. Die Gestaltung wird in separate Sprachen wie CSS (für HTML) ausgelagert.

Vorteil: Leichtere Wartbarkeit, Barrierefreiheit und die Möglichkeit, denselben Inhalt auf verschiedenen Geräten unterschiedlich darzustellen.

2. Elemente und Tags

Inhalt wird in „Container“ eingeschlossen, die als Elemente bezeichnet werden. Diese werden durch Tags markiert.

Start-Tag: <title> signalisiert den Beginn.
End-Tag: </title> signalisiert das Ende.
Leere Elemente: Einige Elemente haben keinen Inhalt (z. B.   in HTML oder <img />) und benötigen oft kein separates End-Tag.

Beispiel in CodePen

3. Hierarchie und Verschachtelung (Baumstruktur)

Auszeichnungssprachen sind fast immer hierarchisch aufgebaut. Elemente können andere Elemente enthalten, dürfen sich aber in der Regel nicht überschneiden.

Korrekt: Text
Falsch: Text Das führt zum Konzept des DOM (Document Object Model), bei dem ein Dokument als Baum mit Wurzel, Ästen (Elternelementen) und Blättern (Kindelementen) visualisiert wird.

4. Attribute und Metadaten

Tags können zusätzliche Informationen enthalten, die nicht direkt als Text im Dokument erscheinen, aber das Verhalten oder die Bedeutung des Elements steuern.

Beispiel: <a href="https://ezsh.info">Link</a>. Hier ist href das Attribut, das das Ziel des Links definiert.
Attribute bestehen meist aus einem Namen und einem Wert (Key-Value-Pairs).

5. Semantik

Gute Auszeichnung nutzt Tags entsprechend ihrer Bedeutung, nicht ihrer Optik.

Anstatt Text einfach nur „fett“ zu machen (), nutzt man  (für wichtige Betonung).
Für den Unterricht ist das besonders wichtig, da semantisches Markup/Code die Grundlage für Suchmaschinen (SEO) und Screenreader für blinde Menschen ist.

6. Wohlgeformtheit vs. Validität

Diese Konzepte stammen primär aus der XML-Welt, gelten aber allgemein:

Wohlgeformtheit (Well-formedness): Das Dokument hält sich an die grundlegenden Syntaxregeln der Sprache (z. B. alle Tags sind korrekt geschlossen).
Validität: Das Dokument hält sich an ein spezifisches Regelwerk oder Schema (eine DTD oder ein XML-Schema), das festlegt, welche Tags an welcher Stelle erlaubt sind.

7. Escape-Sequenzen (Entities)

Da bestimmte Zeichen in der Sprache eine Sonderfunktion haben (z. B. das Kleiner-Zeichen < markiert einen Tag-Anfang), müssen diese im eigentlichen Text „maskiert“ werden.

In HTML/XML nutzt man dafür Entities wie < für < oder & für &.

Diese Konzepte lassen sich hervorragend mit einer Analogie erklären: Ein Textdokument ist wie ein Haus. Die Auszeichnungssprache liefert den Bauplan (Wände, Fenster), der Inhalt ist die Einrichtung (Möbel, Bewohner) und die Gestaltung (CSS) ist die Farbe an der Wand.