14. DIV UND SPAN

Wenn es an der Stelle, an der Sie eine Klassen-basierte oder ID-basierte CSS-Regel verwenden möchten, gerade kein HTML-Tag gibt, dann können Sie stattdessen ein < div > oder < span > Tag verwenden. Diese Elemente besitzen keine eigenen visuellen Eigenschaften. Sie können diesen Tags mit CSS ein beliebiges Aussehen geben.

Das < div >-Tag ist ein Block-Element

Das < div > Tag (für engl. division, Unterteilung) kennzeichnet einen eigenständigen Teil des Seiteninhalts ähnlich einem Absatz < p > oder einer Überschrift < h1 >. Die Tags < div > und < / div > sind wie leere Gefässe, zwischen denen fast alles stehen kann, wie beispielsweise eine Überschrift, ein Text, mehrere Absätze, eine Liste, eine Tabelle, ein Foto oder andere Inhalte. Sie können gemeinsame Stilregeln definieren, die nur für die Elemente innerhalb der beiden < div > < / div > Tags gelten. Angenommen, Sie haben ein Foto in Ihre Webseite eingebaut, für das es eine Bildunterschrift gibt. Bis jetzt hatten die beiden Elemente < img > und < p > nichts miteinander zu tun. Sobald Sie aber beide mit < div > Tags umgeben, bilden sie eine logische Einheit.


< div class="foto">
    < img src="ferien.gif" alt="Pinguine"/>
    < p > Mein Jahresurlaub in die Antarktis. < / p >
< / div >


Je nachdem, was Sie in den Deklarationsblock für die CSS-Klasse "foto" schreiben, können Sie nun beide Elemente gemeinsam mit einem dekorativen Rahmen umgeben, eine Hintergrundfarbe festlegen und vieles mehr. Auch ist es möglich, den so markierten Teil an einer bestimmten Stelle im Seitenlayout zu positionieren, z.B. auf der rechten Seite des Browserfensters. Das < div > Tag eignet sich daher hervorragend um eine Seite in mehrere logische Bereiche zu unterteilen, beispielsweise für das Firmenlogo, den Navigationsbereich, den Haupttext, die Fusszeile, usw.
Zu den Block-Elementen zählen vor allem die folgenden:
< div > < address> < blockquote > < form > < h1 > bis < h6 > < ol > < p > < table > < ul >

Das < span >-Tag ist ein Inline-Element

Ähnelt ein < div > Tag am ehesten einem < p > Tag, so hat das < span > Tag die meisten Gemeinsamkeiten mit dem < a > Tag für das Einfügen von Hyperlinks. Sie können < span > verwenden wie andere Inline-Tags (z. B. < a > < strong > < em > ). Das < span > Tag wird verwendet, um einzelne Textteile, Sätze oder Wörter zu markieren, die Teil eines längeren Absatzes oder einer Überschrift sind. Das < span > Tag kann beispielsweise benutzt werden um einen Firmennamen zu markieren. Anschliessend können Sie CSS verwenden, um den Namen mit einer eigenen Schrift und Farbe hervorzuheben. Im folgenden Beispiel sorgt die CSS-Klasse "firmennamen" dafür, dass die Firmennamen ALDI und COLORDESIGN das gleiche Aussehen bekommen.

Beispiel für die DIV und SPAN HTML Tag