CSS-Layout für Boxen: Hilfsboxen

Teilweise will man zwar Boxen-Eigenschaften benutzen bzw. verändern, aber keine speziellen HTML-Elemente wie <p> oder <h1> usw. benutzen, da es sich weder um Absätze noch um Überschriften handelt. Dafür stehen zwei HTML-Elemente zur Verfügung, die lediglich Boxen für ihre Inhalte definieren und sonst keine weitere bedeutung haben:

• <div>: Definition einer Box als ein Block-Element
• <span>: Definition einer Box als ein Inline-Element

Die beiden Elemente werden meistens dazu benutzt, Layouteigenschaften von Dokumentenabschnitten zu definieren.

<div> steht für division (Abteilung / Bereich). Der Zweck eines <div>-Elementes ist das Einschließen mehrerer Elemente (z.B. Text, Bilder, Tabellen, Listen, …) in einen gemeinsamen Bereich. Dadurch werden Bereiche erzeugt, die mit CSS formatiert werden können. Ein <div>-Element ist ein Block-Element und hat ansonsten keine besonderen Eigenschaften.

See the Pen HTML – Div by Barbara Dörsam, HdM Stuttgart (@bdhdm) on CodePen.

<span> steht für to span (überspannen). Der Zweck eines <span>-Elementes ist das Einschließen mehrerer Elemente (Text und andere Inline-Elemente) in einen gemeinsamen Bereich Dadurch werden Bereiche erzeugt, die mit CSS formatiert werden können. Ein <span>-Element ist ein Inline-Element und hat ansonsten keine besonderen Eigenschaften. Beispiel:

See the Pen HTML – Span by Barbara Dörsam, HdM Stuttgart (@bdhdm) on CodePen.