Websiteentwicklung: XHTML: allgemeine Bereiche
Die Elemente div (englisch: division, deutsch: Bereich, Unterteilung) und span (deutsch: Bereich) markieren allgemeine Bereiche, für die sich kein passendes XHTML-Element mit entsprechender Semantik (Bedeutung) findet. Diese beiden Elemente sagen nichts über ihren Inhalt aus und können daher zum Beispiel zur graphischen Gestaltung (im Zusammenspiel mit CSS) genutzt werden. Des weiteren wird div auch oft zur Unterteilung des Dokumentes in verschiedene Bereiche genutzt. Wenn möglich, sollten Sie auf div und span verzichten und passendere, semantisch aussagekräftigere Elemente benutzen. Für Überschriften also zum Beispiel h2, für Textabsätze p und für hervorgehobenen (betonten) Text strong. Da XHTML für zahlreiche Anwendungen keine semantisch passenden Element hat, kommen diese Elemente auch in Betracht, wenn die semantische Bedeutung mittels RDFa vermittelt wird.
Der Unterschied zwischen beiden Elementen besteht darin, dass div ein Blockelement ist und in der graphischen Darstellung einen eigenen Block oder Zeilenanfang erzeugt, während span ein inzeiliges Element ist, das den Textfluss aufrecht erhält.
Sofern nicht etwa mit CSS besonders dekoriert, unterscheidet sich die Darstellung des Inhaltes von span also nicht von der des umgebenden Textes. Mit einem Attribut title können so aber zu einem bestimmten Textfragment noch optionale Zusatzinformationen angeboten werden. Auch hier würde sich empfehlen, das Element span per CSS besonders zu dekorieren, um auf die optionale Zusatzinformation aufmerksam zu machen.
Sofern nicht etwa mit CSS besonders dekoriert, ist das div nur kenntlich am neuen Zeilenanfang und liefert nicht wie p einen eigenen Absatz.
Das Blockelement div
BearbeitenDas div-Element ist ein Blockelement. Es dient der Gruppierung mehrerer Elemente. Beispielsweise werden meist Menü, Inhalt und Fußzeile eines Dokumentes gruppiert und mit einem id-Attribut adressiert, um via CSS das Layout der Seite aufzubauen und die Inhalte gemäß der verschiedenen Funktionen voneinander zu trennen.
Beispiel: Mit CSS kann zum Beispiel eine Hintergrundfarbe für einen gesamten Bereich mit mehreren Absätzen definiert werden. Lassen Sie sich von dem für CSS-Angaben vorgesehenen Wert des Attributes style nicht beeindrucken. Dies wird im Buch CSS näher erläutert. Die Eigenschaft background-color gibt hierbei an, dass eine Hintergrundfarbe definiert werden soll; '#fc9' ist der Wert der Farbe als hexadezimale Zahl. Im praktischen Einsatz sollte das veraltete Attribut style ohnehin vermieden werden und CSS besser im Element style oder noch besser in einer externen CSS-Datei notiert werden. Es wird hier nur verwendet, um mit den begrenzten Möglichkeiten von Wiki-Büchern das Beispiel kurz zu halten und visualisieren zu können:
<div style="background-color: #fc9" title="Tip">
<h2>Urlaubsbewässerung</h2>
<p>Stellen Sie einen Ziegelstein in ihre Badewanne und darauf den Blumentopf.
Füllen Sie die Badewanne fast bis zur Höhe des Ziegelsteines mit Wasser.
In der Woche, in der Sie im Urlaub sein werden,
wird der Ziegelstein das Wasser in den Pflanzentopf
hochsteigen lassen.
</p>
</div>
Stellen Sie einen Ziegelstein in ihre Badewanne und darauf den Blumentopf. Füllen Sie die Badewanne fast bis zur Höhe des Ziegelsteines mit Wasser. In der Woche, in der Sie im Urlaub sein werden, wird der Ziegelstein das Wasser in den Pflanzentopf hochsteigen lassen.
Das inzeilige Element span
Bearbeitenspan ist ein inzeiliges Element und erhält den es umgebenden Textfluss aufrecht. Sie können es verwenden, wenn Sie einen Teil eines Absatzes auszeichnen möchten und kein Zeilenumbruch entstehen soll.
<p>Ihre Suche nach
<span style="background-color: #fc9"
title="Neologismus für einen Fassadenbeschmierer">Kritzelflitzer</span>
war erfolgreich.</p>
Ihre Suche nach Kritzelflitzer war erfolgreich.
Ausblick
BearbeitenDie Version HTML5 schlägt ein paar weitere Elemente zur Strukturierung eines Dokumentes vor, weshalb die Nutzung der beiden vorhergehend beschriebenen Elemente weiter zurückgehen mag. Leider wurde allerdings bei HTML5 die Chance vertan, für typische Strukturen von Literatur auch semantisch gut passende Elemente bereitzustellen.
Was nicht berücksichtigt wurde, ist also auch bei HTML5 weiterhin anderweitig auszuzeichnen. Damit relativiert sich die Nützlichkeit von HTML5 für typische Anwendungen wir Projekte im Netz, digitale Bücher, sowohl Belletristik als auch Poesie. Es ist folglich auch weiterhin notwendig, Erweiterungen zu verwenden, um Texte fachgerecht und semantisch gekonnt auszuzeichnen.
Im ersten Beispiel wäre nach HTML5 das Element section oder aside statt des div angebracht, je nachdem, um was es im sonstigen Inhalt des Dokumentes geht. Und im zweiten Beispiel könnte das Element mark zur Hervorhebung von Suchtreffern genutzt werden.
