Gruppierung: Die Elementtypen div und span

Die Elemente div und span ermöglichen es, ein Dokument zusätzlich zu strukturieren. Mit dem Blockelement div können Webautoren Elemente zusammenfassen, mit dem Inline-Element span können sie (textuelle) Elementinhalte besonders kennzeichnen.

Beide Elemente enthalten keinerlei Semantik, das heißt, sie sind lediglich Container ohne inhaltliche Bedeutung und beeinflussen auch nicht die Darstellung eines Elements. Sie sollten daher nur dann verwendet werden, wenn kein anderes, geeigneteres Element existiert.

Zusammen mit den Attributen id und class (siehe Kapitel 4.6.1) sind beide Elemente gut dafür geeignet,

• eine Art semantischer Feinstrukturierung vorzunehmen, wenngleich diese im Allgemeinen nicht oder zumindest nicht standardisiert maschinenlesbar ist, und
• entsprechend ausgezeichnete Bereiche speziell zu formatieren, vorzugsweise per CSS über ID- beziehungsweise Klassenselektoren.

Listing 5.31 zeigt ein XHTML-Dokument, das auf Datenbankinformationen beruht und eine DVD-Sammlung präsentiert. Da es in XHTML keine Elemente für DVD-Titel, Erscheinungsjahr oder Darsteller gibt, könnte eine Lösung wie folgt aussehen:

<div class="dvd" id="citizen-kane">
  <h2>Citizen Kane</h2>
  <table>
    <tr>
      <th>Originaltitel:</th>
      <td>Citizen Kane</td>
    </tr>
    <tr>
      <th>Produktionsjahr:</th>
      <td>1941</td>
    </tr>
    <tr>
      <th>Darsteller:</th>
      <td><span class="hauptdarsteller">Orson Welles</span>, Joseph Cotten, Agnes Moorehead</td>
    </tr>
  </table>
</div>

<div class="dvd" id="sieben">
  <h2>Sieben</h2>
  <table>
    <tr>
      <th>Originaltitel:</th>
      <td>Seven</td>
    </tr>
    <tr>
      <th>Produktionsjahr:</th>
      <td>1998</td>
    </tr>
    <tr>
      <th>Darsteller:</th>
      <td><span class="hauptdarsteller">Brad Pitt, Morgan Freeman</span>, Gwyneth Paltrow, Kevin Spacey</td>
    </tr>
  </table>
</div>

Gerade div-Elemente sind hervorragend dazu geeignet, ein Dokument »vorzustrukturieren« und so einen Rahmen für die eigentliche Auszeichnung der Inhalte aufzubauen. Wichtig ist hierbei, keine reine div- und span-Wüste zu erzeugen – die Gefahr besteht durchaus. Eine Handvoll dieser Elemente an »strategisch« günstigen Stellen kann die innere Struktur eines Dokuments erheblich verbessern und bietet zusätzliche Steuerungsmöglichkeiten für die Gestaltung und die logische Trennung von Abschnitten. Ein div-Element sollte jedoch niemals dort eingesetzt werden, wo ein p oder ein h3 sinnvoll wäre, ein span niemals dort, wo Sie das Element label verwenden sollten. Für div-Elemente gilt im Grunde dasselbe, was die Webentwicklerin Steffi Abel vor einiger Zeit in der Newsgroup de.comm.infosystems.www.authoring.misc über verschachtelte Tabellen geschrieben hat:

»›Der Mann, der die Brücke, die über den Fluss, der im Winter Hochwasser, das ganz schlammig ist, führt, führt, baute, lebt nicht mehr.‹ ist eine valide (grammatisch, orthografisch und syntaktisch korrekt) formulierte Aussage. Dennoch ist es unsinnig, solche Sätze zu formulieren.«

Das Projekt CSS Zen Garden von Dave Shea hat diese Vorgehensweise zum Äußersten getrieben und zeigt zugleich, wie man es macht und wie man es nicht macht. Dave Shea und Molly Holzschlag beschreiben in ihrem Buch »Zen und die Kunst des CSS-Designs« [Shea, Holschlag 2005], was das Projekt seit seinem Start Ende 2002 vermittelt:

»Gäbe es nur eine zentrale Sammlung großartiger CSS-Designarbeiten! Das Vorhandene lediglich zu sammeln würde nicht funktionieren, denn es gab nicht viel. Der Schlüssel zur Förderung dieser Idee bestand darin, Designer zu neuen, hervorragenden CSS-Arbeiten zu ermutigen.«

Und an anderer Stelle:

»Der Hauptzweck des Zen-Gartens besteht darin, die Möglichkeiten standardbasierten Designs zu veranschaulichen, und die verschiedenen Designs zeigen eindrucksvoll, welche Flexibilität CSS bietet.«

Die größtmögliche Flexibilität wurde leider durch eine Vielzahl an div- und span-Elementen erkauft, die es ermöglichen, viele zusätzliche Ansatzpunkte für die Gestaltung der Seite bereitzustellen, die ohne diese Forderung allerdings nicht notwendig wären. Keine Webseite sollte vollkommen inhaltsleere Auszeichnungselemente wie

<div id="extraDiv1"><span></span></div>
<div id="extraDiv2"><span></span></div>
<div id="extraDiv3"><span></span></div>
<div id="extraDiv4"><span></span></div>
<div id="extraDiv5"><span></span></div>
<div id="extraDiv6"><span></span></div>

oder nichtssagende Klassennamen wie p1, p2, p3 im Überfluss enthalten.