Informatik

Auszeichnungssprache: Tags, Struktur und Darstellung

Auszeichnungssprache: Tags, Struktur und Darstellung
Auszeichnungssprache: Tags, Struktur und Darstellung
Für Quiz, Lückentext, Lernkarten und Fortschritt ist JavaScript nötig. Alle Inhalte und Lösungen bleiben direkt lesbar.

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.

Deine Lernziele

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.

Definition

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.

Beispiel

Die Namen h1 und p stehen in HTML für unterschiedliche Rollen:

  • h1 kennzeichnet die wichtigste Überschrift.
  • p kennzeichnet einen Textabsatz.

Der Browser kann beide Elemente verschieden darstellen. Entscheidend ist zunächst aber ihre Bedeutung im Dokument.

Teste dich
Frage 1 von 1LeichtWelche Aussage trifft den Kern einer Auszeichnungssprache?
Lösung: Sie kennzeichnet Bestandteile von Texten oder Daten nach festgelegten Regeln. — Markup ergänzt Inhalte um maschinenlesbare Kennzeichnungen. Diese können mehr ausdrücken als bloßes Aussehen.
Wie bilden Tags eine Struktur?

Viele Auszeichnungssprachen verwenden Start- und End-Tags. Ein Start-Tag beginnt ein Element, das passende End-Tag beendet es. Dazwischen steht der Inhalt.

In HTML besteht ein Start-Tag aus der öffnenden spitzen Klammer <, einem Namen wie h1 und der schließenden spitzen Klammer >. Beim End-Tag steht vor dem Namen zusätzlich ein Schrägstrich. So lässt sich ein vollständiges Element ohne rohe HTML-Schreibweise lesen:

h1-Start-Tag + Meine Stadt + h1-End-Tag

Definition

Element

Ein typisches Element ist die ganze Einheit aus Start-Tag, Inhalt und End-Tag. Der Tag ist nur die Markierung am Anfang oder Ende.

Manche HTML-Elemente wie img schließen keinen Text ein. Sie benötigen deshalb kein solches Paar aus Start- und End-Tag.

Elemente können verschachtelt sein: Ein Element liegt vollständig innerhalb eines anderen. Dadurch entsteht eine Hierarchie.

Beispiel

Ein Artikel enthält eine Überschrift und einen Absatz. Im Absatz ist das Wort „unbedingt“ als wichtig markiert.

Die gedankliche Struktur lautet:

  • Artikel
  • darin eine Überschrift: „Schulfest“
  • darin ein Absatz
  • innerhalb des Absatzes die wichtige Stelle „unbedingt“

Das innere Element endet, bevor der äußere Absatz endet. So bleibt die Verschachtelung eindeutig.

Merke

Wie bei Klammern gilt: Was zuletzt geöffnet wurde, muss zuerst geschlossen werden.

Teste dich
Frage 1 von 2LeichtWas gehört bei einem typischen Textelement zur vollständigen Einheit?
Lösung: Start-Tag, Inhalt und passendes End-Tag — Ein typisches Textelement umfasst seine Begrenzungen und den eingeschlossenen Inhalt.
Frage 2 von 2MittelZuerst wird ein Absatz geöffnet, darin eine Betonung. Was muss zuerst enden?
Lösung: die Betonung — Bei korrekter Verschachtelung wird das zuletzt geöffnete, innere Element zuerst geschlossen.
Bedeutung oder bloßes Aussehen?

Nicht jede Markierung sagt dasselbe aus. Besonders wichtig ist der Unterschied zwischen beschreibendem und darstellendem Markup.

ArtWas wird festgelegt?Beispielidee
beschreibendStruktur oder Bedeutung„Das ist eine Überschrift“ oder „Das ist wichtig“
darstellendkonkrete Erscheinung„Setze diesen Text fett“ oder „Färbe ihn rot“
prozeduralVerarbeitungsschritt„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?

Beispiel

Die HTML-Elemente strong und b können im Browser beide fett erscheinen. Sie bedeuten trotzdem nicht dasselbe:

  • strong kennzeichnet besondere Wichtigkeit.
  • b verlangt 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.

