Lädt...

HTML Block und Inline

Nach Tabellen zoomt diese Lektion auf den Seitenfluss: jedes Element hat eine Standard-display-Gewohnheit. Zwei Anfängerfamilien: block und inline.

Was „Flow“ hier bedeutet

Die Standard-Packreihenfolge ohne Layout-CSS. Absätze sind block; Links bleiben inline im Satz.

Direkte Antwort

Block: p, div, Überschriften, Listen, table. Inline: a, strong, em, span, code. Zuerst Defaults lernen.

📊 Common defaults

Category Examples Flow habit
Block p, div, h1–h6, ul, ol, section, table New line, full available width (typical)
Inline a, strong, em, span, code Continues inside the text line

Block-Boxen mit Inline-Stücken

Ein p ist der Block-Container; a/strong bleiben in der Zeile. Ein folgendes div startet einen neuen Block.

Block paragraph with inline pieces

html
HTML Code
<p>
Read the <a href="guide.html">guide</a> and note the
<strong>important</strong> words before you continue.
</p>
<div>This div is a separate block box on its own line.</div>

Absatzbeispiel lesen

  • p besitzt die Absatzbox
  • a und strong bleiben in der Zeile
  • div darunter ist ein neuer Block

div versus span

div ist standardmäßig block, span inline. Kurze Phrasen im Satz → span.

div versus span contrast

html
HTML Code
<p>Price: <span class="note">includes tax</span> today only.</p>
<div class="note">This whole note sits on its own block line.</div>

div/span-Beispiel lesen

  • span bleibt in der Zeile
  • div erzwingt eine eigene Blockzeile

CSS kann display später ändern

Defaults zuerst merken, Overrides erkennen.

Übung

  1. Zwei Absätze stapeln
  2. Zwei Links in einem Absatz
  3. span vs div vergleichen
  4. strong ohne Zwangszeilenumbruch
  5. Drei Tags je Kategorie notieren

Typische Fehler

  • div für jede Mini-Phrase
  • strong soll neue Zeile sein
  • CSS-Override vergessen

Kurzfassung

  • Block ≈ neue Zeile
  • Inline ≈ in der Zeile
  • span für kleine Hooks
  • CSS später

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓
5
Fragen
🎯
70%
Zum Bestehen
♾️
∞
Zeit
🔄
∞
Versuche

📝 Anweisungen

  • Lesen Sie jede Frage sorgfältig
  • Wählen Sie die beste Antwort für jede Frage
  • Sie können das Quiz so oft wiederholen, wie Sie möchten
  • Ihr Fortschritt wird oben angezeigt