Mit Google fortfahren
Inhalt und Darstellung trennen – einfach erklärt
Inhalt beschreibt, was vermittelt wird. Darstellung legt fest, wie dieser Inhalt aussieht. Sind beide getrennt, kannst du dieselben Inhalte unterschiedlich gestalten und das Design zentral ändern.
Auf Webseiten übernimmt HTML die inhaltliche Struktur, CSS die Gestaltung und JavaScript das Verhalten. Dieses Prinzip heißt Trennung von Zuständigkeiten.
Hake ab, was du schon kannst — und komm am Ende hierher zurück!
Warum lohnt sich die Trennung?
Stell dir vor, ein Hinweis erscheint auf vielen Seiten. Seine Bedeutung bleibt gleich, aber seine Gestaltung soll sich ändern: Statt eines roten Rahmens soll er künftig einen blauen Hintergrund erhalten.
Sind Inhalt und Gestaltung vermischt, musst du möglicherweise viele einzelne Stellen bearbeiten. Bei einer sauberen Trennung bleibt der Hinweis inhaltlich unverändert. Du passt nur die zentrale Darstellungsregel an.
Trennung von Zuständigkeiten
Verschiedene Teile einer Aufgabe werden von verschiedenen Teilen der Lösung übernommen. Inhalt, Darstellung und Verhalten erhalten jeweils eine möglichst klar abgegrenzte Zuständigkeit.
Die Trennung unterstützt vor allem:
- zentrale Änderungen: Eine Darstellungsregel kann für viele Inhalte geändert werden;
- Wiederverwendung: Derselbe Inhalt kann in mehreren Gestaltungen oder Ausgabeformaten erscheinen;
- konsistente Gestaltung: Gemeinsame Regeln sorgen für ein einheitliches Erscheinungsbild;
- Wartbarkeit: Du findest leichter die Stelle, die für eine gewünschte Änderung zuständig ist.
Diese Vorteile entstehen nicht automatisch. Die Inhalte müssen sinnvoll strukturiert und die Regeln tatsächlich getrennt verwaltet werden.
Drei Schichten einer Webseite
Bei einer Webseite arbeiten meist drei Techniken zusammen.
HTML beschreibt Inhalt und Struktur
HTML kennzeichnet die Bedeutung von Bestandteilen: zum Beispiel Überschrift, Absatz, Liste, wichtiger Abschnitt oder Datentabelle. Es beantwortet vor allem die Frage: Was ist das?
Ein HTML-Name sollte deshalb die Bedeutung ausdrücken. hinweis beschreibt den Zweck einer Auszeichnung. rot-unterstrichen beschreibt dagegen nur eine momentane Optik und passt nach einer Designänderung möglicherweise nicht mehr.
CSS gestaltet die Struktur
CSS legt beispielsweise Farben, Schriftgrößen, Abstände und Rahmen fest. Es kann außerdem unterschiedliche Darstellungen für Smartphone, großen Bildschirm oder Papier definieren. Es beantwortet die Frage: Wie soll es aussehen?
Ein zentrales Stylesheet kann viele Seiten gemeinsam formatieren. Eine Änderung an einer Regel wirkt dann auf alle passenden Elemente.
JavaScript ergänzt Verhalten
JavaScript reagiert auf Ereignisse und kann das Dokument verändern. Es beantwortet die Frage: Was soll passieren?
Soll ein Hinweis nach einem Klick hervorgehoben werden, kann JavaScript seine Klassenzugehörigkeit ändern. Die Klasse löst anschließend eine CSS-Regel aus. JavaScript steuert also den Zustand; CSS bestimmt dessen Aussehen.
HTML gibt dem Inhalt Bedeutung und Struktur. CSS bestimmt die Darstellung. JavaScript ergänzt Verhalten und Interaktivität.
Wähle in jeder Lücke die passende Form und prüfe anschließend deine Antworten.
Eine Überschrift gehört zur Schicht . Ihre Schriftgröße legt fest. Eine Reaktion auf einen Klick übernimmt meist .
So arbeiten die Schichten zusammen
Die Trennung bedeutet nicht, dass die Schichten nichts miteinander zu tun haben. Sie arbeiten zusammen, behalten aber unterschiedliche Aufgaben.
Eine Webseite enthält einen wichtigen Hinweis.
- HTML kennzeichnet den Text als Hinweis und gibt ihm damit eine inhaltliche Bedeutung.
- CSS legt fest, wie Hinweise dargestellt werden, etwa mit Abstand und Rahmen.
- JavaScript kann nach einer Benutzeraktion eine zusätzliche Klasse setzen.
- CSS gestaltet den dadurch entstandenen Zustand.
Der entscheidende Gedanke: JavaScript muss die konkreten Farben nicht festlegen. Es löst eine Zustandsänderung aus; die passende Gestaltung bleibt Aufgabe von CSS.
Ereignisangaben wie onclick direkt im HTML vermischen Struktur und Verhalten. Bei unaufdringlichem JavaScript steht die Ereignislogik stattdessen in einer JavaScript-Datei und wird beim Laden mit den betreffenden Elementen verbunden.
Auch zusätzliche Strukturelemente, die ausschließlich für eine bestimmte Optik eingefügt werden, können die Trennung schwächen. HTML-Elemente sollen möglichst wegen ihrer inhaltlichen Bedeutung vorhanden sein.
Eine brauchbare Basis bleibt erhalten
Die drei Techniken lassen sich als Schichten betrachten:
- HTML ist die Grundlage. Inhalt und grundlegende Struktur sollen verständlich sein.
- CSS verbessert die Darstellung. Fehlt CSS, soll der Inhalt möglichst weiterhin nutzbar bleiben.
- JavaScript ergänzt Interaktivität. Fehlt JavaScript, soll die Grundfunktion möglichst erhalten bleiben.
Dieses Vorgehen heißt Progressive Enhancement: Eine verlässliche Grundschicht wird schrittweise erweitert.
Nicht jede Webanwendung kann ihre eigentliche Funktion ohne JavaScript anbieten. Die Forderung nach einer funktionsfähigen Basis gilt dort, wo die Grundfunktion ohne JavaScript sinnvoll verständlich und bedienbar sein kann.
Derselbe Inhalt in mehreren Formen
Das Prinzip gilt nicht nur für Webseiten. Auch Dokumente und Content-Management-Systeme können mehrere Ebenen getrennt verwalten:
- Inhalt oder Information: Was steht im Dokument?
- Struktur: Wo und in welcher Ordnung erscheinen Überschriften, Bilder und Textblöcke?
- Layout: Welche Farben, Schriftarten, Größen, Rahmen und Spalten werden verwendet?
Software kann diese getrennten Angaben für eine konkrete Ausgabe zusammenführen. Derselbe Inhalt kann dadurch beispielsweise als Webseite und als PDF erscheinen. Auch verschiedene Vorlagen können auf dieselben Inhalte angewendet werden.
Eine Schule veröffentlicht dieselbe Terminübersicht auf ihrer Webseite und in einem PDF.
Die Termine bilden den Inhalt. Die Reihenfolge und Gruppierung bilden die Struktur. Farben, Schriften und Seitenaufteilung gehören zum Layout.
Ändert sich ein Termin, wird der Inhalt angepasst. Soll nur das PDF ein neues Erscheinungsbild erhalten, wird dessen Layout geändert. Die Termine müssen dafür nicht neu geschrieben werden.
In einem Content-Management-System werden Texte und Medien unabhängig von Designvorlagen verwaltet. Dadurch können Personen Inhalte bearbeiten, ohne jedes Darstellungsdetail unmittelbar ändern zu müssen.
Prüfe selbst: Was gehört wohin?
Nutze bei jeder Entscheidung drei Fragen:
- Was bedeutet oder enthält das Element? Das gehört zu Inhalt und Struktur.
- Wie soll es aussehen? Das gehört zur Darstellung.
- Was soll bei einem Ereignis passieren? Das gehört zum Verhalten.
Ordne die folgenden Wünsche zu:
- „Der Abschnitt ist eine Überschrift.“ → Inhalt und Struktur, also HTML.
- „Die Überschrift soll auf kleinen Bildschirmen kleiner erscheinen.“ → Darstellung, also CSS.
- „Nach einem Klick klappt eine Erklärung auf.“ → Verhalten, also JavaScript.
- „Der Hinweistext wird fachlich korrigiert.“ → Inhalt, also HTML beziehungsweise das getrennt verwaltete Inhaltssystem.
Typische Fehler
- Ein Name wie
blaubindet die Struktur an eine aktuelle Gestaltung. Ein Name wiezusatzinfobeschreibt den Zweck dauerhafter. - Gestaltung direkt an vielen einzelnen Elementen zu wiederholen erschwert zentrale Änderungen.
- Farb- und Schriftregeln in JavaScript vermischen Verhalten und Darstellung.
- Die Trennung ist kein Selbstzweck: Die Ebenen müssen bei der Ausgabe weiterhin korrekt zusammenarbeiten.
Karteikasten
Überlege zuerst selbst und drehe die Karte anschließend zum Prüfen um.
Alles auf einen Blick
- Trennung von Inhalt und Darstellung
- HTML: Inhalt und bedeutungsvolle Struktur
- CSS: zentrale Darstellungsregeln
- JavaScript: Verhalten und Zustandsänderungen
- Wiederverwendung: ein Inhalt in mehreren Ausgaben
- Wartung: Änderungen an der zuständigen Stelle
- Grundprinzip: Bedeutung statt momentaner Optik benennen
Abschluss-Check
Du hast das Prinzip verstanden, wenn du bei einer Änderung zuerst die zuständige Ebene bestimmen kannst: Bedeutung und Inhalt, Darstellung oder Verhalten.