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>
div
und span
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.