Block- und Inline-Elemente

HTML-Elemente verhalten sich grundsätzlich auf zwei Arten: als Block- oder Inline-Elemente. Dieses Verhalten bestimmt, wie sie auf der Seite angezeigt werden und wie sie mit anderen Elementen interagieren.

Block-Elemente

Block-Elemente beginnen immer in einer neuen Zeile und nehmen die gesamte verfügbare Breite ein. Beispiele: <div>, <p>, <h1>–<h6>, <ul>, <ol>.

<div>This is a block element</div>
<p>This is a paragraph</p>
<h1>This is a heading</h1>

Inline-Elemente

Inline-Elemente unterbrechen den Fluss nicht – sie bleiben in derselben Zeile und nehmen nur so viel Platz ein, wie nötig. Beispiele: <span>, <a>, <strong>, <em>.

<span>This is inline</span>
<a href="#">This is a link</a>
<strong>This is bold</strong>

Wichtige Unterschiede

Block-Elemente werden vertikal gestapelt, Inline-Elemente erscheinen nebeneinander. Dieser Unterschied ist entscheidend für eine korrekte HTML-Struktur.

<div>
  <p>This is a paragraph inside a block element.</p>
  <a href="#">Link</a> and <span>text</span> are inline.
</div>

Inline in Block – und umgekehrt?

Inline-Elemente werden oft innerhalb von Block-Elementen verwendet – z. B. <strong> oder <a> innerhalb eines <p>. Umgekehrt ist das nicht empfohlen: Block-Elemente wie <div> sollten nicht in Inline-Elemente wie <span> gesetzt werden – das ist ungültiges HTML.

<p>This is a <strong>bold</strong> word inside a paragraph.</p>

Auswirkung auf die Darstellung

Block-Elemente erscheinen auf eigenen Zeilen und nehmen die volle Breite ein. Inline-Elemente bleiben in der Zeile und nehmen nur den nötigen Platz ein. Das wird z. B. bei Hintergrundfarben sichtbar.

<div style="background: lightblue;">Block</div>
<span style="background: lightgreen;">Inline</span>

display: block und display: inline

Mit CSS kann der Anzeigetyp eines Elements geändert werden: Ein Inline-Element kann zu 'display: block' werden – und umgekehrt. So kannst du das Aussehen flexibel anpassen, ohne die HTML-Struktur zu ändern.

Wann welches verwenden?

Verwende Block-Elemente für komplette Inhaltsbereiche. Inline-Elemente eignen sich, um Wörter oder Satzteile gezielt zu gestalten oder hervorzuheben.