Die Elemente <div> und <span>

Über das Problem des Formatierens

In den Anfangszeiten des Web tauschte man (vor allem waren das Wissenschaftler) Informationen in Form von Text und Tabellen aus. Um Design machten sie sich keine Gedanken. Wichtig war, dass Browser Texte und Informationshierarchien darstellten, nicht wie sie das Bildschirmdesign umsetzten, zumal es jede Menge unterschiedliche monochrome Monitore gab ...

Als das Web für Massen von Nutzern verfügbar wurde, stellte sich auch die Frage nach dem Design neben dem Inhalt. Nun wurde die normale Vorgehensweise der Browser zum Problem: Browser arbeiten nämlich ihre Liste von "Befehlen" ab, ohne sich um pixelgenaues Design zu kümmern: Sie arbeiten ein Element ab, bis es fertig ist. Passt es nicht auf eine Zeile, kommt es auf die nächste. Dann beginnt das nächste Element usw. uws. Wie viel dabei auf jeweils eine Zeile passt, hängt von der Graphikkarte, der Bildschirmgröße, der Auflösung, der Schriftgröße und der Fenstergröße ab. Man weiß also nie genau, wo etwas ist und wie es aussieht - für Designer ein Alptraum.

Um wenigstens ein bisschen Herr des Designs zu werden, bediente man sich verschiedener Tricks. Besonders gern entfremdete man dazu Tabellen, da sich die Tabelleneigenschaften wie Spalten und Zellen mit Breite und Höhe sehr genau steuern lassen. Oder man verwendete "blinde Graphiken ", um Abstände zu erzeugen.

Diese Entfremdung verstößt jedoch gegen die Prinzipien von HTML: Eine Tabelle dient der Darstellung von Information und nicht der Realisierung eines Designs. Und eine blinde Graphik ist ein Widerspruch in sich - ein Bild, dass nie jemand sehen wird.

In modernem HTML lassen sich so gut wie alle Designprobleme per CSS lösen, indem man sich zweier Elemente bedient, deren mehr oder minder einzige Funktion ist, andere Elemente zu beinhalten und nach Belieben formatiert zu werden.

Diese beiden Elemente heißen <div> und <span>.

Allgemeines Block-Element: <div>

Mit <div> leiten Sie ein allgemeines Blockelement ein, in das Sie ein oder mehrere andere (Block-)Elemente einschließen können (div = division = Bereich). Alles, was zwischen diesem Tag und dem abschließenden </div> steht, wird als Teil des Bereichs interpretiert und erhält bestimmte definierte Eigenschaften des Bereiches.

Einen solchen Bereich und alle seine enthaltenen Elemente können Sie zum Beispiel mit dem Attribut "align=" im einleitenden <div>-Tag ausrichten. Mit align="center" richten Sie den Bereich mit allen seinen Elementen zentriert aus (align = Ausrichtung, center = zentriert), mit align="right" rechtsbündig (right = rechts). Mit align="justify" werden innere Elemente wie freistehender Text, Textabsätze oder Überschriften als Blocksatz ausgerichtet. Mit align="left" erzwingen Sie die linksbündige Ausrichtung von Elementen (Voreinstellung).

Noch wichtiger ist, dass mit Hilfe des <div>-Elements Bereiche einer Seite bequem und pixelgenau positioniert werden können. Der konsistente Aufbau dieser Internetseite wird durch drei <div>-Elemente erreicht. Wir sehen uns das genauer an.

Ein "nackter" <div>

Definiert man im Code einer HTML-Datei nur ein<div>-Element, so wird man feststellen, dass <div> nur eine neue Zeile bewirk (genauer gesagt: einen neuen Bereich).

Hier der Beispielcode:

Und so sieht es aus.

Als Beispiel wird hier ein <div> in einen Absatz eingefügt, und zwar jetzt:

Wie Sie sehen, ist das Ergebnis nicht sehr beeindruckend: Das ist der Text im neuen Bereich. beginnt in einer neuen Zeile und der folgende Text nach dem </div> auch. Das liegt daran, dass das <div>-Element an und für sich nur die Eigenschaft hat, einen neuen Bereich in einer neue Zeile zu beginnen - alle anderen Eigenschaften muss und soll man diesem Element erst noch zuweisen!

Zusammenfassend sei gesagt, dass das Element <div> nichts weiter bewirkt, als dass ein Bereich in einer neuen Zeile des Fließtextes beginnt. Ansonsten hat es keine Eigenschaften. Es ist dazu gedacht, um mit Hilfe von CSS formatiert zu werden.

Ein <div> mit Hintergrund, Rahmen und Abstand nach außen und innen

Wir erweitern den schon bekannten <div> ein bisschen, damit er sich vom üblichen Text abhebt.

Hier der Beispielcode, zum besseren Lesen mit Zeilenumbrüchen:

Und so sieht es aus.

Als Beispiel wird hier ein <div> in einen Absatz eingefügt, und zwar jetzt:

Das Beispiel ist etwas beeindruckender: Das <div>-Element ist 50% des Fensters breit, hat einen gelben Hintergrund und schwarze Schrift. Der Abstand zu allen anderen Elementen beträgt nach allen Seiten 25 Pixel und der Abstand der Elemente innerhalb des <div> zum Rahmen des >div> beträgte 5 Pixel. Alles ist von einem doppelten weißen Rahmen von 5 Pixeln Breite umgeben. Die dünne schwarze Linie innerhalb des Rahmens kommt vom Hintergrund der Seite.

Bereiche mit <div> positionieren - das Seitendesign steuern

