Im Gespräch mit Deiner Agentur fallen drei Begriffe immer wieder: HTML, CSS, JavaScript. Du nickst mit, weißt aber nicht so genau, wo der eine aufhört und der nächste anfängt. Das ist Alltag bei Selbständigen und Webseitenbetreibern.
Eine Webseite besteht aus drei Schichten, die wie bei einem Haus übereinander liegen. HTML ist das Gerüst, CSS die Kleidung, JavaScript die Muskeln. Wer dieses Bild im Kopf hat, ordnet Wünsche der richtigen Schicht zu und spart sich Stunden an Missverständnissen. Code lesen musst Du dafür an keiner Stelle.
HTML — die Struktur Deiner Webseite
HTML steht für Hypertext Markup Language. Diese Schicht legt fest, was auf der Seite steht und in welcher Reihenfolge: Überschriften, Absätze, Listen, Bilder, Links. Stell es Dir als Skelett vor. Die Form steht, aber alles ist noch nackt.
Wichtig ist dabei die Bedeutung dahinter. HTML unterscheidet zwischen einer Hauptüberschrift, einer Zwischenüberschrift, einem Fließtext und einem Listenpunkt. Suchmaschinen lesen genau diese Bedeutung aus. Eine als Hauptüberschrift ausgezeichnete Zeile wiegt für Google schwerer als ein beliebiger Satz mittendrin. Deshalb ist es kein kosmetisches Detail, ob ein Text als echte Überschrift angelegt ist oder nur größer und fett gemacht wurde.
Auch Bilder sitzen in der HTML-Schicht, samt Alternativtext und Dateipfad. Welches Bilddateiformat sich für welches Motiv eignet, ist eine eigene Entscheidung mit Folgen für Ladezeit und Schärfe. HTML sagt nur: hier kommt ein Bild hin.
Öffnest Du eine Webseite ohne ihre beiden anderen Schichten, siehst Du reines HTML: Text auf weißem Grund, blau unterstrichene Links, schwarze Überschriften. Schlicht, aber lesbar. Auf genau dieser Ebene sind Suchmaschinen und Vorleseprogramme für blinde Menschen unterwegs.
CSS — das Aussehen Deiner Webseite
CSS steht für Cascading Style Sheets. Diese Schicht bestimmt, wie das HTML aussieht: Farben, Schriften, Abstände, Größen, Spalten. CSS ist die Kleidung, die Möbel und das Licht im Haus.
Hier wird festgelegt, dass eine Überschrift groß und in Deiner Hausschrift erscheint, mit ruhigem Abstand zum nächsten Absatz. Genauso entstehen Buttons, Spaltenraster und Hintergründe. Eine ganze Webseite kann optisch radikal anders wirken, ohne dass sich am Inhalt ein einziges Wort ändert. Getauscht wird nur die CSS-Schicht.
CSS regelt auch das Verhalten der Seite auf verschiedenen Bildschirmgrößen. Ein Layout, das am Desktop dreispaltig ist und am Handy untereinander steht, ist klassische CSS-Arbeit. Welche Webdesign-Arten es gibt, vom responsiven bis zum minimalistischen Ansatz, entscheidet sich auf dieser Ebene.
Zur CSS-Schicht gehört außerdem die Typografie. Welche Schriftarten zu Deiner Marke passen, wie luftig die Zeilen stehen, ob Texte linksbündig oder im Blocksatz laufen: all das wird hier gesetzt, nicht im Inhalt selbst.
JavaScript — das Verhalten Deiner Webseite
JavaScript ist die dritte Schicht. Sie reagiert auf Aktionen: Klicks, Eingaben, Scrollen, Mausbewegungen. JavaScript bringt die Muskeln ins Haus, damit überhaupt etwas passiert.
Ein Filter, der die Produktliste sofort neu sortiert, sobald Du eine Kategorie anwählst, ist JavaScript. Ein Formular, das schon beim Tippen prüft, ob die E-Mail-Adresse gültig aussieht. Ein Cookie-Banner, der nach Deiner Wahl bestimmte Dienste freigibt. Ein Bildslider, der von selbst weiterschiebt. Eine Karte, die sich mit der Maus ziehen lässt.
JavaScript läuft im Browser, also direkt auf dem Gerät des Besuchers. Es kann Inhalte nachladen, ohne dass die ganze Seite neu lädt. Genau deshalb funktionieren Web-Anwendungen wie Online-Kalender, Chats oder Bild-Editoren überhaupt im Browser.
Eine kleine Abgrenzung gegenüber CSS: Auch CSS kann Bewegung. Hover-Effekte, sanfte Übergänge und einfache Animationen laufen ohne JavaScript. Sobald Bewegung aber von Daten oder echter Logik abhängt, übernimmt JavaScript.
Wie die drei Schichten zusammenspielen
Öffnest Du eine Webseite, lädt der Browser zuerst das HTML und baut daraus die Grundstruktur. Direkt im Anschluss kommt die CSS-Schicht dazu, und die Seite bekommt ihr Aussehen. Erst danach startet JavaScript, oft sogar nachträglich, während Du schon liest.
Diese Reihenfolge ist gewollt. Eine Seite soll auch dann lesbar bleiben, wenn JavaScript blockiert ist oder noch lädt. Suchmaschinen, Vorleseprogramme und Menschen mit langsamer Verbindung profitieren davon, wenn Struktur und Aussehen allein schon eine sinnvolle Seite ergeben.
Daraus folgt eine Praxis-Regel für Deinen Alltag: Je mehr Inhalt direkt in der HTML-Schicht steht, desto robuster die Seite. JavaScript darf Komfort dazugeben, aber es sollte nicht die Voraussetzung dafür sein, dass überhaupt etwas zu sehen ist.
Woran Du den Aufwand erkennst
Im Alltag mit Deiner Agentur hilft Dir das Drei-Schichten-Modell, Aufwand realistischer einzuschätzen. Als grobe Faustregel:
- Farbe oder Schrift ändern: reine CSS-Arbeit, meistens kleiner Eingriff.
- Neuer Inhalts-Bereich auf der Seite: Inhalt plus Gestaltung, also HTML und CSS, mittlerer Eingriff.
- Live-Filter, mitdenkendes Formular, eigene Cookie-Banner-Logik: JavaScript, größerer Eingriff.
- Neue Datenquelle, Login-Bereich, Bezahlfunktion: JavaScript plus eine Schicht auf dem Server, der größte Eingriff.
Verstehe das als Einordnung, nicht als Preisliste. Eine kleine Farb-Anpassung kann in Minuten erledigt sein. Eine neue interaktive Funktion verlangt oft Konzept, Umsetzung, Test und Dokumentation, auch wenn im Browser am Ende nur ein neuer Knopf erscheint.
Was nicht zu HTML, CSS oder JavaScript gehört
Hinter den drei Browser-Schichten arbeitet eine vierte: der Server. Dort liegt die Datenbank, dort läuft das Content-Management-System wie TYPO3 oder WordPress, dort wird im Hintergrund gerechnet. Tippst Du im Backend einen Beitrag und klickst auf „Speichern", wandert der Text in die Datenbank, lange bevor ihn irgendein Browser zu sehen bekommt. Was genau eine Datenbank ist und wie sie Deine Inhalte ordnet, liest Du im Beitrag Was ist eine Datenbank.
Diese Schicht bleibt für den Besucher unsichtbar. Sie liefert das fertige HTML aus, gehört aber selbst nicht zu den drei Browser-Schichten. Wer den Aufbau einer Webadresse kennt, sieht den Übergang deutlich: Domain und Pfad zeigen auf den Server, alles danach im Browser Sichtbare ist das Zusammenspiel von HTML, CSS und JavaScript.
Begriffe wie Hosting, CMS, Datenbank oder Programmiersprachen auf dem Server gehören also auf die Server-Seite, nicht in dieses Drei-Schichten-Modell. Das hilft Dir, im Gespräch die richtige Frage an die richtige Stelle zu richten.
Warum dieses Wissen Deine Gespräche verbessert
Mit dem Drei-Schichten-Bild im Kopf formulierst Du Deine Wünsche präziser. Statt „mach das mobil schöner" sagst Du: „Die Buchungs-Übersicht soll am Handy untereinander stehen statt nebeneinander." Statt „der Filter soll besser werden" sagst Du: „Beim Anklicken einer Kategorie soll die Liste sofort neu sortiert sein, ohne dass die Seite komplett neu lädt."
Beide Wünsche werden damit greifbar. Der erste ist eine CSS-Aufgabe, der zweite eine JavaScript-Aufgabe. Deine Agentur muss nicht erst nachfragen, was Du genau meinst, und Du bekommst eine Einschätzung von Aufwand und Zeitrahmen, die zu Deiner Vorstellung passt.
Programmieren musst Du dafür nie. Es reicht, dass Du weißt, in welcher Schicht Dein Wunsch ankommt. Und wenn einmal etwas nicht funktioniert, hilft Dir dasselbe Bild bei der Frage, woran es liegt: an der Struktur, am Aussehen oder am Verhalten.
Fazit
HTML, CSS und JavaScript sind drei Werkzeuge mit klar getrennten Aufgaben. Struktur, Aussehen, Verhalten: in dieser Reihenfolge baut sich jede Webseite auf, von der einfachen Visitenkarte bis zum komplexen Online-Shop.
Wer das einmal verstanden hat, sieht hinter den Fachbegriffen ein verständliches Modell. Im Austausch mit Entwicklern und Agenturen gewinnst Du damit genau das, was im Alltag oft fehlt: Klarheit darüber, wo das Wesentliche passiert.