Struktur mit DIV und SPAN

DIV und SPAN

In den frühen Jahren des www gab es wenige Möglichkeiten große Seiten gut zu strukturieren. Ein Ansatz war es das Browserfenster in verschiedene Abschnitte (Frames) zu unterteilen. Jeder dieser Frames hat eine einzelne Seite repräsentiert. Diese Art der erstellung hatte den Vorteil das z.b. eine Navigation auf der linken Seite nur als einzelne HTML Datei existieren musste.

Durch den  Einsatz von Skriptsprachen und Programmiersprachen war es jedoch möglich auch so Abschnitte einer Seite zu generieren und in den Quelltext einzufügen. Da es esthetisch besser aussah und auch z.b. für Suchmaschinen besser war wurde versucht alles auf einzelnen Seiten statt mit Frames zu generieren. Als mittel zur Strukturierung wurden dafür HTML Tabellen verwendet. Wenn man HTML Tabellen ohne Rahmen verwendet, eignene sich diese optimal zum Strukturieren und Layouten.

Doch diese Vorgehensweise hat einen großen Nachteil:

Die Tabellen werden in einem semantisch falschen Kontext benutzt. Tabellen sind eigentlich dafür da, Daten strukturiert in Zeilen und Spalten auszugeben.

Zur Strukturierung verwendet man deshalb heute div und span Tags. Diese div und span Tags kann man über Cascading Style Sheets (CSS) formatieren.

Ein DIV ist ein Blockelement (display:block), das bedeutet das nach jedem DIV ein Zeilenumbruch erzeugt wird. Es gruppiert größere Abschnitte. Der SPAN dagegen ist ein inline Element, dieses ist für kleinere abschnitte gedacht. Inline Elemente (z.b. SPANs) dürfen keine Blockelement (DIVs) enthalten.

Es wird vom W3C geraten über die Klassennamen einen semantischen Bezug herzustellen.

Beispiel:

<div id="main-menu">
   <ul>
      <li class="menu-item"></li>
   </ul>
</div> 


Die HTML-Tag Attribute id und class

Wie oben bereits erwähnt erfolgt eine Formatierung der div und span Element über CSS. dazu gibt es verschiedenen Möglichkeiten.

  1. Man kann über das Attribut style direkt CSS Style angeben
  2. Man kann über id eine eindeutige id für dieses Element vergeben. Diese id darf also nicht nochmal im Dokument vorkommen. Diese IDs kann man in einem externen CSS File oder in Inline CSS formatieren
  3. Man kann Element in Klassen gruppieren. Ein Element kann mehreren Klassen angehören und eine Klasse kann auch für mehrere Element verwendet werden. Zuordnung erfolgt über das Attribut class.


Neben visuellen Effekten können Bilder den Inhalt einer Webseite visuell auflockern. Auf der nächsten Seite lernen Sie, wie sie Bilder in Ihre Webseite einbauen können.

Navigation