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 kein Wissenslücken-Drama, sondern Alltag.
Eine Webseite besteht aus drei Schichten, die genau wie ein Haus übereinander liegen. HTML ist der Rohbau, CSS der Anstrich, JavaScript bringt Leben in die Räume. Wer dieses Bild im Kopf hat, kann Wünsche der richtigen Schicht zuordnen und sich Stunden an Missverständnissen ersparen.
HTML — die Struktur Deiner Webseite
HTML steht für Hypertext Markup Language. Es legt fest, was auf der Seite steht und in welcher Reihenfolge: Überschriften, Absätze, Listen, Bilder, Links. Du kannst Dir HTML als Skelett vorstellen: die Form steht, aber alles ist noch nackt.
Eine Überschrift wird in HTML durch ein <h1>-Tag markiert, ein Absatz durch <p>, eine Liste durch <ul>. Diese Tags sind nicht nur Schnörkel: Suchmaschinen lesen daraus die Bedeutung der Inhalte. Eine Hauptüberschrift wiegt für Google schwerer als ein Listenpunkt, ein Absatz schwerer als ein dekoratives Element.
Auch Bilder werden in HTML eingebunden, mit Alternativtext, Dateipfad und gegebenenfalls einer Beschreibung. 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.
Wer eine Webseite ohne CSS und ohne JavaScript öffnet, sieht reines HTML: Text auf weißem Grund, blau unterstrichene Links, schwarze Überschriften. Hässlich, aber lesbar. Das ist die Schicht, auf der Suchmaschinen und Screenreader unterwegs sind.
CSS — das Aussehen Deiner Webseite
CSS steht für Cascading Style Sheets. Es bestimmt, wie das HTML aussieht: Farben, Schriften, Abstände, Größen, Spalten. CSS ist der Anstrich, die Möbel und das Licht im Haus.
Mit CSS legst Du fest, dass eine Hauptüberschrift 32 Pixel groß ist, in Deiner Hausschrift gesetzt wird und einen Abstand von 24 Pixeln zum nächsten Absatz hat. Genauso werden Buttons gestaltet, Spaltenraster aufgebaut, Hintergründe gefüllt. Eine ganze Webseite kann optisch radikal anders wirken, ohne dass eine einzige Zeile HTML sich verändert. Nur das CSS wird ausgetauscht.
CSS regelt auch das Verhalten der Seite auf verschiedenen Bildschirmgrößen. Ein Layout, das auf dem Desktop dreispaltig ist und auf dem Handy untereinander steht, ist klassisches CSS. Welche Webdesign-Arten es gibt (Responsive, Adaptive, Minimalistisch), entscheidet sich auf dieser Schicht.
Auch Typografie gehört zu CSS. Welche Schriftarten zu Deiner Marke passen, wie groß die Zeilenabstände sind, ob Texte links oder im Blocksatz stehen: all das wird per CSS gesetzt, nicht im HTML hinterlegt.
JavaScript — das Verhalten Deiner Webseite
JavaScript ist die dritte Schicht. Sie reagiert auf Aktionen: Klicks, Eingaben, Scrollen, Mausbewegungen. JavaScript macht aus einem stummen Haus eines, in dem etwas passiert.
Ein Filter, der die Produktliste sofort neu sortiert, wenn Du eine Kategorie anwählst: das 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 Skripte freigibt. Ein Bildslider, der von selbst weiterschiebt. Eine Karte, die sich ziehen lässt.
JavaScript läuft im Browser, also auf Deinem Rechner. Es kann Daten nachladen, ohne dass die Seite neu geladen wird, und so ganze Anwendungen im Browser entstehen lassen. Genau deshalb sind Web-Apps wie Online-Editoren, Chats oder Kalender überhaupt möglich.
Eine kleine Abgrenzung gegenüber CSS: Auch CSS kann Bewegung. Hover-Effekte, sanfte Übergänge, einfache Animationen: alles ohne JavaScript machbar. Sobald Bewegung aber von Daten oder Logik abhängt, ist JavaScript die richtige Schicht.
Wie die drei Schichten zusammenspielen
Wenn Du eine Webseite öffnest, lädt der Browser zuerst das HTML. Daraus baut er die Grundstruktur der Seite auf. Direkt im Anschluss kommt das CSS dazu, und die Seite bekommt ihr Aussehen. Erst dann startet das JavaScript, oft sogar nachträglich, während Du schon liest.
Diese Reihenfolge ist kein Zufall. Eine Seite soll auch dann lesbar sein, wenn JavaScript blockiert ist oder noch lädt. Suchmaschinen, Screenreader und Menschen mit langsamen Verbindungen profitieren davon, wenn HTML und CSS allein schon eine sinnvolle Seite ergeben.
Daraus folgt eine Praxis-Regel: Je mehr Inhalt direkt im HTML steht, desto robuster die Seite. JavaScript darf Komfort dazugeben, aber nicht zur Voraussetzung werden, 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. Eine Faustregel:
- Farbe oder Schrift ändern: reines CSS, meistens kleiner Eingriff.
- Neuer Inhalts-Bereich auf der Seite: HTML plus CSS, mittlerer Eingriff.
- Live-Filter, dynamisches Formular, individuelle Cookie-Banner-Logik: JavaScript, größerer Eingriff.
- Neue Datenquelle, Login-System, Bezahlfunktion: JavaScript plus Server-Schicht, der größte Eingriff.
Das ist keine Preisliste, sondern eine Einordnung. Eine kleine CSS-Anpassung kann minutenschnell erledigt sein. Eine neue JavaScript-Funktion erfordert oft Konzept, Umsetzung, Test und Dokumentation, auch wenn die Wirkung im Browser nur ein neuer Knopf ist.
Was nicht zu HTML, CSS oder JavaScript gehört
Hinter den drei Browser-Schichten arbeitet eine vierte: der Server. Dort liegt die Datenbank, läuft das Content-Management-System wie TYPO3 oder WordPress, dort wird im Hintergrund mit Sprachen wie PHP gerechnet. Wenn Du im Backend einen Beitrag tippst und auf „Speichern" klickst, wandert der Text in die Datenbank, bevor irgendein Browser ihn jemals als HTML zu sehen bekommt.
Diese Schicht ist für den Besucher unsichtbar. Sie liefert das HTML, aber sie ist nicht das HTML. Wer den Aufbau einer Webadresse versteht, sieht den Übergang vom Server zum Browser sehr deutlich: Domain und Pfad zeigen auf den Server, alles, was danach im Browser sichtbar wird, ist HTML, CSS und JavaScript.
Begriffe wie „Hosting", „CMS", „Datenbank" oder „PHP" gehören also auf die Server-Seite, nicht in dieses Modell. Das ist keine Erbsenzählerei. Es hilft Dir, im Gespräch die richtige Frage an die richtige Stelle zu richten.
Warum dieses Wissen Deine Gespräche verbessert
Wenn Du das Drei-Schichten-Bild im Kopf hast, formulierst Du Deine Wünsche präziser. Statt „mach das responsiv" sagst Du: „Die Buchungs-Übersicht soll auf dem 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 neu lädt."
Beide Wünsche werden plötzlich umsetzbar. Der erste ist eine CSS-Aufgabe, der zweite eine JavaScript-Aufgabe. Deine Agentur muss nicht erst rückfragen, was Du genau meinst, und Du bekommst eine Einschätzung von Aufwand und Zeitrahmen, die zu Deiner Vorstellung passt.
Du musst dafür weder Code lesen noch programmieren können. Es reicht, dass Du Bescheid weißt, in welcher Schicht Dein Wunsch ankommt.
Fazit
HTML, CSS und JavaScript sind keine austauschbaren Vokabeln, sondern 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 plötzlich ein Modell. Und gewinnt im Austausch mit Entwicklern und Agenturen genau das, was im Alltag fehlt: Klarheit darüber, wo das Wesentliche passiert.