Inhalt und Darstellung trennen: HTML, CSS und JavaScript zuordnen

Stell dir als fiktives Beispiel 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.

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.

Bei einer Webseite arbeiten meist drei Techniken zusammen.

HTML beschreibt Inhalt und Struktur

HTML ist eine Auszeichnungssprache. Du beschreibst damit die Bestandteile einer Seite durch Elemente, also Bausteine wie einen Absatz oder eine Überschrift. HTML kennzeichnet die Bedeutung von Bestandteilen: zum Beispiel Überschrift, Absatz, Liste, wichtiger Abschnitt oder Datentabelle. Es beantwortet vor allem die Frage: Was ist das?

Mit einer Klasse kannst du Elementen einen gemeinsamen Namen zuordnen, damit CSS oder JavaScript sie gezielt auswählen kann. Wähle dafür möglichst einen Namen, der ihren Zweck beschreibt: hinweis bleibt nach einer Designänderung passend, rot-unterstrichen möglicherweise nicht. Der Klassenname allein macht aus einem Absatz aber kein besonderes HTML-Hinweiselement. Die Bedeutung für den Browser ergibt sich aus den verwendeten HTML-Elementen und ihren standardisierten Eigenschaften.

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 Stylesheet ist eine Sammlung von CSS-Regeln. Jede Regel legt fest, für welche Elemente welche Gestaltung gelten soll. Eine zentrale CSS-Datei kann von vielen Seiten gemeinsam eingebunden werden. Änderst du eine Regel, wird sie beim erneuten Laden für alle passenden Elemente berücksichtigt. Andere, vorrangige Regeln können einzelne Angaben allerdings überlagern.

JavaScript ergänzt Verhalten

JavaScript ist eine Programmiersprache. Sie kann auf Ereignisse, zum Beispiel einen Klick, reagieren und das im Browser angezeigte Dokument verändern. Es beantwortet die Frage: Was soll passieren?

Soll ein Hinweis nach einem Klick hervorgehoben werden, kann JavaScript seine Klassenzugehörigkeit ändern. Eine passende CSS-Regel wählt das Element nun anhand der neuen Klasse aus. JavaScript steuert also den Zustand; CSS bestimmt dessen Aussehen.

Die Trennung bedeutet nicht, dass die Schichten nichts miteinander zu tun haben. Sie arbeiten zusammen, behalten aber unterschiedliche Aufgaben.

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.

Das Schichtenmodell beschreibt Zuständigkeiten, keine strikten technischen Grenzen: HTML bietet beispielsweise mit den Elementen details und summary einen aufklappbaren Bereich samt Beschriftung. Diesen kann der Browser schon ohne JavaScript öffnen und schließen.

Die drei Techniken lassen sich trotzdem als aufeinander aufbauende Schichten betrachten:

1. HTML ist die Grundlage. Inhalt und grundlegende Struktur sollen verständlich sein.
2. CSS verbessert die Darstellung. Fehlt CSS, soll der Inhalt möglichst weiterhin nutzbar bleiben.
3. 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.

Das Prinzip gilt nicht nur für Webseiten. Auch bei Dokumenten kannst du unterscheiden:

• Inhalt oder Information: Was steht im Dokument?
• Struktur: Welche Bestandteile gehören zusammen, und in welcher inhaltlichen Reihenfolge stehen sie?
• Layout: Wie sind die Bestandteile auf der Seite angeordnet, und 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.

Ein Content-Management-System (CMS) ist Software, mit der du Inhalte wie Texte und Bilder verwaltest. Ein CMS kann diese Inhalte getrennt von Designvorlagen speichern. Solche Vorlagen geben wiederkehrende Struktur- und Gestaltungsregeln vor. Dadurch können Personen Inhalte bearbeiten, ohne jedes Darstellungsdetail unmittelbar ändern zu müssen.

Nutze bei jeder Entscheidung drei Fragen:

1. Was bedeutet oder enthält das Element? Das gehört zu Inhalt und Struktur.
2. Wie soll es aussehen? Das gehört zur Darstellung.
3. Was soll bei einem Ereignis passieren? Das gehört zum Verhalten.

Übung: Änderungen richtig zuordnen

Ordne die Wünsche der passenden Zuständigkeit zu und begründe deine Antwort:

• Ein Abschnitt soll als Überschrift ausgezeichnet werden.
• Diese Überschrift soll auf kleinen Bildschirmen kleiner erscheinen.
• Eine eigens programmierte Klickreaktion soll dem Hinweis die Klasse hervorgehoben hinzufügen.
• Der Hinweistext soll fachlich korrigiert werden.

Typische Fehler

• Ein Name wie blau bindet die Struktur an eine aktuelle Gestaltung. Ein Name wie zusatzinfo beschreibt 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.

Du hast das Prinzip verstanden, wenn du bei einer Änderung zuerst die zuständige Ebene bestimmen kannst: Bedeutung und Inhalt, Darstellung oder Verhalten.