Auszeichnungssprache: Tags, Struktur und Darstellung
Eine Auszeichnungssprache markiert Teile von Texten oder Daten, damit ihre Struktur, Bedeutung oder gewünschte Darstellung maschinell erkennbar wird. Solche Markierungen heißen oft Tags. HTML ist das bekannteste Beispiel: Es kann etwa kennzeichnen, was eine Überschrift, ein Absatz oder eine Betonung ist.
Auf dieser Seite lernst du, wie Tags zusammengehören, wie sich Bedeutung und Aussehen unterscheiden und warum getrennte Darstellungsregeln denselben Inhalt vielseitig nutzbar machen.
Hake ab, was du schon kannst — und komm am Ende hierher zurück!
Wozu dient eine Auszeichnungssprache?
Stell dir einen Text mit den Zeilen „Mein Verein“, „Training“ und „Dienstag, 17 Uhr“ vor. Für einen Menschen kann die Anordnung genügen. Ein Computer weiß dadurch aber noch nicht sicher, welche Zeile die Hauptüberschrift und welche ein Absatz ist. Markup macht diese Rollen ausdrücklich erkennbar.
Auszeichnungssprache
Eine Auszeichnungssprache ist eine formale Sprache. Ihre festgelegten Markierungen kennzeichnen Bestandteile eines Textes oder von Daten. Die Markierungen können Struktur, Bedeutung, Darstellung oder Verarbeitungshinweise ausdrücken.
Der Begriff Auszeichnung stammt aus dem Druckwesen. Dort wurden Manuskripte mit Hinweisen zu Schriftart, Größe oder Hervorhebung versehen. Digitale Auszeichnung ist maschinenlesbar und kann außer Text auch Daten gliedern.
Die Namen h1 und p stehen in HTML für unterschiedliche Rollen:
h1kennzeichnet die wichtigste Überschrift.pkennzeichnet einen Textabsatz.
Der Browser kann beide Elemente verschieden darstellen. Entscheidend ist zunächst aber ihre Bedeutung im Dokument.
Bedeutung oder bloßes Aussehen?
Nicht jede Markierung sagt dasselbe aus. Besonders wichtig ist der Unterschied zwischen beschreibendem und darstellendem Markup.
| Art | Was wird festgelegt? | Beispielidee |
|---|---|---|
| beschreibend | Struktur oder Bedeutung | „Das ist eine Überschrift“ oder „Das ist wichtig“ |
| darstellend | konkrete Erscheinung | „Setze diesen Text fett“ oder „Färbe ihn rot“ |
| prozedural | Verarbeitungsschritt | „Wähle eine Schrift, gehe an eine Position, gib Text aus“ |
Beschreibendes Markup wird auch deskriptiv oder semantisch genannt. Darstellendes Markup heißt auch präsentational. Die Fachbegriffe wurden historisch nicht immer exakt gleich verwendet. Die Grundfrage bleibt aber nützlich: Benennt die Markierung die Rolle des Inhalts oder sein Aussehen?
Die HTML-Elemente strong und b können im Browser beide fett erscheinen. Sie bedeuten trotzdem nicht dasselbe:
strongkennzeichnet besondere Wichtigkeit.bverlangt einen anderen Schriftschnitt, ohne diese Wichtigkeit auszudrücken.
Genauso bezeichnet em eine Betonung, während i einen abweichenden, meist kursiven Schriftschnitt bezeichnet. Gleiches Aussehen beweist also nicht gleiche Bedeutung.
Warum Inhalt und Darstellung trennen?
Wenn im Dokument „Überschrift“ steht statt „24 Pixel, fett und blau“, bleibt die Struktur erhalten. Eine zentrale Stilregel kann anschließend bestimmen, wie alle Überschriften aussehen.
Ein Nachrichtenbeitrag enthält semantisch gekennzeichnete Titel, Zwischenüberschriften und Absätze.
- Regelset A zeigt den Titel groß und dunkel für einen Bildschirm.
- Regelset B zeigt denselben Titel kompakter und kontrastreich für einen Ausdruck.
Der ausgezeichnete Beitrag bleibt unverändert. Nur die Darstellungsregeln wechseln.
Diese Trennung bringt mehrere Vorteile:
- Ein Stil lässt sich an einer zentralen Stelle ändern.
- Gleichartige Elemente sehen konsistent aus.
- Derselbe Inhalt kann für verschiedene Geräte oder Ausgabeformate genutzt werden.
- Programme können die Struktur erkennen, etwa Überschriften stärker gewichten.
- Der Quelltext bleibt leichter wartbar, weil Darstellungsangaben nicht ständig wiederholt werden.
In Webseiten beschreibt HTML vor allem Struktur und Bedeutung. CSS enthält Darstellungsregeln. Eine CSS-Regel kann zum Beispiel allen em-Elementen eine bestimmte Farbe geben, ohne jedes Vorkommen einzeln zu ändern.
Die Trennung ist ein Ziel, aber nicht immer vollständig. Automatische Umbrüche können ungünstig ausfallen; dann sind einzelne darstellende Korrekturen sinnvoll. Wichtig ist, solche Eingriffe sparsam zu verwenden und die logische Struktur nicht zu verlieren.
Wie wird aus Markup eine Ausgabe?
Ausgezeichneter Quelltext ist meist noch nicht die fertige Ansicht. Ein verarbeitendes Programm liest die Markierungen, wendet Regeln an und erzeugt eine Ausgabe.
Ein vereinfachter Datenfluss sieht so aus:
- Eingabe: Ein Text enthält markierte Titel, Absätze und Betonungen.
- Verarbeitung: Ein Browser liest HTML und wendet CSS-Regeln an.
- Ausgabe: Auf dem Bildschirm erscheinen gegliederter Text, Abstände und Hervorhebungen.
Ändert sich nur eine CSS-Regel, bleibt die Eingabe gleich, aber die Ausgabe sieht anders aus. Ändert sich der Inhalt eines Absatzes, wird dieser neue Inhalt mit denselben Regeln dargestellt.
Andere Systeme arbeiten ähnlich:
- XML kann fachliche Daten wie Produktname, Menge und Preis strukturieren.
- Eine Transformation kann strukturiertes XML in ein anderes Format überführen.
- LaTeX kennzeichnet Dokumentteile und verarbeitet sie zu einer gesetzten Ausgabe.
- Leichtgewichtige Sprachen nutzen kurze Zeichenfolgen und werden häufig in HTML umgewandelt.
Auszeichnungssprache, Programmiersprache und Dateiformat sind keine deckungsgleichen Begriffe. XML legt Regeln zur Strukturierung fest und ist nicht allein deshalb eine Programmiersprache. Manche markupnahen Sprachen oder Transformationssprachen können dagegen auch komplexe Verarbeitung ausdrücken. PDF beschreibt eine fertige Seitenansicht, ist aber nicht einfach der semantische Markup-Quelltext.
Prüfe bei einem Format drei Fragen: Was wird markiert? Welche Regeln verarbeiten die Markierungen? Welche Ausgabe entsteht?
Karteikasten
Überlege zuerst selbst und drehe die Karte anschließend zum Prüfen um.
Alles auf einen Blick
- Auszeichnungssprache
- Aufbau: Tags, Elemente und Verschachtelung
- Aussage: Struktur, Bedeutung oder konkrete Darstellung
- Verarbeitung: ausgezeichneter Inhalt, Darstellungsregeln und sichtbare Ausgabe
Mit Google fortfahren