Eine der interessantesten Verwendungen des <div>-Elements ist die Gestaltung des Seitendesigns mit Hilfe von absolut und relativ positionierten <div>-Elementen. Die Seite, die Sie gerade lesen, ist mit drei <div>-Elementen gestaltet. Mit Hilfe von CSS und des <div>-Elements kann man nämlich die normale HTML-Positionierung (das nachfolgende Element wird immer relativ zun vorhergehenden positioniert) durchbrechen.

Zur Positionierung des <div>-Elements dient das Attribut position mit den Werten absolute, relative, static.

absolute - absolute Positionierung, gemessen am vorherigen Element - Beispiel ansehen

relative - relative Positionierung, gemessen von der Normalposition des Elements

static - keine Positionierung

Zur Erläuterung - absolute Positionierung

1. Gemessen am vorherigen Element bedeutet normalerweise den <body>, es sei denn, ein <div> wäre in einem anderen <div> positioniert - bitte experimentieren!
2. Bei absoluter Positionierung sollte man wenigstens Angaben top, left, width machen, sonst ist die absolute Positionierung so ziemlich sinnlos. Fehlt die Angabe zu width, reagieren Browser sehr unterschiedlich und nicht immer vorhersagbar.
3. Bei absoluter Positionierung sind Fehler möglich, z. B. kann man einen größer definierten <div> in einen kleineren einschließen. In solchen Fällen ignorieren Browser das nicht Interpretierbare. Achten Sie also auch auf die Logik der Position.
4. Wenn Sie Rahmen und Außenabstände für Bereiche verwenden, müssen Sie diese mitberechnen.
5. Bei absoluter Positionierung können sich Bereiche überlagern, was normalerweise nicht beabsichtigt ist. Man kann mit dem Attribut z-index steuern, welcher Bereich weiter oben liegt und zu sehen ist (größere Zahl). So lassen sich zum Beispiel Effekte erzielen, wie der rechte Rahmen der Hyperlinks in der Navigation dieser Seite.

Zur Erläuterung - relative Positionierung

1. Wenn Sie das Beispiel für die absolute Positionierung kopieren und die absoluten durch relative Angaben ersetzen, werden Sie sehen, dass die restlichen Angaben recht eigenwillig interpretiert werden. Das liegt aber daran, dass man bei relativer Positionierung anders vorgeht und nicht dieselben Attribute wie bei der absoluten Positionierung benötigt.
2. Wenn Sie nämlich zum Beispiel position:relative; top:5px; notieren, dann legen Sie für das Element fest, dass sein oberer Rand 5 Pixel tiefer liegt, als es normalerweise der Fall wäre. Wo das Element normalerweise wäre, hängt von den konkreten Bedingungen ab. Ist es zum Beispiel unter einer Überschrift mit einem unteren Rand von 10 Pixeln, dann ist es im diesem Beispiel 15 Pixel unter der Überschrift. Man muss also ein wenig experimentieren und das Zusammenwirken mit unterschiedlichen Elementen ausprobieren.
3. Bitte merken: Ein relativ positioniertes Element orientiert sich immer an dem zuletzt relativ positionierten Element. Wenn nichts relativ positioniert wurde, ist der Bezugspunkt der obere Seitenrand.
4. Die relative Positionierung eignet sich mehr für Bereiche in Bereichen.

Zur Erläuterung - "keine" Positionierung

1. Wenn Sie keine Positionierung vornehmen, arbeitet der Browser den Code standardgemaß ab - nämlich ein Element nach dem anderen.
2. Da static die Voreinstellung ist, braucht man sie nicht explizit anzugeben.

Die Alternative zu position - float

Zunächst mag es sehr beeindruckend und spannend sein, mit absoluten und relativen Positionen zu experimentieren. Der Code für das Design der eigenen Seite sollte aber nach Möglichkeit einfach und robust und wenig fehleranfällig sein. Man sollte nach dem Prinzip arbeiten: So viel Code wie nötig, so wenig Code wie möglich.

Mit dem Attribut float bietet sich eine weitere Möglichlichkeit der einfachen relativen Positionierung. Mit float:left; lässt man das aktuelle Element von den nachfolgenden links umfließen. Den Abstand regelt man üner der margin. Dadurch wird der Code einfacher und robuster. Experimentieren Sie bitte.

Allgemeines Inline-Element: <span>

Analog zum <div>-Element, das andere Block-Elemente enthalten kann, gibt es das <span-Element>, das Text und andere Inline-Elemente ( = beginnt innerhalb der Zeile) enthalten kann, selbst aber keinerlei Eigenschaften hat und nichts bewirkt. Es ist vorwiegend dazu gedacht, um mit Hilfe von CSS formatiert zu werden.

<span> leitet einen allgemeinen Inline-Bereich ein. </span> beendet diesen Bereich.

Der Code im folgenden Beispiel definiert die Buchstaben der Überschrift H2 als blau, rot und grün:

Das Ergebnis sieht so aus:

A B C

Natürlich kann man dieses Ergebnis auch ohne des <span>-Elements erreichen, indem man den Buchstaben die entsprechende Schriftfarbe zuweist:

Das Ergebnis sieht so aus:

A B C

Will man aber komplexere und immer wiederkehrende Formate verwenden, wird der HTML-Code schnell unübersichtlich und redundant. Dann ist die Verwendung des <span>-Elements (besonders in Verbindung mit dem "class="-Attribut vorteilhaft.

Gemeinsamkeiten und Unterschiede zwischen <div> und <span>

Beide Elemente dienen dazu, eingeschlossenen Elemente bestimmte Eigenschaften zuzuweisen.

Bei <div> handelt es sich um einen Bereich (div=Division), der mit einer neuen Zeile beginnt.

Bei <span> handelt es sich um eine Bereich innerhalb eines Elements, wobei keine neue Zeile beginnt.

Alle anderen Eigenschaften (meist Formateigenschaften) muss man zuweisen, da <div> und <span> so zu sagen Designerelemente sind.