HTML Kategorien

Bei der Unterteilung der Elemente in HTML Kategorien (engl. content categories oder content models) geht es nicht um die Semantik, sondern darum, welche Elemente in anderen Elementen verschachtelt werden dürfen.

In HTML4 gab es die Unterteilung in Block- und Inline-Elemente. Die HTML Kategorien in HTML5 sind etwas komplexer. siehe Selfhtml Wiki

Es macht jedoch Sinn, sich die Unterteilung der Block- und Inline Elemente zuerst anzuschauen, da die Regeln auch in HTML 5 gelten. Die genaueren Unterteilungen findet man dann bei Selfhtml Wiki HTML5 Content Model
siehe auch HTML5 Content Model, Stefan Münz.

Block und Inline Elemente

Die HTML Elemente lassen sich in 2 große Gruppen einteilen Blockelemente und Inline Elemente. Zu den Inline Elementen gesellt sich noch die Untergruppe der Inline-Blockelemente.

Neben den Regeln zur Verschachtelung ist auch im Zusammenhang mit CSS und der Ausrichtung und Gestalung der Elemente diese Unterscheidung von äußerster Wichtigkeit.

Man erkennt Blockelemente daran, dass sie eine neue Zeile erzeugen, während Inline Elemente in Zeilen nebeneinander angeordnet werden. Weitere Eigenschaften siehe unten.

Blockelemente definieren die größere Strukturen einer Webseite in Boxen (Artikel, Textabschnitte, Überschriften, Bereiche), während Inline Elemente kleinere Bereiche auszeichnen wie einzelne Worte oder Textstellen aber auch einzelne Inline-Block-Elemente wie Bilder, Video, Audio und Formularelemente.

Blockelemente dürfen in der Regel nicht in Inline Elementen verschachtelt werden.

Inline Elemente erzeugen keine neue Zeile, sondern werden in Zeilen nebeneinander angeordnet.

Verwandte Themen: CSS Boxmodell, CSS Bemaßen & Zentrieren

Blockelemente

siehe auch Mozilla
Blockelemente HTML5 / Blockelemente (grouping)

article; aside; blockquote; canvas; dd; div; dl; fieldset; figcaption; figure; footer; form; h1; , h2; , h3; , h4; , h5; , h6; header; hgroup; hr; main; nav; noscript; ol; output; p; pre; section; table; tfoot; ul ...

• Blockelemente stehen untereinander, erzeugen eine neue Zeile.
• Die meisten Blockelemente können andere Blockelemente und Inline Elemente enthalten (Ausnahme p, welches keine anderen Blockelemente enthalten darf).
• Blockelemente sind so breit wie das Elternelement (Ausnahme table), die Höhe wird durch den Inhalt bestimmt.
• Blockelemente lassen sich mit CSS bemaßen.
• Ein Blockelement ist Flow-Content, welches Flow-Content enhalten darf.
  Flow-Content sind Elemente im Dokumentkörper body

Inline- Elemente

siehe auch Mozilla

a, span, b, i, small, abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var, bdo, map, object, q, script, sub, sup, label ...

• Inline-Elemente stehen nebeneinander. Sie erzeugen keinen Zeilenumbruch.
• Inline-Elemente dürfen keine Blockelemente umschließen (Ausnahmen a, del, ins, map)
• Inline-Elemente lassen sich nicht mit CSS bemaßen
• Außenabstand margin oben und unten ist nicht möglich
• Innenabstand padding ist möglich aber der Innenabstand ändert nicht die wirkliche Höhe, sondern überlagert andere Elemente
• Inline Elemente entsprechen in weiten Teilen dem HTML5 "Phrasing Content"

Inline-Blockelemente

img, iframe,input, textarea, select, button, video, audio ...

• stehen nebeneinander in der Zeile. Es ensteht keine neue Zeile.
• lassen sich mit CSS bemaßen und können Außen und Innenabstände bekommen

---

Es besteht darüberhinaus mit CSS die Möglichkeit, die vorgegebene Eigenschaft eines Elementes zu ändern, so dass sich beispielsweise ein Block Element wie ein Inline Element verhält.