01 – HTML-Elemente 🧱

Verstehen, nicht abschreiben – Bausteine mit Bedeutung

🎯 1. Einleitung & W3Schools

In Kapitel 01 hast du gelernt, wie HTML-Elemente aufgebaut sind, was Attribute bedeuten und warum <img> kein End-Tag hat.

Vertiefe dein Verständnis auf W3Schools – lies, probiere aus, denke nach:

🔗 W3Schools – HTML Elements

🧠 2. KI-Prompt-Training – denken statt kopieren

Deine Aufgabe: Formuliere einen Prompt, der keinen Code liefert, sondern dir hilft, zu verstehen, wie man HTML korrekt strukturiert.

❌ Vermeide: „Gib mir HTML für einen Film.“ ✅ Fragen, die denken erzwingen:

„Warum ist es falsch, <img></img> zu schreiben?“
„Erkläre mir, warum jedes <img> ein alt-Attribut braucht – und was passiert, wenn es fehlt.“
„Welche drei HTML-Elemente würdest du verwenden, um einen Steckbrief semantisch aufzubauen – und warum nicht <div>?“

💡 Merke: Wenn die KI dir Code gibt, hast du die falsche Frage gestellt. Ziel ist Verständnis – nicht die fertige Lösung.

🔍 Aufgabe 1: Analysiere – nicht kopiere!

Ein Mitschüler hat folgendes HTML geschrieben – aber es ist falsch:

<div class="film">
  <div>Der Pianist</div>
  <img src="pianist.jpg">
  <ul>
    <li>Adrien Brody</li>
    <li>Thomas Kretschmann</li>
  </ul>
</div>

Deine Aufgabe – schriftlich (auf Papier oder in Textdatei):

Finde drei Fehler hinsichtlich Semantik oder Barrierefreiheit.
Erkläre, warum jedes Problem ein Problem ist (z. B. für Screenreader, Wartbarkeit, Suchmaschinen).
Skizziere in eigenen Worten, wie du es stattdessen aufbauen würdest – ohne einen einzigen Code zu schreiben.

⚠️ Hinweis: Wer den Code einfach „verbessert“, hat die Aufgabe nicht verstanden. Es geht um Begründung, nicht um Umsetzung!

🧩 Aufgabe 2: Strukturiere selbst – mit Absicht

Erstelle nun deine eigene Datei steckbrief.html – aber erst nachdem du Aufgabe 1 beantwortet hast!

Deine Seite soll folgende Inhalte enthalten – strukturiert mit semantischen Elementen:

Hauptthema (z. B. Lieblingsbuch, Sportart, Musikgenre)
Kurzbeschreibung (1–2 Sätze)
Liste mit mindestens drei wichtigen Aspekten
Ein Bild mit vollständigem alt-Text und title-Attribut
Mindestens ein leeres Element (<br> oder <hr>) an sinnvoller Stelle

⚠️ Kein <div> verwenden! → Nutze <article>, <section>, <header>, etc.

💡 Tipp: Öffne deine Seite im Browser – und prüfe: - Wird das Bild ohne Internet angezeigt? (Pfad korrekt?) - Ist der alt-Text sinnvoll, wenn du ihn laut vorliest?

📊 Beurteilungskriterien – Übung 01: HTML-Elemente

Deine Lösung wird im Fachgespräch anhand dieser Kriterien bewertet. Markiere selbst ehrlich, wo du stehst – besonders bei der eigenen Erklärung.

Kriterium	✅	➖	❌
Verständnis von Semantik: Kannst du im Gespräch erklären, warum `<article>` besser ist als `<div>` – und welchen Nutzen das für Barrierefreiheit und Suchmaschinen hat?
Umgang mit Attributen: Verwendest du `alt` sinnvoll (nicht „Bild von…“) und kennst du den Unterschied zu `title`? Kannst du erklären, warum beide nützlich, aber nicht austauschbar sind?
Leere Elemente: Weißt du, warum `<img>` kein End-Tag hat – und warum `<img></img>` falsch ist? Kannst du das im Fachgespräch begründen?
Eigene Reflexion statt KI-Output: Kannst du deine Lösung in eigenen Worten erklären – oder musst du erst in deiner Datei nachschauen, was du „gemacht“ hast?

⚠️ Wichtig: Im Fachgespräch wirst du nicht gefragt, „Was steht in deiner HTML-Datei?“, sondern: „Warum hast du dich für dieses Element entschieden?“ Wer nur KI-Code abgibt, kann diese Fragen nicht beantworten.