0Pricing
HTML Academy icon

HTML Academy

HTMLWebFrontendBeginner

Bauen Sie sich ein solides Fundament in der Webentwicklung, indem Sie HTML bei HTML Academy lernen.

🤖 KI-Gesteuert📚 40 Kurse👥 100.000+ Lernende⭐ 4,9 Bewertung
Kursübersicht

HTML: Die Sprache hinter jeder Webseite

HTML ist das strukturelle Fundament des Webs — jeder Browser-Tab, jede Formularübermittlung und jedes eingebettete Video beginnt mit Markup. Dieser Track baut echte Flüssigkeit in HTML auf – von den Regeln, die ein gültiges Dokument bestimmen, bis hin zu den Browser-APIs und Komponentenmodellen, die in modernen Production-Sites verwendet werden. Das Ziel ist nicht nur, Tags zu schreiben, sondern zu verstehen, warum es jedes Element gibt und was es Browsern, assistiven Technologien und Suchmaschinen signalisiert.

Was Sie lernen werden

Sie beginnen mit Dokumentstruktur, Textinhalten, Links, Bildern und Listen, dann geht es weiter zu Tabellen, Formularen und Formularvalidierungsattributen. Der Track behandelt semantische HTML5-Elemente, das <head> und Metadaten, Audio und Video sowie die Grundlagen der Barrierefreiheit einschließlich ARIA-Rollen und -Attributen. Spätere Kurse behandeln benutzerdefinierte Datenattribute, HTML-Templates, die Canvas- und SVG-Elemente, Web Storage, die Drag-and-Drop-API, SEO und Social-Media-Meta-Tags sowie HTML-E-Mail-Templates. Fortgeschrittene Abschnitte befassen sich mit Shadow DOM, Web Components und benutzerdefinierten Elementen, HTML-Modulen und Import Maps, Progressive Enhancement, Internationalisierung, Sicherheit, History- und Navigation-API, dem Intersection Observer und der Erstellung von HTML für Progressive Web Apps.

Der Lernpfad

Vierzig Kurse führen von A1 über A2 und B1 bis B2 und enden mit einem C1-Capstone zu HTML at Scale. Die A1- und A2-Kurse etablieren die Grundlagen – Dokumentstruktur, semantische Elemente, Formulare und Metadaten. B1 führt in Barrierefreiheit, ARIA, Canvas, SVG und Browser-Speicher ein. B2 ist der größte Block und behandelt Web Components, Shadow DOM, Performance, Sicherheit, Internationalisierung und den Intersection Observer. Der abschließende C1-Kurs, HTML at Scale, behandelt die Muster und Einschränkungen, die wichtig sind, wenn HTML über große Codebasen hinweg geschrieben, getestet und verwaltet wird.

So funktioniert es

Jeder Kurs ist in kurze, praktische Lektionen aufgeteilt, die Sie im integrierten Code-Editor mit Echtzeit-Feedback absolvieren. Ein KI-Tutor ist verfügbar, wann immer Sie feststecken, und Sie machen Fortschritte in Ihrem eigenen Tempo – jede Lektion ist eigenständig, sodass Sie jederzeit zu jedem Thema als Referenz zurückkehren können.

Lernen starten →

So wirst du lernen

🎯
Interaktive Lektionen
Praktische Coding-Übungen mit Live-Feedback
🤖
KI-Tutor
Erhalte sofortige Hilfe von unserem KI-Tutor, wenn du nicht weiterkommst
💻
Integrierter Editor
Schreibe und starte Code direkt in deinem Browser
🏆
Zertifikat
Verdiene ein Zertifikat, wenn du den Kurs abschließt
Lehrplan

40 Kurse

Alle Kurse im HTML Academy Lernpfad.

01

Struktur von HTML-Dokumenten

A13 Lektionen

Lernen Sie, wie Browser HTML parsen, welche Aufgabe DOCTYPE hat und wie die Elemente html, head und body jede Webseite strukturieren.

02

Elemente für Textinhalte

A14 LektionenPRO

Meistern Sie Überschriften, Absätze, Hervorhebungen, Inline-Elemente und die Steuerung von Leerraum mit HTML-Tags für Text.

03

Links und Navigation

A14 LektionenPRO

Erstellen Sie Navigationen mit Ankerelementen, absoluten und relativen URLs, Links zum Öffnen in einem neuen Tab und Fragment-Identifiern.

04

Bilder und Abbildungen

A14 LektionenPRO

Stellen Sie Bilder mit img, srcset, dem picture-Element und semantischen figure-Beschriftungen responsiv dar.

05

Listen

A14 LektionenPRO

Erstellen Sie ungeordnete, geordnete und Beschreibung­listen mit korrekter Verschachtelung und semantischer Bedeutung.

