Codae

HTML: Websites strukturieren

Lerne, wie du Inhalte semantisch korrekt strukturierst, damit Browser und assistive Technologien deine Website verstehen.

10 Kapitel · 80 LektionenFür EinsteigerKostenlosLäuft im Browser

Kurs startenAlle Kurse

Das lernst du

Kursinhalt

  1. Kapitel 1 Website und Dokument

    Den Aufbau einer Seite verstehen

    1. Browser, Dateien und Vorschau
    2. Dokument-Grundgerüst
    3. Elemente und Attribute
    4. Überschriften und Absätze
    5. Verschachtelung reparieren
    6. Eigene erste Inhaltsseite
    7. HTML-Syntax-Check
    8. HTML-Challenge: Struktur

  2. Kapitel 2 Inhalte verbinden

    Navigation und Medien einbauen

    1. Interne und externe Links
    2. Relative Dateipfade
    3. Listen
    4. Bilder und Alternativtexte
    5. Aussagekräftige Linktexte
    6. Kleine Galerie mit Navigation
    7. Pfad-Debugging
    8. HTML-Challenge: Navigation

  3. Kapitel 3 Semantischer Seitenaufbau

    Die Bedeutung von Bereichen ausdrücken

    1. header, main und footer
    2. Navigation mit nav
    3. section und article
    4. Sinnvolle Überschriftenhierarchie
    5. button oder Link richtig wählen
    6. Produktseite semantisch strukturieren
    7. Semantik-Check
    8. HTML-Challenge: Semantik

  4. Kapitel 4 Formulare

    Bedienbare Eingaben bauen

    1. Label und Textfeld
    2. Passende Eingabetypen
    3. Auswahlfelder
    4. Pflichtfelder und native Validierung
    5. Gruppen und Hilfetexte
    6. Kontaktformular als lokale Demo
    7. Formular-Debugging
    8. HTML-Challenge: Formulare

  5. Kapitel 5 Metadaten und weitere Inhalte

    Vollständige Dokumente erstellen

    1. Seitentitel und Beschreibung
    2. Sprache und Viewport
    3. Datentabellen mit Überschriften
    4. Audio/Video mit zugänglicher Alternative
    5. Fehlerhaften Seitenaufbau untersuchen
    6. Informationsseite vervollständigen
    7. Meta-Check
    8. HTML-Challenge: Metadaten

  6. Kapitel 6 Mehrseitiges Projekt

    Gelernte Struktur selbstständig anwenden

    1. Seiten und Inhalte planen
    2. Startseite bauen
    3. Detailseite bauen
    4. Kontakt-/Infoseite ergänzen
    5. Links und Tastaturbedienung prüfen
    6. Projekt fertigstellen
    7. Projekt-Review
    8. HTML-Abschluss-Challenge

  7. Kapitel 7 Barrierefreiheit (A11y) Grundlagen

    Websites für alle zugänglich machen

    1. ARIA-Rollen verstehen
    2. Kontrast und Lesbarkeit
    3. Tastaturnavigation
    4. Screenreader-Optimierung
    5. Lang-Attribut und Sprachwechsel
    6. Barrierefreies Formular-Design
    7. A11y-Audit
    8. HTML-Challenge: Barrierefreiheit

  8. Kapitel 8 SEO-Grundlagen für HTML

    Inhalte für Suchmaschinen optimieren

    1. Title-Tags und Meta-Descriptions
    2. Canonical-Tags
    3. Strukturierte Daten (JSON-LD)
    4. Open Graph Tags
    5. Sitemap-Struktur
    6. SEO-Landingpage optimieren
    7. SEO-Debugging
    8. HTML-Challenge: SEO

  9. Kapitel 9 Performance und Assets

    Ladezeiten durch korrektes HTML verbessern

    1. Bildformate und srcset
    2. Lazy Loading
    3. Skripte und Styles einbinden
    4. Preload und Prefetch
    5. SVG-Einbindung
    6. Performance-Dashboard-Seite
    7. Ladezeiten-Analyse
    8. HTML-Challenge: Performance

  10. Kapitel 10 Fortgeschrittene HTML-Konzepte

    Spezielle HTML-Features nutzen

    1. Web Components (Grundlagen)
    2. Dialog-Element
    3. Details und Summary
    4. Iframe-Sicherheit
    5. HTML-Templates
    6. Interaktive App-Struktur
    7. Feature-Detection
    8. HTML-Meister-Challenge

So funktioniert jede Lektion

Keine stundenlangen Videos. Jede Lektion ist eine kurze Runde, die du selbst machst, bis die Idee sitzt.

  1. Lesen

    Eine kurze Erklärung und eine klare Aufgabe. Gerade genug, um loszulegen.

  2. Schreiben

    Du tippst den Code selbst, in einem echten Editor direkt im Browser.

  3. Ausführen

    Führ ihn aus und sieh sofort, was dein Programm wirklich tut.

  4. Prüfen

    Prüfen sagt dir, ob die Aufgabe gelöst ist, und was noch fehlt, falls nicht.

Gut zu wissen

Weitere Kurse