10 – Block vs. Inline 🧱↔️🔤

Verstehe, wie HTML-Elemente sich im Layout verhalten

🎯 1. Einleitung & W3Schools

In Kapitel 10 hast du gelernt, dass HTML-Elemente entweder als Block oder Inline dargestellt werden – und wie sich das auf das Layout auswirkt.

Lies aktiv auf W3Schools nach – probiere aus, denke nach:

🔗 W3Schools – HTML Block & Inline

🧠 2. KI-Prompt-Training – Layout verstehen

Deine Aufgabe: Formuliere einen Prompt, der keine CSS-Regeln liefert, sondern dir hilft, zu verstehen, warum Block- und Inline-Elemente sich anders verhalten.

❌ Vermeide: „Gib mir ein Beispiel für Block und Inline.“ ✅ Fragen, die denken erzwingen:

„Warum beginnt ein <div> immer in einer neuen Zeile – ein <span> aber nicht?“
„Erkläre mir, warum width und height bei Inline-Elementen nicht funktionieren.“
„Warum kann man kein Block-Element in ein Inline-Element einbetten – und was passiert, wenn man es trotzdem tut?“

💡 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 korrigiere!

Ein Schüler hat folgenden HTML-Code geschrieben:

<span>
  <div>Inhalt</div>
</span>

Schreibe (auf Papier oder in Textdatei):

Warum ist diese Verschachtelung **ungültiges HTML**?
Welche beiden Grundregeln zu Block/Inline-Elementen werden hier verletzt?
Was passiert im Browser, wenn man diesen Code trotzdem öffnet?
Wie müsste man den Code korrigieren – und warum?

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

🧱🔤 Aufgabe 2: Strukturiere bewusst – erst nach der Analyse!

Erstelle eine HTML-Datei layout-test.html mit folgenden Anforderungen:

Eine Überschrift <h2> mit Text „Block-Elemente“
Drei <div>-Elemente mit jeweils eigenem Text (z. B. „Box 1“)
Einen Absatz mit drei <span>-Elementen (z. B. „Wort1“, „Wort2“, „Wort3“)
Eine CSS-Datei css/display.css, die:
- den <div>-Elementen eine Hintergrundfarbe und Padding gibt
- den <span>-Elementen jeweils eine andere Textfarbe zuweist
- ein <span> mit display: inline-block versieht – und Begründung abfragt

💡 Teste selbst:
- Öffne mit VS Code Live Server
- Stehen die <div>s untereinander?
- Stehen die <span>s in einer Zeile?
- Was ändert sich, wenn du bei einem <span> display: block setzt?

📊 Beurteilungskriterien – Übung 10: Block vs. Inline

Deine Lösung wird im Fachgespräch bewertet – besonders dein eigenes Verständnis.

Kriterium	✅	➖	❌
Block vs. Inline: Kannst du im Gespräch erklären, warum `<div>` eine neue Zeile beginnt, `<span>` aber nicht?
Verschachtelungsregeln: Weißt du, warum man kein Block-Element in ein Inline-Element einbetten darf – und was der Validator sagt?
display-Eigenschaften: Kannst du erklären, was `inline-block` bewirkt – und wo man es einsetzt?
Eigene Reflexion statt KI-Output: Kannst du deine Lösung ohne Code-Datei im Fachgespräch erklären – oder musst du erst nachschauen, was du „gemacht“ hast?

⚠️ Wichtig: Im Fachgespräch wirst du gefragt: „Warum ist <span><div>...</div></span> ungültig?“ Wer nur KI-Code abgibt, kann diese Fragen nicht beantworten.