06

Tabellen

A24 LektionenPRO

Erstellen Sie barrierefreie Datentabellen mit korrekter Struktur, sich über mehrere Zellen erstreckenden Zellen und Tabellenabschnitten.

07

HTML-Attribute und globale Attribute

A24 LektionenPRO

Verstehen Sie id, class, style, hidden, tabindex und benutzerdefinierte data-*-Attribute, die in allen HTML-Elementen verwendet werden.

08

Grundlagen von HTML-Formularen

A24 LektionenPRO

Erstellen Sie barrierefreie Webformulare mit Eingabetypen, Labels, Buttons sowie den action- und method-Attributen des form-Elements.

09

Erweiterte Formularsteuerelemente

A24 LektionenPRO

Erweitern Sie Formulare mit Dropdowns, Textareas, Checkbox-Gruppen, Radiobuttons und Autovervollständigung mit datalist.

10

Attribute zur Formularvalidierung

A24 LektionenPRO

Verwenden Sie HTML5-Validierungsattribute wie required, pattern, min und max, um Benutzereingaben vor dem Absenden zu validieren.

11

Semantisches HTML5

A24 LektionenPRO

Ersetzen Sie generische divs durch aussagekräftige HTML5-Elemente wie header, nav, main, footer, article und section.

12

Weitere semantische Elemente

A24 LektionenPRO

Erkunden Sie aside, details, summary, progress und meter, um Webseiten eine reichhaltigere Bedeutung und Interaktivität zu verleihen.

13

HTML-Head und Metadaten

A24 LektionenPRO

Meistern Sie den head-Bereich: title, Meta-Tags, viewport, kanonische URLs, robots-Direktiven und Favicons.

14

Audio- und Videoelemente

A24 LektionenPRO

Betten Sie Audio und Video nativ mit HTML5 ein, stellen Sie mehrere Formate bereit und fügen Sie mit track und WebVTT Untertitel hinzu.

15

Grundlagen der HTML-Barrierefreiheit

B14 LektionenPRO

Verstehen Sie WCAG-Stufen, die Hierarchie von Überschriften, Strategien für Alternativtexte und Tastaturnavigation für inklusive Webseiten.

16

ARIA-Rollen und -Attribute

B14 LektionenPRO

Verbessern Sie die Barrierefreiheit mit ARIA-Rollen, Labels und Beschreibungen und beachten Sie dabei die Regel, zuerst natives HTML zu ver…

17

Benutzerdefinierte Data-Attribute

B14 LektionenPRO

Speichern und greifen Sie mit data-*-Attributen, der dataset API und CSS-Selektoren auf benutzerdefinierte Metadaten von HTML-Elementen zu.

18

HTML-Templates

B14 LektionenPRO

Verwenden Sie das template-Element, um inaktives Markup zu definieren, klonen Sie es effizient und vergleichen Sie es mit einem auf innerHT…

19

Canvas-Element

B14 LektionenPRO

Zeichnen Sie Formen, Text und Bilder auf einem 2D-Canvas und animieren Sie sie mit requestAnimationFrame.

20

SVG in HTML

B14 LektionenPRO

Betten Sie skalierbare Vektorgrafiken inline ein, verwenden Sie grundlegende Formen, steuern Sie die viewBox und animieren Sie SVG mit CSS.

21

iframe und eingebettete Inhalte

B14 LektionenPRO

Betten Sie externe Inhalte mit iframe ein, verstehen Sie Sandboxing für mehr Sicherheit und verwenden Sie Lazy Loading für bessere Performa…

22

HTML-Web-Storage

B14 LektionenPRO

Speichern Sie clientseitige Daten mit localStorage und sessionStorage, reagieren Sie auf Storage-Events und befolgen Sie Sicherheitsrichtli…

23

Drag-and-Drop-API

B14 LektionenPRO

Implementieren Sie Drag-and-Drop-Interaktionen mit der HTML5 Drag and Drop API und dem dataTransfer-Objekt.

24

SEO und Social-Media-Metadaten

B14 LektionenPRO

Optimieren Sie Seiten für Suchmaschinen und das Teilen in sozialen Netzwerken mit OpenGraph, Twitter Cards, JSON-LD und hreflang.

25

HTML-E-Mail-Templates

B14 LektionenPRO

Erstellen Sie HTML für E-Mails mit tabellenbasierten Layouts, Inline-Styles und bildübergreifenden Techniken für verschiedene Clients.

26

Fortgeschrittene ARIA-Muster

B24 LektionenPRO

Implementieren Sie Umschaltmuster, Tab-Oberflächen und Live-Regionen und testen Sie mit echten Screenreadern.

