HTML – das Grundgerüst einer Webseite

Stell dir vor, du schreibst ein Word-Dokument. Du gibst Überschriften ein, schreibst Absätze, machst Aufzählungen, setzt vielleicht ein Bild ein. Damit das Dokument aber nicht nur eine Bleiwüste ist, formatierst du es: fett, kursiv, zentriert, farbig.

Genau so funktioniert eine Webseite – nur mit anderen Werkzeugen:

• HTML = der Inhalt und die Struktur (was steht wo, was ist eine Überschrift, was ein Absatz)
• CSS = die Formatierung (wie sieht es aus – Farben, Schriftarten, Abstände)

Was bedeutet HTML?

HTML steht für HyperText Markup Language – auf Deutsch: Hypertext-Auszeichnungssprache.

• HyperText → Text, der über Links mit anderen Texten/Dokumenten verknüpft ist.
• Markup → „Auszeichnung“: Man markiert Textstellen mit sogenannten Tags, um ihnen eine Bedeutung zu geben.
• Language → eine Sprache mit festen Regeln.

HTML ist also keine Programmiersprache, sondern eine Beschreibungssprache. Sie sagt dem Browser nicht „rechne 2+2“, sondern „das hier ist eine Überschrift“, „das hier ist ein Absatz“, „das hier ist ein Link“.

Wofür wird HTML genutzt?

• Für jede Webseite im Internet (Google, Wikipedia, YouTube – alles HTML)
• Für Web-Apps und Content-Management-Systeme (WordPress, Joomla …)
• Für Dokumentationen, Wissensdatenbanken und E-Mails (HTML-Mails)
• Als Grundlage für alles, was im Browser angezeigt wird

Kurz: Ohne HTML gäbe es keine strukturierten Inhalte im Web.

Woraus besteht ein HTML-Dokument?

Ein HTML-Dokument ist wie ein Aktenordner aufgebaut:

Bereich	Bedeutung
<!DOCTYPE html>	Sagt dem Browser: „Das ist eine HTML5-Datei.“
<html>	Umschließt das gesamte Dokument.
<head>	Kopfbereich – Infos über die Seite: Titel, Zeichensatz, CSS-Verweise. Wird nicht im Browserfenster angezeigt.
<title>	Der Text, der oben im Browser-Tab erscheint.
<body>	Körper – alles, was der Nutzer sieht: Überschriften, Texte, Bilder, Links.

Mini-Beispiel

Was passiert hier?

• Der Browser liest <!DOCTYPE html> → „Ah, HTML5.“
• Im <head> findet er den Tab-Titel „Meine erste Seite“.
• Im <body> zeigt er eine große Überschrift, einen Absatz und einen klickbaren Link an.

Und CSS? – Der zweite Baustein

HTML allein sieht langweilig aus: schwarze Schrift auf weißem Grund, alles untereinander. CSS (Cascading Style Sheets) ist die Formatierungsschicht – vergleichbar mit den Formatvorlagen in Word.

HTML	CSS
„Das ist eine Überschrift.“	„Überschriften sollen blau und fett sein.“
„Das ist ein Absatz.“	„Absätze bekommen 16px Abstand.“
„Das ist ein Kasten.“	„Der Kasten hat einen grauen Hintergrund und runde Ecken.“

Beispiel mit CSS:

Später lernst du, CSS sauber in einer eigenen Datei (style.css) auszulagern – so bleibt HTML für die Struktur, CSS für das Aussehen zuständig.