Lektion 8: Gruppierung von Elementen (span und div)

Die Elemente <span> und <div> werden zum gruppieren und strukturieren eines Dokumentes benutzt und sehr oft mit den Attributen class und id verwendet.

In dieser Lektion werfen wir einen genaueren Blick auf die Benutzung von <span> und <div>, da genau diese beiden HTML-Elemente von zentraler Bedeutung für den Aufbau von Webseiten mit Hilfe von CSS ist.

  • Gruppieren mit <span>
  • Gruppieren mit <div>

Gruppieren mit <span>

Das Element <span> ist ein neutrales Element, welches dem Dokument eigentlich nichts hinzufügt. Aber zusammen mit CSS, kann <span> dazu benutzt werden, um visuelle Besonderheiten an bestimmten Textstellen im Dokument einzufügen.

Nehmen wir dieses Goethe-Zitat:

	
	<p>Edel sei der Mensch, hilfreich und gut.</p>

Heben wir die Tugenden, die der Mensch laut Herrn Goethe haben sollte, rot hervor. Zu diesem Zweck, können wir diese mit <span> markieren. Jedem span wird dann eine Klasse (class) zugeordnet, die wir im Stylesheet definieren können:

	
	<p><span class="tugend">Edel</span> sei der Mensch, 
	   <span class="tugend">hilfreich</span> und <span class="tugend">gut</span>.</p>

Das zugehörige CSS:

	
	span.tugend {
	  color:red;
	}

Natürlich können Sie auch id nutzen, um den <span>-Elementen einen Stil zuzuordnen. Aber bitte denken Sie daran, dass jede der drei <span>-Elemente eine eigene id bekommt, so wie Sie es in der letzten Lektion gelernt haben.

Gruppieren mit <div>

Während <span>, wie im vorhergehenden Beispiel gesehen, innerhalb eines Block-Level-Element gebraucht wird, wird <div> benutzt, um eines oder mehrere Block-Level-Element zu gruppieren.

Neben diesem Unterschied funktioniert das gruppieren mit <div> aber mehr oder weniger in der gleichen Art und Weise. Schauen wir uns ein Beispiel mit den jeweils letzten drei Bundeskanzlern von SPD bzw. CDU/CSU, aufgeteilt nach den Parteien, denen diese entstammen:

	
	<div id="spd">
	  <ul>
		<li>Gerhard Schröder</li>
		<li>Helmut Schmidt</li>
		<li>Willy Brandt</li>
	  </ul>
	</div>

	<div id="cducsu">
	  <ul>
		<li>Angela Merkel</li>
		<li>Helmut Kohl</li>
		<li>Kurt Georg Kiesinger</li>
	  </ul>
	</div>

Und in unserem Stylesheet benutzen wir das Gruppieren genauso wie im obigen Beispiel:

	
	#spd {
	  background:red;
	  color:white;
	}

	#cducsu {
	  background:black;
	  color:white;
	}

Im dem oben stehenden Beispielen haben wir <div> und <span> nur für einfache Sachen, wie Texte und Hintergrundfarben herangezogen. Beide Elemente haben das Potenzial, viel fortgeschrittenere Sachen zu bewältigen, z.B. …. Aber dies wird nicht mehr in dieser Lektion behandelt werden. Mehr darüber später im Tutorial.

Zusammenfassung

In Lektion 7 und 8 haben Sie etwas über die Selektoren id und class und die Elemente span und div gelernt.

Sie sollten nun mehr oder weniger in der Lage sein, alle Teile Ihrers Dokumentes zu gruppieren oder identifizieren. Dies ist ein großer Schritt in Richtung “Meistern von CSS”. In Lektion 9 führen wir Sie in das Box-Modell ein.

<< Lesson 7: Identifikation und Gruppierung von Elementen (class und id)

Lesson 9: Das Box-Modell >>