27

HTML-Performance

B24 LektionenPRO

Beschleunigen Sie das Laden von Seiten mit async- und defer-Skripten, Preload-Hinweisen, verzögert geladenen Bildern und Resource Hints.

28

Web Components und Custom Elements

B24 LektionenPRO

Definieren Sie wiederverwendbare benutzerdefinierte HTML-Elemente mit der Custom Elements API, Lifecycle-Callbacks und überwachten Attribut…

29

Shadow DOM

B24 LektionenPRO

Kapseln Sie Markup und Styles im Shadow DOM, verteilen Sie Inhalte mit Slots und stellen Sie mit part Styling-APIs bereit.

30

HTML-Module und Import Maps

B24 LektionenPRO

Verwenden Sie ES-Modul-Skripte, Import Maps für Bare Specifiers, dynamische Imports und Konzepte der Module Federation.

31

Progressive Verbesserung

B24 LektionenPRO

Entwickeln Sie nach dem Prinzip der Progressive Enhancement: Beginnen Sie mit solidem HTML, ergänzen Sie CSS und JavaScript schrittweise un…

32

Internationalisierung

B24 LektionenPRO

Bereiten Sie HTML mit lang, dir, bdi, bdo, charset und Unterstützung für von rechts nach links laufenden Text für ein globales Publikum vor.

33

HTML-Sicherheit

B24 LektionenPRO

Schützen Sie Seiten mit CSP, Sandboxing, SRI und sicheren Verfahren zur HTML-Verarbeitung vor XSS, Clickjacking und Injection.

34

Erweiterte HTML-Formular-API

B24 LektionenPRO

Nutzen Sie FormData, die Constraint Validation API, benutzerdefinierte Validitätsmeldungen und die Verwaltung des Formularstatus.

35

HTML History and Navigation API

B24 LektionenPRO

Verwalten Sie den Browserverlauf mit pushState, popstate-Ereignissen und der modernen Navigation API für das Routing in SPAs.

36

Intersection Observer

B24 LektionenPRO

Verwenden Sie IntersectionObserver für Lazy Loading, Infinite Scrolling und Trigger für scrollverknüpfte Animationen.

37

HTML für PWAs

B24 LektionenPRO

Konfigurieren Sie Progressive Web Apps mit dem Web-App-Manifest, der Registrierung eines Service Workers und Offline-Fallback-Seiten.

38

HTML-Validierung und -Tests

B24 LektionenPRO

Validieren Sie Markup mit dem W3C Validator, prüfen Sie HTML mit Lighthouse und testen Sie die Barrierefreiheit mit pa11y und axe.

39

Die Zukunft von HTML

B24 LektionenPRO

Werfen Sie einen Blick auf kommende HTML-Funktionen: Declarative Shadow DOM, die Popover API, selectlist und command-Attribute.

40

HTML in großem Maßstab

C14 LektionenPRO

Verwalten Sie HTML in großen Projekten mit der Auslagerung von Komponenten, serverseitigem Templating, Designsystemen und Styleguide-Dokume…

FAQ

Häufig gestellte Fragen

Ist der HTML Academy Kurs kostenlos?

Ja. Du kannst den HTML Academy Kurs kostenlos starten und seine interaktiven Lektionen ohne Kosten abschließen. Ein optionales PRO-Abo schaltet erweiterte KI-Tools und ein teilbares Zertifikat frei.

Brauche ich Vorkenntnisse, um HTML zu lernen?

Nein. Der Kurs beginnt mit den Grundlagen und bewegt sich schrittweise zu fortgeschritteneren Themen, sodass du auch ohne HTML-Vorkenntnisse starten kannst.

Wie lerne ich HTML auf CoddyKit?

Du lernst durch Tun. Kurze interaktive Lektionen verbinden eine klare Erklärung mit einer praktischen Coding-Übung, die in Echtzeit läuft, und ein 24/7 KI-Tutor gibt dir personalisierte Hilfe, wann immer du steckenbleibst.

Erhalte ich ein Zertifikat für den Abschluss von HTML Academy?

Ja. PRO-Lerner können eine Prüfung ablegen und verdienen sich ein teilbares Abschlusszertifikat mit verifizierbarem Code für den HTML Academy Kurs.

Kann ich HTML auf meinem Telefon lernen?

Ja. CoddyKit ist im Web und als native iOS- und Android-Apps verfügbar, sodass du HTML auf jedem Gerät lernen kannst und dein Fortschritt überall synchronisiert wird.

Starte HTML Academy jetzt

Schließe dich Tausenden von Lernenden an, die Programmierung mit KI-gestützten Lektionen beherrschen.

Kostenlos starten →Alle Kurse ansehen