Blockelemente

Für die Ausrichtung von Html-Elementen mittels css-Formatierung ist es wichtig zu wissen, ob ein zu verwendendes Element ein Blockelement ist oder ein inline-Element.

Html-Blockelemente dienen zur Formatierung zusammengehöriger Elemente innerhalb von Webseiten. Dabei dürfen sie, als sogenannte Kindelemente, neben normalem Fließtext auch inline-Elemente aufnehmen. Sogar weitere, auch verschachtelte, Blockelemente dürfen in einigen Blockelementen enthalten sein. Der div-Block ist ein typisches Beispiel für verschachtelte Blockelemente und universell einsetzbar.

Im p-Tag hingegen dürfen keine weiteren Blockelemente enthalten sein.

Blockelemente erzeugen eine neue Zeile. Nachfolgende Html-Elemente beginnen ebenfalls auf einer neuen Zeile. Einige Blockelemente, beispielsweise der p-Tag, fügen noch eine zusätzliche Leerzeile zum vorigen und nachfolgendem Html-Element ein.

Mit float:left; lassen sich Blockelemente auch spaltenförmig nebeneinander anordnen. Diese Tatsache macht unsichtbare Tabellen, als Gestaltungsmittel zur genauen Positionierung von Html-Elementen, überflüssig. Dies ist ein wichtiger Schritt zum barrierefreien Webdesign.

Es gibt auch Html-Elemente, die je nach Verwendung, ob innerhalb oder ausserhalb von Blockelementen, sowohl als Blockelemente als auch als inline-Elemente fungieren. Dies sind die Elemente del (durchgestrichener Text) und ins (neu hinzugefügter Text).

Die wichtigsten Blockelemente

div, form, h1-h6, hr, noframes, noscript, ol, p, pre, table, ul