HTML5 Inhaltskategorien: Block, Inline & Content Models
In HTML geht es bei den sogenannten Inhaltskategorien (Content Categories / Content Models) darum, welche Elemente in welchen anderen Elementen verschachtelt werden dürfen.
Früher (in HTML4) sprach man simpel von Block- und Inline-Elementen. In HTML5 wurde dieses System durch ein präziseres Modell abgelöst. Dennoch hilft die klassische Unterscheidung weiterhin dabei, das Verhalten im Browser zu verstehen.
1. Visuelles Verhalten: Block vs. Inline (CSS)
Auf der visuellen Ebene lassen sich Elemente im Wesentlichen in drei Gruppen unterteilen: Blockelemente, Inline-Elemente und Inline-Block-Elemente.
HTML bestimmt ausschließlich die semantische Struktur des Dokuments. Dass sich ein
<div> wie ein Block
und ein <span> wie Inline verhält, liegt am internen Standard-Stylesheet des Browsers.
Über die CSS-Eigenschaft display (z. B. display: block oder display: inline-block)
kannst du dieses visuelle Verhalten jederzeit anpassen.
Verwandte Themen: CSS Boxmodell, CSS Bemaßen & Zentrieren
Blockelemente
article, aside, blockquote, dd, div, dl, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, main, nav, noscript, ol, p, pre, section, table, ul
- Erzeugen standardmäßig eine neue Zeile und stehen untereinander.
- Nehmen standardmäßig die volle verfügbare Breite des Elternelements ein (Ausnahme:
<table>). Die Höhe richtet sich nach dem Inhalt. - Lassen sich mit CSS in Breite, Höhe, Margin und Padding frei bemaßen.
- Können in der Regel andere Block- und Inline-Elemente enthalten (wichtigste Ausnahme:
<p>darf keine anderen Block-Elemente enthalten).
Inline-Elemente
a, span, b, i, strong, em, small, abbr, cite, code, dfn, kbd, sub, sup, mark, q
- Erzeugen keinen Zeilenumbruch und fließen nebeneinander im Text.
- Nehmen nur so viel Platz ein, wie ihr Inhalt benötigt.
- Lassen sich mit CSS nicht direkt bemaßen (
widthundheighthaben keine Wirkung). - Vertikale Abstände (
margin-top/margin-bottom) wirken nicht. - Vertikales
paddingist zwar möglich, verschiebt aber den umliegenden Text nicht, sondern überlagert Nachbarelemente.
Inline-Block-Elemente (Ersetzte Elemente / Formulare)
img, iframe, input, textarea, select, button, video, audio, canvas
- Fließen wie Inline-Elemente nebeneinander in der Zeile (erzeugen keinen Umbruch).
- Verhalten sich bei den Abmessungen jedoch wie Block-Elemente: Sie besitzen eine eigene Breite/Höhe und reagieren vollständig auf CSS-Bemaßung,
marginundpadding.
1. Block-Elemente (display: block)
2. Inline-Elemente (display: inline)
Inline 1 Inline 2 (fließt daneben) Inline 3 (width/height ignoriert)3. Inline-Block-Elemente (display: inline-block)
2. HTML5-Semantik: Flow Content vs. Phrasing Content
HTML5 unterscheidet nicht mehr starr zwischen Block und Inline, sondern nutzt überlappende Inhaltskategorien. Die zwei wichtigsten Kategorien für den Alltag sind Flow Content und Phrasing Content.
Phrasing Content (Satzinhalt)
Phrasing Content ist die moderne HTML5-Definition dessen, was man früher als Inline-Elemente bezeichnet hat. Er umfasst den Fließtext eines Dokuments sowie alle Elemente, die diesen Text strukturieren oder begleiten.
Was zählt zu Phrasing Content?
- Reiner Text ("Hallo Welt")
- Textformatierungen:
<span>,<strong>,<em>,<code>,<mark>,<small> - Links & Formular-Elemente:
<a>,<button>,<label>,<input> - Eingebettete Medien:
<img>,<video>,<audio>,<canvas>,<svg> - Zeilenumbrüche:
<br>,<wbr>
Flow Content (Dokumentfluss-Inhalt)
Flow Content ist die umfassende Oberkategorie für fast alle Elemente, die im <body> der Webseite
dargestellt werden. Er umfasst sowohl große Struktur-Container (die alten Block-Elemente) als auch den gesamten Phrasing Content.
Elemente, die nur Phrasing Content erwarten (wie
<p> oder <h1>), dürfen keine reinen Flow-Container (wie <div> oder <ul>) enthalten.
Übersicht: Wer darf was enthalten?
| Element-Typ | Erlaubter Inhalt | Typische Vertreter |
|---|---|---|
| Phrasing-Container | Nur Phrasing Content (Reiner Text, Bilder, Inline-Formatierungen) | <p>, <h1>–<h6>, <label>, <dt> |
| Flow-Container | Gesamter Flow Content (Divs, Absätze, Listen, Text u.v.m.) | <div>, <section>, <article>, <li>, <footer> |
| Transparent / Flexibel | Passt sich dem Eltern-Element an / erlaubt gesamten Flow Content | <a> (darf in HTML5 auch ganze <div>-Blöcke umschließen) |
Weiterführende Links und vollständige Kategoriemodelle:
SELFHTML Wiki: HTML5-Kategorien |
MDN Web Docs: Content categories