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

Zwei Absätze stapeln
Zwei Links in einem Absatz
span vs div vergleichen
strong ohne Zwangszeilenumbruch
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

❓

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

Sprache