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 sagt beispielsweise <h1> hier ist der Bereich für die Überschrift bzw. <p> hier ist der Bereich von einem Absatz.

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. Wichtig ist das Verständnis der Funktion dieser beiden Befehle um Bereiche festzulegen.

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

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.