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 Gruppe der Inline-Blockelemente.

Gerade im Zusammenhang mit CSS und der Ausrichtung und Gestalung der Elemente ist diese Unterscheidung von äußerster Wichtigkeit. Die unterschiedlichen Eigenschaften dieser Elementgruppen sollten unbedingt bekannt sein.

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

Blockelemente definieren die größere Strukturen einer Webseite in Boxen, während Inline Elemente einzelne Textstellen auszeichnen und kleinere Bereiche definieren.

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 ...

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-Blockelemente

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


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.