In vielen naturwissenschaftlichen Modellen findet man drei grundlegende mengentheoretische Konzepte immer wieder:

• Eine Menge ist eine Sammlung verschiedener Elemente, in der es keine Reihenfolge gibt.
• Ein Tupel ist eine geordnete Zusammenstellung von Elementen, wobei jedes Element mehrfach vorkommen kann.
• Eine Relation ist eine Menge von Tupeln.

Wenn man danach sucht, findet man diese Konzepte auch in XHTML wieder, und zwar in

• ungeordneten Listen,
• geordneten Listen und
• Definitionslisten.

Listen sind eine Darstellungsform für Daten in waagerechter oder (bevorzugt) senkrechter Form. Listen werden zur Organisation von Informationen verwendet.

Zum Seitenanfang

Ungeordnete Listen: Die Elementtypen ul und li

Das Element ul zeichnet eine ungeordnete Liste aus, das heißt, deren Listenpunkte li unterliegen keiner bestimmten Ordnung, sind also gleichwertig.

<p>Wenn man danach sucht, findet man diese Konzepte auch in <acronym>XHTML</acronym> wieder, und zwar in</p>
<ul>
  <li>ungeordneten Listen,</li>
  <li>geordneten Listen und</li>
  <li>Definitionslisten.</li>
</ul>

Abb. 5.11: Ungeordnete Liste

Zum Seitenanfang

Geordnete Listen: Die Elementtypen ol und li

Das Element ol zeichnet eine geordnete Liste aus, deren Listenpunkte li einer bestimmten Reihenfolge unterliegen.

Listing 5.9 zeigt die Top 10 der 500 besten Alben aller Zeiten, ermittelt in einer Umfrage unter den Lesern des »Rolling Stone«-Magazins im Jahr 2003. Wie die meisten Listen kann auch diese Top-10-Liste als Tabelle ausgezeichnet werden, wie in Kapitel 5.7 in Listing 5.13 zu sehen ist.

<ol>
  <li>Sgt. Pepper's Lonely Hearts Club Band, The Beatles</li>
  <li>Pet Sounds, The Beach Boys</li>
  <li>Revolver, The Beatles</li>
  <li>Highway 61 Revisited, Bob Dylan</li>
  <li>Rubber Soul, The Beatles</li>
  <li>What's Going On, Marvin Gaye</li>
  <li>Exile on Main Street, The Rolling Stones</li>
  <li>London Calling, The Clash</li>
  <li>Blonde on Blonde, Bob Dylan</li>
  <li>The Beatles (»The White Album«), The Beatles</li>
</ol>

Abb. 5.12: Geordnete Liste

Ein weiteres Beispiel für eine geordnete Liste ist ein Ariadne-Faden. Der griechischen Mythologie zufolge ist der Ariadne-Faden ein Geschenk der Prinzessin Ariadne an Theseus. Mithilfe des Fadens fand Theseus den Weg durch das Labyrinth, in dem sich der Minotaurus befand. Im Webdesign bezeichnet der Ariadne-Faden – auch Brotkrumen-Navigation genannt – eine bestimmte Art der Navigation, die die Hierarchie widerspiegelt und dem Benutzer so eine zusätzliche Orientierungshilfe bietet. Viele Webautoren halten eine ungeordnete Liste für die beste Auszeichnung. Listing 5.10 zeigt einen Ariadne-Faden, dessen Darstellung, wie in Abbildung 5.13 zu sehen, per CSS so angepasst wurde, dass sie kaum noch an eine Liste erinnert.

<ol>
  <li><a href="/">Startseite</a></li>
  <li><a href="/wsdev/">Webentwicklung</a></li>
  <li><a href="/wsdev/einfuehrung/">Einführung in <acronym>XHTML</acronym>, <acronym>CSS</acronym> und Webdesign</a></li>
  <li><a href="/wsdev/einfuehrung/xhtml/"> <acronym>XHTML</acronym></a></li>
  <li title="Hier befinden Sie sich gerade.">Listen</li>
</ol>

Abb. 5.13: Ariadne-Faden

Anfänger haben häufig Schwierigkeiten, Listen korrekt ineinander zu verschachteln. Behalten Sie stets im Auge, dass die Elemente ul und ol ausschließlich Elemente vom Typ li als Kind beinhalten dürfen. Untergeordnete Listen müssen Sie daher korrekt innerhalb der einzelnen Listenpunkte aufführen, wie Listing 5.11 zeigt.

<ul>
  <li>Ebene eins, Listenpunkt eins</li>
  <li>Ebene eins, Listenpunkt zwei
    <ul>
      <li>Ebene zwei, Listenpunkt eins
        <ol>
          <li>Ebene drei, Listenpunkt eins</li>
          <li>Ebene drei, Listenpunkt zwei</li>
          <li>Ebene drei, Listenpunkt drei</li>
        </ol>
      </li>
      <li>Ebene zwei, Listenpunkt zwei</li>
      <li>Ebene zwei, Listenpunkt drei</li>
    </ul>
  </li>
  <li>Ebene eins, Listenpunkt drei</li>
</ul>

Abb. 5.14: Browser visualisieren verschachtelte Listen standardmäßig durch Einrückung und unterschiedliche Listenelementmarkierungen

Zum Seitenanfang

Definitionslisten: Die Elementtypen dl, dt und dd

Das Element dl zeichnet eine Definitionsliste aus. Diese unterscheidet sich von anderen Listenarten nur insoweit, als die Listeneinträge aus zwei Teilen bestehen: einem Definitionsterm und einer Beschreibung. Der Definitionsterm wird durch das dt-Element zugewiesen und ist auf Inline-Elemente beschränkt. Die Beschreibung wird mit dem Element dd angegeben und kann Blockelemente enthalten. Ein Listeneintrag kann mehrere dd-Elemente umfassen.

Der Begriff Definitionsliste sollte Sie nicht davon abhalten, Definitionslisten überall dort einzusetzen, wo Paare aus jeweils einem Begriff oder Sachverhalt und mindestens einer Beschreibung aufgeführt werden. Ein klassisches Beispiel ist ein Glossar oder ein Literaturverzeichnis; die HTML-Empfehlung führt gar einen Dialog als Anwendungsbeispiel auf.

<dl class="literatur">
  <dt id="Balzert-2004">Balzert 2004</dt>
  <dd>H. Balzert; »Webdesign &amp; Web-Ergonomie«, Dortmund, W3L, 2004.</dd>
  
  <dt id="Behme-Mintert-2000">Behme, Mintert 2000</dt>
  <dd>H. Behme, S. Mintert; <acronym>»XML</acronym> in der Praxis &#8211; Professionelles Web-Publishing mit der Extensible Markup Language«, 2. Auflage, München, Addison-Wesley Verlag, 2000.</dd>
  
  <dt id="Berners-Lee-1999">Berners-Lee 1999</dt>
  <dd>T. Berners-Lee; »Der Web-Report &#8211; Der Schöpfer des World Wide Webs über das grenzenlose Potential des Internets«, München, Verlagshaus Goethestraße <acronym>GmbH</acronym> &amp; Co. <acronym>KG</acronym>, 1999.</dd>
  
  <!-- Weitere Einträge -->
</dl>

Abb. 5.15: Die Beschreibungen rücken Browser ein wenig ein, ansonsten sind Definitionslisten standardmäßig eher unübersichtlich – CSS kann da Abhilfe schaffen