Bereiche festlegen über <div> und <span> erstellen

Über die beiden Befehle <div> und <span> können Bereiche festgelegt werden, die keine semantische Bedeutung haben, sprich geschmacksneutral sind. Im Vergleich zu <div> sagt beispielsweise <h1> aus, dass hier der Bereich für die Überschrift beginnt bzw. bei <p> der Bereich von einem Absatz startet.

Mit HTML5 sind neue strukturierende HTML-Befehle mit semantischer Bedeutung dazu gekommen. Diese neuen HTML5-Befehle werden erst im Kapitel HTML5 angesehen. Daher wird es hier erst auf die bisherige Art erklärt. Um Bereiche festzulegen, ist das Verständnis der Funktion dieser beiden Befehle wichtig.

Die beiden neutralen Befehle können andere HTML-Befehle beherbergen. Dadurch können Container gebildet werden, die dann einen bestimmten Zweck haben: Diese Bereiche werden dann gerne für Design genutzt.

Das <div> steht für das englische „division“, was in der Übersetzung nichts anderes als „Bereich“ bedeutet. Bei <div> handelt es sich um ein Block-Element.

<div> … </div>

Typische Verwendungen dafür sind (waren) die Bereiche der Website wie Kopfbereich, Steuerungsbereich, Inhaltsbereich.

Am letzten Bild sieht man die Ergänzung des HTML-Befehls <div> durch das Attribut id. Dadurch erhalten wir die Unterscheidung der Bereiche, auf die wir dann später mit CSS zugreifen können. Im Beispiel wurde vergeben:

<div id="kopf">
<div id="navi">
<div id="inhalt">

Hier zur Erinnerung: die Benennung sollte mit a-z, 0-9 und ohne Leerzeichen und Sonderzeichen erfolgen – wie wir schon Dateinamen vergeben haben.

Wichtig ist noch im Kopf zu haben, dass <div> erst durch CSS stark wird und dort nahezu unentbehrlich ist.

<span> – Bereiche innerhalb anderer Bereiche (Blockelemente)

Was hat es nun mit <span> auf sich? Wenn wir Bereiche innerhalb beispielsweise eines Absatzes kennzeichnen wollen, dann können wir dies mit <span>. Hier haben wir ein Inline-Element, sprich es kann innerhalb eines anderen Elements (hier im Beispiel innerhalb von <p>) genutzt werden und erzeugt keinen Umbruch wie ein Blockelement.

<p>Hier kommt Inhalt mit <span>gekennzeichnenten</span> Text,
z.B. <span>später gelb</span> oder auch in 
<span>anderer Farbe</span> hinterlegten Bereiche.

Lassen wir uns das in einem Browser anzeigen, sehen wir … nichts Besonderes. Auch <span> wird erst durch CSS stark!

Direkt sichtbar wird die Nutzung von <span> erst über CSS, wenn wir Farben in den Hintergrund legen können. Dazu folgt später ein Kapitel in CSS unter: DIV und SPAN mit CSS nutzen

Unterschied zwischen DIV und SPAN

Wichtig ist zu verstehen, was der Unterschied zwischen DIV und SPAN ist:

• DIV ist ein Block-Element. Ein DIV nimmt die komplette Breite ein, sofern nichts anderes in CSS umdefiniert wurde.
• SPAN dagegen kann innerhalb eines Bereiches angewendet werden – SPAN ist ein Inline-Element.

Aufgabe: Bereiche festlegen mit <div>

Legen Sie in HTML die Bereiche für den gezeigten Aufbau fest. Allerdings nicht frustrieren lassen, da die Ausgabe nicht so wie im gezeigten Bild herauskommt. Das liegt daran, dass wir bisher weder Farben, Hintergrundfarben noch Höhen mitgeben können.

<div>Bereich Kopf</div>
<div>Bereich Steuerung</div>
<div>Bereich Inhalt</div>
<div>Bereich Fuß</div>

<div id="bereichkopf">Bereich Kopf</div>
<div id="bereichsteuerung">Bereich Steuerung</div>
<div id="bereichinhalt">Bereich Inhalt</div>
<div id="bereichfuss">Bereich Fuß</div>