Worum es geht: Drei Sprachen bauen jede Website – und jede hat genau eine Aufgabe. Wer diese Aufteilung verstanden hat, kann jeden KI-generierten Code sofort einordnen: Ist das Struktur, Aussehen oder Verhalten?
1. Die Aufteilung
Halle sanieren
Ohne Betriebsunterbrechung.
Nur HTML: unformatiert, aber vollständig lesbar.
Struktur und Bedeutung · wie der rohbau beim Hausbau
HTML sagt, was etwas ist: eine Überschrift, ein Absatz, ein Knopf, ein Formularfeld. Ohne HTML gibt es keine Seite – die anderen beiden bauen darauf auf.
<h1>Halle sanieren</h1> <p>Ohne Betriebsunterbrechung.</p> <button>Anfrage senden</button>
Die Trennung ist kein Ordnungsprinzip, sondern der Grund, warum sich Websites überhaupt überarbeiten lassen. Ein Relaunch, der nur das Aussehen ändert, fasst ausschließlich CSS an. Eine Seite, die für Screenreader und Suchmaschinen funktionieren soll, braucht richtiges HTML – Gestaltung hilft dort nichts.
2. Warum das für die Arbeit mit KI wichtig ist
Wenn ein Agent Ihnen eine Datei liefert, in der alles gemischt ist – Farben im HTML, Texte im JavaScript, Struktur aus lauter <div>-Elementen –, dann ist das kein Geschmacksproblem. Solcher Code lässt sich schlecht ändern, ist für Screenreader unbrauchbar und wird von Suchmaschinen schlechter verstanden.
| Warnzeichen | Was stattdessen richtig wäre |
|---|---|
Überall <div> statt passender Elemente | <header>, <nav>, <main>, <button>, <ul> |
| Farben und Größen direkt im HTML | CSS-Klassen, damit eine Änderung überall wirkt |
Ein <div> mit Klick-Ereignis als Knopf | <button> – dann funktioniert auch die Tastatur |
| Texte im JavaScript versteckt | Text gehört ins HTML, damit er gefunden und übersetzt werden kann |
3. Die wichtigsten HTML-Elemente
Mit etwa fünfzehn Elementen kommen Sie sehr weit. Die wichtigsten: h1 bis h3 für Überschriften, p für Absätze, a für Links, button für Handlungen, ul und li für Listen, img für Bilder, form, label und input für Formulare, dazu header, nav, main und footer für die Grobstruktur.
<button> ist mit der Tastatur bedienbar, wird vom Screenreader als Schaltfläche angesagt und reagiert auf die Leertaste – ein <div> mit Klick-Ereignis kann nichts davon. Deshalb ist die Wahl des Elements keine Stilfrage.4. Was Sie nicht auswendig lernen müssen
Alle Eigenschaften von CSS, alle Attribute von HTML, jede Funktion von JavaScript – das schlägt auch jeder Entwickler nach. Was Sie können müssen: erkennen, welcher Teil wofür zuständig ist, und beurteilen, ob eine Struktur sinnvoll gewählt wurde. Das ist genau der Teil, den KI Ihnen nicht abnimmt, weil sie ihn nur mit Anleitung richtig macht.
Stand: September 2026. Die Übungen laufen vollständig in Ihrem Browser – es wird nichts gespeichert oder übertragen.