Block und Inline: Zwei Sorten von Elementen
Warum fängt eine Überschrift immer auf einer neuen Zeile an, während ein Link brav im Satz stehen bleibt? Weil HTML-Elemente sich standardmäßig auf zwei Arten verhalten: als Block oder als Inline-Element. Wer dieses Denkmodell einmal verstanden hat, versteht die Hälfte aller Layout-Rätsel.
Block-Elemente: die ganze Breite, bitte
Ein Block-Element beginnt auf einer neuen Zeile und nimmt sich die volle verfügbare Breite, wie ein Absatz in einem Buch. Typische Vertreter: <p>, <h1> bis <h6>, <ul>, <table>, <div> und die Strukturelemente aus dem Kapitel Semantisches HTML.
Inline-Elemente: mitten im Fluss
Ein Inline-Element bleibt im Textfluss und ist nur so breit wie sein Inhalt. Typische Vertreter: <a>, <strong>, <em>, <code>, <span> und <img>.
Und ich bin ein Absatz mit einem Inline-Element mittendrin.
div und span: die neutralen Behälter
Zwei Elemente existieren nur für dieses Denkmodell: <div> ist der bedeutungslose Block-Container, <span> der bedeutungslose Inline-Container. Sie sagen nichts über ihren Inhalt aus und sind dafür da, Bereiche fürs Styling mit CSS zu gruppieren. Faustregel: erst schauen ob es ein passendes Element mit Bedeutung gibt, und nur wenn nicht, zu div oder span greifn.
CSS darf das alles umwerfen
Wichtig fürs Verständnis: Block und Inline sind nur das Standardverhalten. Mit der CSS-Eigenschaft display kannst du jedes Element umschalten, aus einem Link einen Block machen oder Listenelemente nebeneinander stellen. Moderne Layouts mit Flexbox und Grid hebeln das Zeilenverhalten sowieso komplett aus. Das Denkmodell bleibt trotzdem wertvoll, denn es beschreibt was passiert wenn du nichts weiter angibst.
Nebenbei: In der HTML-Spezifikation heißen die Kategorien inzwischen etwas anders und feiner unterteilt (Stichwort Content-Kategorien). Für den Alltag und fürs Lernen ist das Block-und-Inline-Modell aber nach wie vor die nützlichste Brille.
Weiter im Lernpfad: Semantisches HTML · Verwandt: display in CSS