Jede Webseite beginnt mit derselben Struktur — einem Grundgerüst aus wenigen, aber entscheidenden Zeilen. Hier lernst du, wie eine HTML-Seite aufgebaut ist und warum jede Zeile zählt.
HTML steht für HyperText Markup Language — eine Auszeichnungssprache, die dem Browser sagt, was auf einer Seite steht. HTML ist keine Programmiersprache, sondern beschreibt die Struktur und den Inhalt von Webseiten.
HTML „markiert" Text mit Tags und gibt ihm Bedeutung.
Anders als Python oder JavaScript sagt HTML dem Computer nicht, was er tun soll, sondern was etwas ist. Ein <h1> ist eine Hauptüberschrift, ein <p> ein Absatz. Der Browser weiß dann, wie er es darstellen soll.
HTML definiert das Gerüst — CSS macht es schön.
Stell dir ein Haus vor: HTML ist der Rohbau — Wände, Decken, Türen. CSS ist der Innenausbau — Farbe, Tapete, Möbel. JavaScript ist die Elektrik — Lichtschalter, Klingel, Aufzug. Alle drei zusammen ergeben eine moderne Webseite.
Alles in HTML besteht aus öffnenden und schließenden Tags.
<tagname>Inhalt</tagname>
Das öffnende Tag <p> und das schließende Tag </p> bilden zusammen mit dem Inhalt ein Element. Manche Tags wie <img> oder <br> sind selbstschließend — sie haben keinen Inhalt.
Elemente können ineinander verschachtelt werden — wie Matrjoschka-Puppen.
<div>
<h1>Titel</h1>
<p>Text</p>
</div>
Das <div> ist hier das Elternelement, <h1> und <p> sind Kindelemente. Einrückung (Indentation) macht den Code lesbar.
Klicke auf die einzelnen Zeilen des Codes, um zu verstehen, was sie bedeuten. Jede Zeile hat eine spezifische Aufgabe.
<title>)HTML5 bietet spezielle Tags, die dem Browser (und Suchmaschinen) sagen, welche Rolle ein Bereich spielt.
Kopfbereich der Seite — Logo, Titel, Navigation.
Nicht zu verwechseln mit <head>! Der <header> ist ein sichtbares Element im Body, das den Seitenkopf markiert.
Der Hauptinhalt — kommt nur einmal pro Seite vor.
Screenreader und Suchmaschinen nutzen <main>, um den relevanten Inhalt zu identifizieren. Darf pro Seite nur einmal verwendet werden.
Thematische Abschnitte und eigenständige Inhaltsblöcke.
<section> gruppiert zusammengehörige Inhalte. <article> ist für eigenständige Inhalte (z.B. Blogpost, News-Artikel), die auch alleine stehen könnten.
Fußbereich — Copyright, Links, Kontakt.
Steht am Ende des Body. Enthält typischerweise Copyright-Hinweise, Social-Media-Links, Impressum oder Kontaktinfos.
Teste dein Wissen mit diesen Aufgaben. Keine Angst vor Fehlern — nach zwei Versuchen kannst du dir die Lösung anzeigen lassen.
Ziehe die Zeilen in die korrekte Reihenfolge — von oben nach unten.
<head></body><!DOCTYPE html><body><html lang="de"></html><h1>Hallo!</h1></head>Hake ab, was du bereits verstanden hast. Sei ehrlich mit dir selbst!
<!DOCTYPE html> steht.
<head> und <body> erklären.
charset="UTF-8" wichtig ist.
7 Fragen zu allem, was du heute gelernt hast. Klicke auf die richtige Antwort — du bekommst sofort Feedback.
charset="UTF-8" wichtig?Klicke auf eine Karte, um die Definition zu sehen.
<!DOCTYPE html>
<p>. Es gibt öffnende und schließende Tags.
<p>Text</p>
lang="de"
<nav> oder <article> beschreiben die Rolle des Inhalts.
„Wenn HTML nur Struktur beschreibt und keine Programmiersprache ist — warum ist es trotzdem die wichtigste Sprache des Internets? Könnte man Webseiten auch anders bauen?"
Diskutiert in Zweiergruppen (3 Minuten), dann sammeln wir Ideen im Plenum.