HTML

Die Struktur jeder Webseite

HTML beschreibt den Inhalt und die Struktur jeder Webseite. Von deinen ersten Tags über barrierefreie Formulare bis zu semantischem HTML gibt dir dieser Lernpfad grundsolide Grundlagen für alles Weitere in der Webentwicklung.

Grundlagen

Anfänger - die Basics, Schritt für Schritt

• Was ist HTML? Tags und AttributeEntdecke, was HTML ist, und lerne, ein Tag und ein Attribut zu erkennen.
• Text strukturieren: Überschriften, Absätze und ListenLerne, Text mit einer Hierarchie aus Überschriften, Absätzen und Listen zu ordnen.
• Links und BilderErstelle Links zu anderen Seiten und zeige Bilder mit den Tags a und img an.
• Einfache TabellenStelle Daten in Zeilen und Spalten mit den Tags table, tr, th und td dar.
• Das vollständige Grundgerüst einer HTML-SeiteSetze eine vollständige Webseite mit dem Doctype und den Tags html, head, meta und body zusammen.

Fortschritt

Mittelstufe - echte Projekte bauen

• Formulare: input, label, select, textarea, buttonBaue vollständige, barrierefreie und produktionsreife Formulare.
• Semantisches HTML: eine echte Seite strukturierenErsetze deine anonymen divs durch Tags, die deiner Struktur Bedeutung geben.
• Medien: audio, video, figure und figcaptionBinde Ton, Video und beschriftete Illustrationen ohne jedes Plugin ein.
• Globale Attribute und data-*Nutze die Attribute, die überall funktionieren, und speichere deine eigenen Daten im HTML.
• Deine Seite fürs Web startklar machenFeile am head deiner Seite: title, description, favicon und sichere externe Links.

Fortgeschritten

Geübt - fortgeschrittene Muster und Performance

• Barrierefreiheit: alt, Überschriften-Hierarchie und ARIAMeistere Alternativtexte, eine Überschriften-Hierarchie, durch die Screenreader wirklich navigieren können, und einen ARIA-Einsatz, der auf die Fälle beschränkt bleibt, in denen natives HTML an seine Grenzen stößt.
• Fortgeschrittene Formulare und native ValidierungNutze required, pattern, inputmode und die Constraint Validation API für robuste Formulare ohne jede externe Bibliothek.
• Responsive Bilder: srcset, sizes und pictureLiefere das richtige Bild an den richtigen Bildschirm mit srcset und sizes, reserviere picture für Art Direction und meistere Lazy Loading.
• Technisches SEO: Open Graph und strukturierte DatenSteuere mit Open Graph, wie deine Seiten in sozialen Netzwerken in der Vorschau erscheinen, und strebe mit schema.org in JSON-LD nach Rich Results.
• Ladeperformance: defer, async, preload und prefetchOrdne die Ausführung deiner Skripte mit defer und async, steuere dann das Netzwerk mit preload, preconnect und prefetch.

Meisterschaft

Experte - Architektur, Internals und Grenzfälle

• Von HTML zum DOM: Parsing und FehlerbehebungVerstehe, wie der Browser jeden HTML-Stream, selbst einen fehlerhaften, in einen deterministischen DOM-Baum verwandelt.
• Web Components: Custom Elements, Shadow DOM und SlotsBeherrsche den Lebenszyklus von Custom Elements, die Kapselung durch Shadow DOM und die Inhaltsprojektion über Slots.
• Internationalisierung: lang, dir, charset und Unicode-FallenSetze lang, dir und die Kodierungsdeklaration klug ein und überwinde die Fallen von Unicode-Normalisierung und Schreibrichtung.
• Sicherheit auf HTML-Seite: XSS, sandbox, noopener und CSPErkenne die markup-spezifischen XSS-Vektoren und setze die nativen Abwehrmechanismen von HTML ein: sandbox, noopener und Content Security Policy.
• Modernes interaktives HTML: dialog, details, popover, contenteditableErsetze deine UI-Bibliotheken durch die nativen Primitive des modernen HTML: modale Dialoge, exklusive Akkordeons, Popovers und bearbeitbare Bereiche.