Block- und Inline-Elemente

HTML-Elemente können in zwei wichtige Gruppen eingeteilt werden: Block-Elemente und Inline-Elemente.

Block-Elemente

Block-Elemente nehmen standardmäßig die gesamte verfügbare Breite ein und beginnen immer in einer neuen Zeile.

Sie werden oft verwendet, um größere Bereiche einer Webseite zu strukturieren.

Beispiele für Block-Elemente sind: <div>, <p>, <h1> bis <h6>.

Wenn du einem Block-Element einen Rand gibst, erkennst du, dass es die komplette Breite der Zeile einnimmt – auch wenn nur wenig Text enthalten ist.

1<p style="border: 1px solid black">Block-Element</p>
2<div style="border: 1px solid black">Block-Element</div>

Inline-Elemente

Inline-Elemente nehmen nur so viel Platz ein, wie ihr Inhalt benötigt.

Sie beginnen nicht in einer neuen Zeile und stehen meistens mitten im Text.

Beispiele für Inline-Elemente sind: <span>, <strong> und <a>.

Wenn du einem Inline-Element einen Rand gibst, siehst du, dass nur der eigentliche Inhalt umrandet wird.

1<span style="border: 1px solid black">
2Inline-Element
3</span>

Inline-Elemente in Block-Elementen

Du kannst Inline-Elemente innerhalb von Block-Elementen verwenden.

So kannst du einzelne Wörter oder Textbereiche besonders hervorheben.

Ein Block-Element solltest du jedoch normalerweise nicht innerhalb eines Inline-Elements einfügen.

1<p style="border: 1px solid black">
2  Das ist ein
3  <strong style="border: 1px solid blue">
4    wichtiges
5  </strong>
6  Wort.
7</p>