10 Lektionen · HTML-Grundlagen vorausgesetzt
Der Fortgeschrittenen-Kurs
Du kennst die Grundlagen und willst HTML wirklich beherrschen? Hier geht es um Semantik in der Tiefe, Barrierefreiheit, moderne Medien-Einbindung, strukturierte Daten und Performance – das Handwerkszeug für professionelle Webseiten.
Alle Lektionen
- Semantik in der Tiefe article oder section? div oder nav? Lerne, semantische HTML-Elemente sicher und begründet einzusetzen – für Maschinen, Menschen und Suchmaschinen. ⏱️ 15 Min.
- Der head im Detail: Metadaten & SEO Der head entscheidet über Klicks: title-Strategie, meta description, canonical, robots, Open Graph und moderne Favicons – SEO-Handwerk ohne Mythen. ⏱️ 15 Min.
- Barrierefreies HTML & ARIA Barrierefreiheit beginnt im HTML: alt-Text-Strategien, Tastaturbedienung und die erste ARIA-Regel – plus WCAG, BITV 2.0 und BFSG rechtlich eingeordnet. ⏱️ 16 Min.
- Formulare für Profis Validierung ohne JavaScript, datalist, fieldset, autocomplete und barrierefreie Fehlermeldungen – so hebst du deine Formulare auf Profi-Niveau. ⏱️ 15 Min.
- Responsive Bilder, Video & Audio Ein src reicht nicht mehr: Meistere srcset, sizes und picture für scharfe, schnelle Bilder – plus Video, Audio und Untertitel für jedes Gerät. ⏱️ 16 Min.
- Komplexe, zugängliche Tabellen caption, scope, headers/id und ein barrierefreier Scroll-Container: So baust du komplexe Datentabellen, die Screenreader und Menschen wirklich verstehen. ⏱️ 15 Min.
- Interaktion ohne JavaScript Akkordeon, Dialog, Popover, Fortschrittsbalken – fast alles ohne JavaScript: Entdecke die eingebauten interaktiven HTML-Elemente von details bis popover. ⏱️ 14 Min.
- Einbetten: iframes, SVG & Sicherheit iframes sicher einsetzen, SVG lesen und stylen, Datenschutz bei YouTube & Maps verstehen: So bettest du fremde Inhalte ein, ohne Kontrolle abzugeben. ⏱️ 14 Min.
- Strukturierte Daten & Maschinenlesbarkeit JSON-LD, schema.org, Microdata: Mach deine Inhalte für Suchmaschinen maschinenlesbar und verdiene dir Rich Results – Sterne, FAQs und Breadcrumbs. ⏱️ 13 Min.
- Performance & professionelles HTML Warum HTML der größte Performance-Hebel ist: Rendering-Pfad, defer & async, Ressourcen-Hints und die große Checkliste für professionelles HTML. ⏱️ 15 Min.