Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt

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.

Lösung Übung

Aufgabenlösung Bereiche festlegen mit <div>

In unserem Grundgerüst erstellen wir nun diese 4 Bereiche:

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

Wenn wir jetzt die Vorschau ansehen, sehen wir nicht viel, außer dass jeder Text seine eigene Zeile hat. Das kommt daher, dass der HTML-Befehl <div> ein Block-Element ist.

Um später diese Bereiche mit CSS ansprechen zu können, um Design darüberzulegen, erhält nun jeder <div>-Bereich noch als Ergänzung das Attribut id mit entsprechender Benennung.

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

Weiterempfehlen • Social Bookmarks • Vielen Dank

Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).

Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button:



(kann angegeben werden)

Nach Absenden kommt hier Feedback! Bitte nicht doppelt absenden. Danke.

    E-Books zum Kurs

    von HTML-Seminar.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Fehler melden

Vielen Dank für Ihre Hilfe