1. Startseite
2. HTML
3. Block- und Inlineelemente

Das Block-Element

Blockelemente erstrecken sich über die gesamte verfügbare Breite. Jedes Blockelement beginnt und endet mit einem Zeilenumbruch, der vom Browser automatisch gesetzt wird. Das bedeutet, dass mehrere Blockelemente stets untereinander stehen. Im Beispiel verwenden wir das <p>-Tag, welches ein Blockelement ist.

<p>Blockelement 1</p><p>Blockelement 2</p>
<p>Blockelement 3</p>

Bei Blockelementen spielt es keine Rolle, ob sie nebeneinander oder untereinander stehen. Im Browser werden sie durch einen Zeilenumbruch getrennt und immer untereinander dargestellt.

In der Entwicklerumgebung F12 kann man gut erkennen, das Blockelemente den Platz bis an das Ende des Browserfensters ausnutzen, auch wenn kein Content mehr vorhanden ist.

Das Inline-Element

Das Inline-Element nimmt nur so viel Platz in Anspruch, wie es benötigt. Inline-Element können auch in einer Reihe platziert werden, weil sie keinen Zeilenumbruch erzwingen.

<p>Wir erstellen <u>unterstrichene</u>, <b>fett gedruckte</b> und 
<i>schräg geschriebene</i> Textelemente in einem Absatz.</p>

Block und Inline

Block- und Inline-Elemente haben eine übersichtliche Syntax, die zu berücksichtigen ist, um eine fehlerfreie Ausgabe zu erhalten.

1) Blockelemente dürfen andere Blockelemente enthalten.

<div>
 Div ist ein sogenanntes leeres Blockelement.
 <p>Ein Absatz als Blockelement in einem anderen Blockelement.</p>
 Div-Elemente sind beliebt weil sie universell einsetzbar sind.
</div>

2) Blockelemente dürfen Inlineelemente enthalten.

<p>Ein Textabsatz enthält <i>ein Inlineelement</i> Auch mehrere Inline-Elemente sind erlaubt.</p>

3) Inlineelemente dürfen andere Inlineelemente enthalten.

<p>Ein Textabsatz enthält <i>mehrere Inlineelemente <b>die miteinander <u>verschachtelt sind.</u></b></i>
Die Elemente sollten entgegengesetzt zum Starttag wieder geschlossen werden.</p>

Durch diese Verschachtelung ermöglichen wir das zum Beispiel bestimmte Abschnitte kursiv, fett und unterstrichen gleichzeitig dargestellt werden können.

4) Inlineelemente dürfen keine Blockelemente enthalten. Das führt zu einer fehlerhaften Ausgabe.

Alle Elemente in HTML sind entweder Block oder Inline. Mit CSS haben wir die Möglichkeit, aus Inline-Elementen einfach Block-Elemente zu machen und umgekehrt.