Struktur, Stil, Verhalten: Wie HTML, CSS und JavaScript die Arbeit aufteilen
Eine für Anfänger geeignete Karte, die zeigt, was HTML, CSS und JavaScript auf einer Webseite jeweils beinhalten, wie sie zusammenarbeiten, sowie welche häufigen Fehler die Grenzen zwischen ihnen verwischen.
Jede Webseite, die Sie öffnen, setzt sich aus drei Sprachen zusammen, die für Anfänger leicht verwechselt werden können: HTML, CSS und JavaScript. Sie werden in der Regel zusammen geliefert, doch jede beantwortet eine andere Frage bezüglich der Seite. Sobald Sie wissen, welche Sprache für welche Aufgabe zuständig ist, können Sie entscheiden, wo eine Änderung vorgenommen werden sollte, schneller Fehler finden und vermeiden, Code in der falschen Schicht zu schreiben.
Eine Seite, drei Aufgaben
Ein nützliches mentales Modell ist ein Haus. HTML ist der Grundriss und die Wände: Er bestimmt, dass es eine Küche, eine Haustür und drei Fenster gibt. CSS ist die Inneneinrichtung: die Farben, die Anordnung der Möbel, die Größe der Fenster und wie die Räume angeordnet sind. JavaScript ist das Elektrik- und Sanitärsystem: die Türklingel, die klingelt, wenn jemand darauf drückt, sowie die Lichter, die angeschaltet werden, wenn man eintritt.
Fast jede interaktive Website, die Sie nutzen, setzt alle drei Schichten gleichzeitig ein, bleibt aber konzeptionell getrennt. Diese klare Trennung ist die Grundlage für alles, was folgt.
HTML: Was es gibt und was es bedeutet
HTML (HyperText Markup Language) ist keine Programmiersprache im üblichen Sinne. Es handelt sich um eine Markup-Sprache: Sie legen den Inhalt in Elemente, die dem Browser mitteilen, um welchen Inhaltteil es sich handelt. Typische Bausteine sind:
- Überschriften und Absätze
- Bilder und Links
- Buttons und Formulare
- geordnete und ungeordnete Listen
Das Schlüsselwort ist Bedeutung. Ein h2 signalisiert „das ist ein Abschnittsüberschrift“, ein Button signalisiert „das ist etwas, das der Benutzer aktivieren kann“. HTML ist nicht dafür verantwortlich, Dinge schön zu gestalten oder sie reagieren zu lassen; seine Aufgabe ist die Struktur des Dokuments sowie die Semantik seines Inhalts. Deshalb beginnen die meisten Lernwege hier: Ohne Inhalt und Struktur haben die anderen beiden Ebenen nichts, an dem sie arbeiten können. Wenn Sie tiefer in die Auswahl der richtigen Elemente eintauchen möchten, behandelt unser Leitfaden vom div-Soup zu sinnvollem Markup semantisches HTML ausführlich.
CSS: Wie alles aussieht
CSS (Cascading Style Sheets) nimmt die von HTML deklarierten Elemente und bestimmt, wie sie dargestellt werden. Es regelt:
- Farben und Schriftarten
Nehmen wir einen einfachen Button. HTML sorgt dafür, dass er existiert; CSS kann ihn vergrößern, seine Ecken abrunden, ihm eine Markenfarbe geben und ihn genau dort platzieren, wo es das Design erfordert.
Der größte praktische Vorteil ist die Trennung zwischen Inhalt und Präsentation. Da das Styling in einer eigenen Schicht liegt, kann ein Team oft eine Seite vollständig neu gestalten, ohne die HTML-Struktur zu verändern. Der Begriff „kaskadierend“ bezieht sich darauf, wie der Browser widersprüchliche Regeln aus mehreren Quellen auflöst – etwas, das es wert ist, zu studieren, sobald man mit den Grundlagen vertraut ist.
JavaScript: Was passiert, wenn Benutzer handeln
JavaScript ist eine vollwertige Programmiersprache. Im Browser fügt sie Logik hinzu und reagiert auf Ereignisse wie:
- Klicks auf Buttons
- Abgabe von Formularen
- Tastatureingabe
- Mausbewegung
- Scrollen
Es kann außerdem während des Laufs einer Seite deren HTML- und CSS-Code lesen und neu schreiben, und zwar über das DOM (die laufende Objektdarstellung des Dokuments im Browser). Stellen Sie sich einen Button vor, der „Noch eine Tatsache anzeigen“ besagt. Die Markup-Struktur platziert den Button auf der Seite, die Stylesheet-Datei definiert sein Aussehen und ein Skript bestimmt, was beim Klicken tatsächlich geschieht – beispielsweise das Anzeigen einer neuen Tatsache.
Eine kleine Beispielanleitung
Betrachten wir eine kleine Informationskarte. Die untenstehende Markup-Struktur definiert einen Container mit einem Überschriftsteil, einem kurzen Absatz und einem Button. Beachten Sie das Attribut class="card": Es allein bewirkt nichts, gibt aber CSS und JavaScript einen Anhaltspunkt, um dieses Element später finden zu können.
<div class="card">
<h2>Did You Know?</h2>
<p>Click the button to see another fact.</p>
<button>Show Another Fact</button>
</div>
Wenn dieser Codeausschnitt allein geladen wird, wird er zwar korrekt dargestellt, sieht aber einfach aus, da der Browser auf seine Standardstile zurückgreift. Der nächste Schritt besteht darin, eine Stylesheet-Datei zu verwenden, die auf .card abzielt, um Abstände, Ränder, Farben sowie eine bessere Typografie hinzuzufügen. Der letzte Schritt ist ein Skript, das auf den Klick des Buttons lauscht und den Absatztext durch etwas Neues ersetzt. Jede Schicht baut auf der darunterliegenden auf, ohne ihre Aufgabe zu ändern.
Stylesheet und Skript sind die zwei Schichten, auf die das Markup gewartet hat. CSS ändert den Satz nicht, und das Skript setzt keine Farbe.
.card {
max-width: 28rem;
padding: 1.25rem;
border: 1px solid #d0d5dd;
border-radius: 12px;
}
.card h2 {
margin: 0 0 0.5rem;
font-size: 1.25rem;
}
.card button {
margin-top: 0.75rem;
}const facts = [
'The button stays a button even if this file never loads.',
'CSS can restyle the card without this script knowing.',
];
const card = document.querySelector('.card');
const text = card?.querySelector('p');
const button = card?.querySelector('button');
button?.addEventListener('click', () => {
if (!text) return;
const next = facts[Math.floor(Math.random() * facts.length)];
text.textContent = next;
});Nebeneinander
Eine kompakte Art, sich die drei Rollen zu merken:
- HTML kümmert sich um Struktur und Inhalt, wie Überschriften, Absätze und Buttons.
- CSS kümmert sich um das Erscheinungsbild und die Gestaltung, wie Farben, Abstände und Schriftarten.
- JavaScript kümmert sich um Verhalten und Logik, wie Klick-Handler und dynamischen Inhalt.
Die üblichen Dateierweiterungen sind .html, .css und .js. Für kleine Demos kann man auch alles in einer einzigen HTML-Datei unterbringen, indem man die Styles innerhalb eines <style>-Elements und den Code innerhalb eines <script>-Elements platziert. Das ist für Experimente praktisch; in echten Projekten sind getrennte Dateien einfacher zu speichern, wiederverwenden und wartungsfreundlicher.
Wie sich die Schichten voneinander abhängen
Führe für jede Sprache eine einzige Frage ein:
- HTML: Welcher Inhalt befindet sich hier?
- CSS: Wie wird dieser Inhalt dargestellt?
- JavaScript: Wie reagiert es auf den Benutzer?
Die Schichten verschlechtern sich auf eine nützliche Weise. Entfernt man das CSS, bleibt die Schaltfläche weiterhin vorhanden, nur ohne Styling. Entfernt man das JavaScript, ist die Schaltfläche weiterhin sichtbar, tut aber einfach nichts mehr. Jede fehlende Schicht entzieht dem Benutzer etwas, was er sehen oder tun kann, doch der Inhalt bleibt bestehen, solange die HTML-Struktur intakt ist. Das ist die Idee hinter dem progressiven Enhancement: Man beginnt mit einer soliden Markup-Struktur und fügt anschließend Präsentationselemente sowie Funktionalitäten hinzu.
Wo das Frontend endet und das Backend beginnt
Diese drei Sprachen bilden den Kern der Frontend-Entwicklung – jenen Teil einer Anwendung, der im Browser läuft und den Benutzer direkt sieht und berührt: Inhalt, Benutzeroberfläche, Layout sowie Interaktionen.
Das Backend ist eine separate Schicht, die auf Servern läuft. Es kümmert sich in der Regel um:
- Datenbanken
- Authentifizierung
- Serverseitige Logik
- APIs
- Datenverarbeitung
Am Anfang sind keine Kenntnisse im Backend erforderlich. Eine solide Beherrschung von HTML, CSS und JavaScript ist ein sinnvoller erster Meilenstein, da sie es später erleichtert, sich mit Backend-Konzepten auseinanderzusetzen.
Fehler, die die Grenzen verwischen
Eine häufige Falle ist es, zunächst auf JavaScript zurückzugreifen. Hover-Effekte, Übergänge, responsives Layout sowie viele Animationen gehören in die Zuständigkeit von CSS; ihre Handhabung per Skript führt in der Regel zu mehr Code, mehr Fehlern und oft schlechterer Leistung.
Ein weiterer Fehler ist die Vernachlässigung semantischen HTMLs. Die Verwendung echter Überschriften, nav, section und button-Elemente anstelle allgemeiner Container macht eine Seite wartungsfreundlicher und erheblich zugänglicher für Bildschirmleser sowie Suchmaschinen.
Ein Drittel versucht, alle drei gleichzeitig zu lernen, ohne zu verstehen, wofür jede davon dient. Ein stabilerer Ansatz ist sequenziell: Erst mit HTML vertraut werden, anschließend CSS hinzufügen und schließlich JavaScript durch kleine interaktive Projekte einführen.
Lernen durch das Nach und Nach Ändern einer Sache
Erläuterungen helfen nur bis zu einem gewissen Grad; die Konzepte bleiben haften, wenn man echten Code bearbeitet. Machte einen Änderung, schaue dir das Ergebnis an und füge dann die nächste hinzu:
- eine Farbe in der Stylesheet-Datei ändern
- den Abstand anpassen
- die Struktur der Markup-Datei umgestalten
- verändern, was die Skript bei einem Klick tut
Durch das unmittelbare Beobachten der Auswirkung jeder einzelnen Änderung lernt man, welche Sprache welche Teil der Seite steuert. Dafür eignet sich jede browserbasierte Übungsumgebung oder eine lokal gespeicherte Datei, die im Browser geöffnet wird.
Kernpunkte
- HTML, CSS und JavaScript sind ergänzende Komponenten, keine Konkurrenten.