ChatGPT vs Claude vs Gemini für HTML-Unterricht
Wenn du HTML-Unterrichtsstunden mit KI bauen willst, ist die Modell-Wahl entscheidend - Claude liefert deutlich anderen Code als ChatGPT, Gemini wieder anderen. Dieser Artikel zeigt einen direkten Vergleich der drei großen Anbieter aus Lehrer-Sicht: Code-Qualität, Mobile-Layout, Spiele-Komplexität, Kosten. Mit konkretem Empfehlungs-Fazit pro Use-Case.
1. Wie wir verglichen haben
Für diesen Vergleich haben wir allen drei Modellen identische Prompts gegeben und die Ergebnisse nach 5 Kriterien bewertet:
- Code-Qualität: sauberer, moderner CSS- und JavaScript-Code ohne unnötige Komplexität
- Mobile-Layout: funktioniert das Ergebnis out-of-the-box auf Smartphone und Tablet
- Spiele-Komplexität: kann das Modell auch Drag-and-Drop, Animationen, Highscore-Speicher
- Erste-Versuch-Erfolg: läuft der Code beim ersten Test oder braucht es 5 Iterationen
- Kosten: Free-Tier-Limit, Pro-Preis, Wert für Geld
Test-Prompts waren u.a. ein 10-Fragen-Quiz mit Streak, ein Memory-Spiel mit 3D-Flip, ein Bruchrechnen-Tool mit klickbaren Pizza-Stücken.
2. Claude (Anthropic)
Stärken:
- Schreibt modernsten CSS-Code (Flexbox, Grid, CSS-Variablen) statt veralteter Tabellen
- Mobile-First-Design im Default - keine separate Aufforderung nötig
- JavaScript ohne unnötige Library-Abhängigkeiten
- Animationen sind sauber implementiert (CSS-Keyframes, requestAnimationFrame)
- Erstes-Mal-Funktioniert-Rate: ~85 % vs ChatGPT ~70 %
- Sehr gut bei komplexen Spielen (Drag-and-Drop, Touch-Events)
Schwächen:
- 20 USD/Monat Pro-Tarif - teurer als manche Konkurrenz
- Free-Tier limitiert die Anzahl der Anfragen pro Tag (~10-15 Code-Generierungen)
- Manchmal etwas zu viel Boilerplate-Kommentar im Code
3. ChatGPT (OpenAI)
Stärken:
- Breite Verbreitung - jede:r Kolleg:in kennt es
- Soliden HTML-Code, läuft meist auf Anhieb
- Free-Tarif mit ordentlichem Limit pro Tag
- Vision-Fähigkeit auch im Free-Tarif (PDF-zu-HTML-Workflow möglich)
- Plus-Tarif 20 USD/Mo - gleicher Preis wie Claude
Schwächen:
- Verfällt manchmal in „altmodischen" Code-Stil (Tabellen für Layout, inline-Styles)
- Mobile-Optimierung muss oft explizit nachgefordert werden
- Bei komplexen Animationen (3D-Transforms, Canvas-Spiele) macht häufiger Fehler
- Iterations-Anzahl ist im Schnitt höher als bei Claude (3-4 statt 1-2)
4. Gemini (Google)
Stärken:
- Komplett kostenlos - kein Pro-Tarif notwendig für Gemini Pro 2.5
- Solider Standard-Code für einfache Quiz und Lückentexte
- Google-Workspace-Integration (wer eh Google nutzt, hat es direkt verfügbar)
- Sehr gute Vision-Fähigkeit für PDF-Erkennung
Schwächen:
- Bei komplexeren Layout-Anforderungen verfällt es in veralteten Code
- JavaScript für interaktive Elemente oft fehleranfälliger
- Spiele mit Drag-and-Drop oder Canvas-Logik sind Hit-or-Miss
- Iterations-Anzahl im Schnitt am höchsten (4-6 Runden bis fertig)
5. Empfehlung pro Use-Case
Wenn du regelmäßig HTML-Stunden baust (1×/Woche oder mehr)
Claude Pro (20 USD/Mo). Die Code-Qualität spart dir pro Stunde 20-30 Minuten Iterations-Zeit gegenüber ChatGPT. Auf 10 Stunden im Monat sind das 200-300 Minuten. Das ist mehr wert als 20 USD.
Wenn du gelegentlich HTML-Stunden brauchst (1×/Monat)
ChatGPT (Plus oder Free) reicht. Für einfache Quiz und Lückentexte ist die Code-Qualität gut genug. Free-Tarif kommt mit 10-15 Generierungen pro Tag - reicht für gelegentliches Erstellen.
Wenn du noch nie HTML-Stunden erstellt hast und ausprobieren willst
Gemini 2.5 Pro (kostenlos). Investiere kein Geld bevor du weißt, ob HTML-Stunden für dich Sinn machen. Gemini macht für einfache Aufgaben einen soliden Job.
Wenn du auf Spiele und Animationen spezialisiert bist
Claude Opus 4.7. Komplexe Spiele mit Drag-and-Drop, Animationen, Highscore-Speicher - hier ist Claude allen anderen deutlich überlegen. Wenn du jede Woche ein neues Spiel willst, lohnt sich der Aufpreis.
Wenn DSGVO ein hartes Kriterium ist
Alle drei Modelle laufen auf US-Servern und sind DPF-zertifiziert. Für DSGVO-Strenge mit Schüler:innen-Daten ist keiner direkt nutzbar - nutze stattdessen ein Tool wie PrepClass, das die KI serverseitig in der EU pseudonymisiert anspricht. Mehr dazu im Artikel KI im Unterricht DSGVO.
6. Fazit
Für HTML-Unterrichtsstunden ist Claude 2026 die mit Abstand beste Wahl - sauberster Code, beste Mobile-Optimierung, höchste First-Try-Erfolgsrate. ChatGPT ist solide zweite Wahl mit dem Vorteil der breiteren Verfügbarkeit. Gemini ist die kostenlose Option für gelegentliche Nutzer.
Meine Empfehlung für die meisten Lehrkräfte: 1 Monat Claude Pro testen. Wenn du nach 4 Wochen merkst, dass HTML-Stunden ein fester Bestandteil deines Unterrichts werden, lohnt sich das Abo dauerhaft. Wenn nicht, hast du 20 USD bezahlt und weißt, dass HTML nicht dein Weg ist.
HTML-Stunden hosten - egal welche KI
Egal ob Claude, ChatGPT oder Gemini den Code generiert hat: PrepClass „Online stellen" macht in 30 Sekunden Kurz-URL + QR-Code daraus. Free-Tarif dauerhaft kostenlos.
PrepClass kostenlos starten →