Teste dich
Frage 1 von 2LeichtWelche Kennzeichnung ist beschreibend?
Lösung: „Dieser Text ist eine Abschnittsüberschrift.“ — Eine Abschnittsüberschrift benennt die logische Funktion. Ihre Größe und Farbe können später festgelegt werden.
Frage 2 von 2MittelZwei Elemente erscheinen standardmäßig fett. Was darfst du daraus schließen?
Lösung: Ihr Aussehen kann gleich sein, obwohl ihre Bedeutung verschieden ist. — Beurteile Markup nach der ausgezeichneten Rolle, nicht nur nach der sichtbaren Standarddarstellung.
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.

Beispiel

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.

Gut zu wissen

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.

Teste dich
Frage 1 von 2MittelEine Schule möchte dieselben Mitteilungen auf Bildschirm und Papier unterschiedlich gestalten. Welche Lösung erhält die Struktur am besten?
Lösung: Die Mitteilungen werden semantisch ausgezeichnet; zwei Regelsets bestimmen die jeweilige Darstellung. — Getrennter Inhalt und getrennte Darstellungsregeln erlauben verschiedene Ausgaben aus derselben strukturierten Grundlage.
Frage 2 von 2SchwerEine Regel ändert die Farbe aller Überschriften. Warum muss der Inhalt nicht bearbeitet werden?
Lösung: Weil die Überschriften nach ihrer Rolle markiert sind und die zentrale Regel diese Rolle anspricht. — Semantische Kennzeichnung liefert den Anknüpfungspunkt; die Stilregel übersetzt diese Rolle in ein Aussehen.
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.

Beispiel

Ein vereinfachter Datenfluss sieht so aus:

  1. Eingabe: Ein Text enthält markierte Titel, Absätze und Betonungen.
  2. Verarbeitung: Ein Browser liest HTML und wendet CSS-Regeln an.
  3. 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.

Merke

Prüfe bei einem Format drei Fragen: Was wird markiert? Welche Regeln verarbeiten die Markierungen? Welche Ausgabe entsteht?

Teste dich
Frage 1 von 2MittelWas verändert sich, wenn bei unverändertem HTML nur eine CSS-Regel geändert wird?
Lösung: die Darstellung der betroffenen Elemente — Die Eingabe kann gleich bleiben, während eine geänderte Stilregel eine andere Ausgabe erzeugt.
Frage 2 von 2SchwerEin Format kann Daten strukturieren. Ist es deshalb automatisch eine Programmiersprache?
Lösung: Nein, Strukturierung allein beweist keine Fähigkeit, Algorithmen auszuführen. — Beurteile getrennt, ob ein Format Daten beschreibt und ob es Rechen- oder Kontrollabläufe ausdrücken kann.
Karteikasten
Karteikasten

Überlege zuerst selbst und drehe die Karte anschließend zum Prüfen um.

Alles auf einen Blick
Mindmap
  • Auszeichnungssprache
    • Aufbau: Tags, Elemente und Verschachtelung
    • Aussage: Struktur, Bedeutung oder konkrete Darstellung
    • Verarbeitung: ausgezeichneter Inhalt, Darstellungsregeln und sichtbare Ausgabe
Abschluss-Check
Teste dich
Frage 1 von 3LeichtWelche Aussage unterscheidet Tag und Element richtig?
Lösung: Ein Tag ist eine Begrenzungsmarkierung; das Element umfasst Markierungen und Inhalt. — Der Tag markiert Anfang oder Ende. Das typische Element ist die vollständige ausgezeichnete Einheit.
Frage 2 von 3MittelEine Überschrift soll in einer App anders aussehen als im Ausdruck. Was sollte unverändert bleiben?
Lösung: ihre semantische Kennzeichnung als Überschrift — Die Rolle gehört zum Inhalt; Größe, Farbe und Abstände gehören zu den Darstellungsregeln.
Frage 3 von 3SchwerEin Dokument markiert wichtige Wörter nur mit „fett“. Welche Information kann bei einer späteren Umgestaltung fehlen?
Lösung: ob die Wörter inhaltlich wichtig waren oder nur anders aussehen sollten — Rein visuelles Markup bewahrt das Aussehen, aber nicht zuverlässig den Grund für dieses Aussehen. Beschreibendes Markup erhält diese Bedeutung.

Passend dazu