XML-Know How

Die »freien« Elemente <div> und <span>

Hierarchischer Aufbau von Websites

Zunächst aber wollen wir noch zwei besondere – und besonders wichtige – Elemente von HTML kennenlernen, ohne die der Aufbau komplexer Webseiten nicht möglich wäre. Es fehlen uns bislang nämlich nicht nur semantische Elemente, es fehlt auch noch die Möglichkeit, die Webseiten hierarchisch zu strukturieren. In unserem Beispiel wäre es hilfreich, die Kapitelstruktur des Werkes (aufgeteilt in Akte und Szenen) abbilden zu können. Auch bei dem Kochbuch-Beispiel wäre es wichtig, ein Rezept als solches kennzeichnen zu können. Es fehlt also noch ein Element, das andere Elemente umschließen und damit zu frei definierbaren, semantischen Einheiten zusammenfassen kann. Dieses Element gibt es in HTML – es heißt <div>. Das <div> (für »division«, »Bereich«)-Element ist rekursiv schachtelbar. Das heißt, es kann beliebig oft in sich selbst verschachtelt werden. Über das Attribut class (oder id) lässt es sich wiederum in ein quasi-semantisches Element verwandeln.

In unserem Beispiel könnte das zu folgendem Seitenaufbau führen:

Beispiel:

<!DOCTYPE html SYSTEM "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

</head>

<body>

<div class="akt">

<div class="szene">

<h1>Prolog im Himmel.</h1>

<p class="regie">Der Herr. Die himmlischen Heerscharen. Nachher Mephistopheles.<br/>

Die drei Erzengel treten vor.</p>

<p class="sprecher">DER HERR:</p>

<p class="sprechertext">Kennst du den Faust?</p>

<p class="sprecher">MEPHISTOPHELES:</p>

<p class="sprechertext">Den Doktor?</p>

<p class="sprecher">DER HERR:</p>

</div>

</div>

</body>

</html>

Block-Elemente vs.
Inline-Elemente

Elemente, die andere umschließen und auch solche, die »Absatzcharakter« haben, bezeichnen wir als Block-Elemente. Elemente, die nur einzelne Zeichen umschließen und zu keiner Zeilenschaltung führen sollen, werden als Inline-Elemente bezeichnet.

Für die Block-Elemente haben wir mit <div> bereits ein »freies« Element kennengelernt, um beliebige Strukturen zu umschließen. Etwas entsprechendes fehlt bisher auch noch auf der Ebene der Inline-Elemente, nämlich die Möglichkeit, freie »Zeichenformatvorlagen« anzulegen. Bislang haben wir für die Formatierung einzelner Zeichen oder Zeichenfolgen nur HTML-Elemente kennengelernt, denen unmittelbar auch eine feste Formatierung zugewiesen war, wie etwa <i>…</i> für kursiv oder <b>…</b> für fett. Was aber, wenn ein Textteil rot dargestellt werden soll? Oder wenn er gar keine unmittelbare Formatierung erfahren soll, sondern abermals eine semantische Kennzeichnung wie z. B. »wichtig« oder »Preis«?

So wie es mit <div> ein frei verfügbares Element auf Absatz-Ebene gibt, gibt es auch ein entsprechendes Inline-Element. Es heißt <span> (»Umspannung«) und kann innerhalb eines Absatzes (präziser: innerhalb eines Block-Elements, also ebenso innerhalb von Überschriften, Listeneinträgen etc.) um beliebige Zeichen angefügt werden. Das <span>-Element wird abermals mit dem Klassen-Attribut versehen und somit zu einem pseudo-semantischen Element: <span class="wichtig">…</span>.

<!DOCTYPE html SYSTEM "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

</head>

<body>

<p class="sprecher">GEIST:</p>

<p class="sprechertext">Wer ruft mir?</p>

<p class="sprecher">FAUST <span class="regie">(abgewendet):</span></p>

<p class="sprechertext">Schreckliches Gesicht!</p>

</body>

</html>

In diesem Beispiel ist es erforderlich, die Regieanweisung »(abgewendet)«, die in derselben Zeile stehen soll wie das Wort »FAUST«, als Inline-Element mit <span class="regie"> auszuzeichnen und nicht als <p class="regie">, da <p> als Absatzformat stets einen Zeilenwechsel mitbringt.

Nachdem wir nun alle Elemente kennen, die wir für den Aufbau auch komplexer Webseiten benötigen, können wir uns der Formatierung von HTML-Seiten (und damit auch von E-Books) zuwenden.

Abb. 34 <div>-Elemente führen zu einer Verschachtelung von Inhalten. Sie können z. B. als Rahmen dargestellt werden