Das lernst du

Kapitel 1Deine ersten Bausteine – Ein Tag nach dem anderen. Drei Minuten reichen für einen Schritt.
Dein erster Absatz: <p> · Deine Hauptüberschrift: <h1> · Abschnitte mit <h2>
Kapitel 2Text lebendig machen – Jedes neue Element bekommt seine eigene Erklärung und Übungen.
Wichtige Wörter: <strong> · Ein Wort betonen: <em> · Tags ineinander setzen · Eine neue Zeile: <br> · Ein Themenwechsel: <hr>
Kapitel 3Eine ganze Webseite – Alle Teile einzeln kennenlernen und dann zusammensetzen.
Die ganze Seite: <html> · Sichtbarer Inhalt: <body> · Infos über die Seite: <head> · Der Browser-Tab: <title> · Sprache und Zeichensatz · Deine erste ganze Seite
Kapitel 4Links & Bilder – Seiten verbinden und Bilder barrierearm einbinden.
Links · Bilder & Alternativtexte · Boss: Deine Mini-Profilseite
Kapitel 5Listen & Navigation – Aufzählungen, nummerierte Listen und Menüs.
Listen
Kapitel 6Werkstatt: Verstehen und selbst bauen – Neue Bausteine in kurzen Erklärungen und eigenen Programmen üben.
Formular: ein Feld mit Namen · E-Mail und Pflichtfelder · Boss: eine verständliche Anmeldeseite
Kapitel 7Neue Werkzeuge für eigene Ideen – Neue Konzepte verstehen, ergänzen und selbst anwenden.
details: eine aufklappbare Erklärung · time: ein Datum für Mensch und Maschine · Eine verständliche Datentabelle
Kapitel 8Mehr können: dein nächstes Übungskapitel – Vier neue Bausteine in kleinen Schritten verstehen und selbst anwenden.
figure: ein Bild mit Beschriftung · abbr: Abkürzungen verständlich machen · progress: einen Fortschritt anzeigen · dl: Begriffe und Erklärungen
Kapitel 9Meisterkapitel: wie echte Programme gebaut sind – Fünf Bausteine aus echten Projekten – erklärt, verbunden, ergänzt und selbst geschrieben.
header, nav, main, footer: der Seitenaufbau · select: eine Auswahl im Formular · video: Erklärvideos einbinden · blockquote und cite: ein Zitat kennzeichnen · aria-label: Symbolknöpfe benennen
Kapitel 10Projektwerkzeuge: verstehen und anwenden – Acht weitere Bausteine mit Erklärseiten und vier Übungen je Lektion.
Details ohne eigenes JavaScript · Zusammengehörige Formularfelder gruppieren · Begriffe mit Beschreibungen verbinden · Zeitangaben maschinenlesbar kennzeichnen · Ein berechnetes Ergebnis markieren · Eine Datentabelle verständlich benennen · Einen Downloadlink kennzeichnen · Navigation mit einem Sprunglink überspringen
Kapitel 11Tabellen – Daten in Zeilen und Spalten – mit Kopfzeile, Beschriftung und verbundenen Zellen.
Zeilen und Zellen: tr und td · Kopfzeilen mit th, thead und tbody · Eine Tabelle beschriften: caption · Zellen verbinden: colspan · Boss: eine vollständige Datentabelle
Kapitel 12Formulare – Beschriftete Felder, passende Eingabetypen, Auswahl und Textbereiche.
Beschriftungen mit label und for · Die passenden Eingabetypen · Auswahllisten mit select und option · Längere Texte: textarea · Boss: ein Kontaktformular
Kapitel 13Semantik & Barrierefreiheit – Bedeutung statt bloßer Kästen: article, section, aside, gute Alternativtexte und eine klare Überschriftenfolge.
article: ein eigenständiger Beitrag · section und aside · Gute Alternativtexte · Eine klare Überschriftenfolge · Boss: eine barrierefreie Karte
Kapitel 14Meta-Tags & SEO – Beschreibungen, Vorschaubilder und Best Practices.
Die Seitenbeschreibung: meta description · Für Handys: meta viewport · Schöne Vorschau beim Teilen: Open Graph · Das kleine Symbol im Tab: Favicon · Boss: ein vollständiger Kopfbereich
Kapitel 15Medien: Bilder, Ton und Einbettungen – Ton abspielen, Bilder für jedes Gerät, schnelles Laden und fremde Inhalte sicher einbetten.
Ton abspielen: <audio> · Das passende Bild für jedes Gerät: <picture> · Schneller laden: width, height und loading="lazy" · Fremde Inhalte einbetten: <iframe> · Boss: eine Medienseite
Kapitel 16Abschlussprojekt – Deine persönliche Portfolio-Seite – im Projektbereich.
Portfolio 1: das Seitengerüst · Portfolio 2: der Abschnitt „Über mich“ · Portfolio 3: Projekte als Karten · Portfolio 4: das Kontaktformular · Boss: dein fertiges Portfolio

Abschlussprojekt: Persönliche Portfolio-Seite

Deine eigene Seite mit Texten, Links und Bildern.

So funktioniert's

Jede Lektion beginnt mit kurzen Erklärseiten. Danach übst du mit Auswahlfragen, Lückentexten, Code ordnen und eigenem Code – mit Hinweisen und sofortigem Feedback. Kostenlos, ohne Werbung, auf Handy, Tablet und PC.

Jetzt HTML lernen