Was sind HTML und CSS?
HTML und CSS sind das Fundament jeder Webseite. Wir erklären verständlich, was die beiden Sprachen unterscheidet und wie sie zusammen das Web aufbauen.
Jede Webseite, die Sie im Internet besuchen, basiert im Kern auf zwei Techniken: HTML und CSS. Sie bilden gemeinsam das Fundament, auf dem das gesamte World Wide Web aufgebaut ist. Auch wenn die Begriffe technisch klingen, sind die Grundideen dahinter erstaunlich einfach zu verstehen. Dieser Artikel erklärt, was HTML und CSS sind, worin sie sich unterscheiden und wie sie zusammenarbeiten, um die Seiten entstehen zu lassen, die wir täglich nutzen.
HTML: Die Struktur einer Webseite
HTML steht für HyperText Markup Language, auf Deutsch etwa Hypertext-Auszeichnungssprache. Es handelt sich dabei nicht um eine klassische Programmiersprache, sondern um eine Auszeichnungssprache. Das bedeutet: Mit HTML legt man fest, welche Inhalte eine Seite enthält und wie diese gegliedert sind.
Man kann sich HTML wie das Gerüst eines Hauses vorstellen. Es bestimmt, wo eine Überschrift steht, wo ein Absatz beginnt, wo ein Bild eingefügt wird und welche Wörter einen Link bilden. HTML beschreibt also die Bedeutung und Struktur der Inhalte, kümmert sich aber kaum um das Aussehen.
Wie ist HTML aufgebaut?
HTML arbeitet mit sogenannten Elementen, die durch spitze Klammern gekennzeichnet werden. Diese Markierungen nennt man Tags. Ein Tag wie eine Überschrift oder ein Absatz umschließt dabei meist den eigentlichen Inhalt. Zu den typischen Bausteinen gehören:
- Überschriften verschiedener Ebenen, um Texte zu gliedern
- Absätze für zusammenhängende Textblöcke
- Links, die auf andere Seiten verweisen
- Bilder, die in die Seite eingebunden werden
- Listen, um Aufzählungen darzustellen
Der Browser liest diese Struktur und stellt die Inhalte entsprechend dar. Ohne weitere Gestaltung sieht eine reine HTML-Seite allerdings sehr schlicht aus, meist schwarzer Text auf weißem Hintergrund.
CSS: Das Aussehen einer Webseite
Hier kommt CSS ins Spiel. Die Abkürzung steht für Cascading Style Sheets, also etwa gestufte Gestaltungsvorlagen. CSS ist dafür zuständig, wie die mit HTML strukturierten Inhalte aussehen sollen.
Bleibt man beim Bild des Hauses, ist CSS die Innenausstattung und der Anstrich. Es bestimmt Farben, Schriftarten, Abstände, Größen und das gesamte Layout. Mit CSS lässt sich festlegen, dass eine Überschrift blau und groß erscheint, dass ein Text zentriert wird oder dass Bilder nebeneinander statt untereinander angeordnet sind.
Was mit CSS gestaltet werden kann
- Farben von Texten, Hintergründen und Rahmen
- Schriftarten, Schriftgrößen und Zeilenabstände
- Abstände zwischen und innerhalb von Elementen
- Anordnung und Positionierung von Inhalten
- Anpassung des Layouts an verschiedene Bildschirmgrößen
Wie HTML und CSS zusammenarbeiten
HTML und CSS ergänzen sich, statt miteinander zu konkurrieren. HTML liefert den Inhalt und seine Struktur, CSS sorgt für die ansprechende Darstellung. Diese Trennung hat einen großen Vorteil: Inhalt und Gestaltung lassen sich unabhängig voneinander pflegen.
Ändert man beispielsweise in einer zentralen CSS-Datei eine Farbe, kann sich das Erscheinungsbild der gesamten Webseite anpassen, ohne dass man jeden einzelnen Inhalt anfassen muss. Das spart Zeit und sorgt für ein einheitliches Aussehen über viele Seiten hinweg.
Responsives Design: Anpassung an jedes Gerät
Eine wichtige Aufgabe von CSS ist heute das sogenannte responsive Design. Webseiten werden auf sehr unterschiedlichen Geräten betrachtet, vom großen Desktop-Monitor bis zum kleinen Smartphone-Display. CSS ermöglicht es, dass sich das Layout automatisch an die jeweilige Bildschirmgröße anpasst.
So kann eine Seite auf dem Computer mehrere Spalten nebeneinander zeigen, während dieselben Inhalte auf dem Smartphone übersichtlich untereinander erscheinen. Für die Nutzer bedeutet das, dass Webseiten auf jedem Gerät gut lesbar und bedienbar bleiben.
Gehört JavaScript auch dazu?
Oft werden HTML und CSS im selben Atemzug mit JavaScript genannt. Diese drei Techniken bilden zusammen die Grundlage moderner Webseiten. Während HTML die Struktur und CSS das Aussehen liefert, sorgt JavaScript für Interaktivität, also für Funktionen, die auf Aktionen der Nutzer reagieren. HTML und CSS allein reichen aber bereits aus, um vollständige, ansehnliche Webseiten zu erstellen.
Sind HTML und CSS für Einsteiger geeignet?
HTML und CSS gelten als idealer Einstieg in die Welt des Webs. Beide sind vergleichsweise leicht zu erlernen, und man sieht Ergebnisse sofort im Browser. Schon mit grundlegenden Kenntnissen lässt sich eine einfache eigene Seite gestalten. Da keine teure Software nötig ist, genügen ein Texteditor und ein Browser, um die ersten Schritte zu gehen.
Fazit
HTML und CSS sind die beiden grundlegenden Bausteine jeder Webseite. HTML legt fest, welche Inhalte vorhanden sind und wie sie strukturiert werden, während CSS bestimmt, wie diese Inhalte aussehen. Erst im Zusammenspiel entstehen die übersichtlichen und ansprechenden Seiten, die wir aus dem Internet kennen. Wer sich für die Funktionsweise des Webs interessiert oder selbst eine Seite erstellen möchte, findet in HTML und CSS einen leicht zugänglichen und lohnenden Einstieg.
Mehr zum Thema findest du in unserer Übersicht: Software & Entwicklung: Alle Artikel im Überblick.