Listen

Themen: Wozu Listen?
Die ungeordnete Liste
Die numerierte Liste
Definitionsliste

Wozu Listen? Da das Internet ein Medium ist, in dem Übersichtlichkeit sehr wichtig ist, gibt es ausgefeilte Möglichkeiten der Strukturierung von Inhalten. Die einfachste Möglichkeit dazu bieten Listen, man vergleiche aber auch Tabellen.
Listen enthalten gleichrangige Einträge, welche untereinander dargestellt werden.
Listen können geschachtelt werden, also mehrere Hierarchiestufen enthalten.
Listen sind nicht nur für die Bequemlichkeit der Autoren gedacht, auf sie wird auch bei maschinellen Analysen von Dokumenten zugegriffen und Suchergebnisse werden gern in Listenform dargestellt. Es gibt drei Arten von Listen, die sich in ihrem Aussehen unterscheiden:
Ungeordnete Listen - Kennzeichnung der Einträge mit graphischen Elementen, Tag <ul> ... </ul>, Geordnete Listen mit unterschiedlichen Numerierungen, Tag <ol> ... </ol> und sog.
Definitionslisten mit besonderer Anordnung der Einträge, Tag <dl> ... </dl>.

Die ungeordnete Liste Sie wird eröffnet mit dem <ul>-Tag, das auch entfallen kann. Sie zeichnet sich durch eine optische Kennung für jeden Listenpunkt aus. Dies können Punkt, Kreis oder Quadrat sein. Welches Element verwendet wird, läßt sich mit dem Attribut "type" einstellen. Es sind die Einstellungen disc, circle oder square möglich, ohne die Angabe werden default-Einstellungen verwendet. Jeder Listeneintrag wird mit dem Tag <li> eröffnet, das nicht geschlossen werden muß. Jedem <li>-Tag kann eine eigene type-Einstellung enthalten, was die Listen auffälliger, aber nicht übersichtlicher macht.
Wenn der ungeordneten Liste eine zweite oder dritte, untergeordnete, einverleibt wird, werden vom Browser automatisch Einrückungen vorgenommen.
Ein Beispiel folgt, der Code ist von Hand eingerückt worden, um die Verhältnisse zu verdeutlichen.

erster Eintrag, Ebene 1
- erster Eintrag, Ebene 2
- - erster Eintrag Ebene 3
  - zweiter ...
- zweiter ..
zweiter Eintrag, Ebene 1

<ul>
    <li> erster Eintrag, Ebene 1
    <ul>
        <li>erster Eintrag, Ebene 2
        <ul>
             <li>erster Eintrag Ebene 3
             <li>zweiter ...
        </ul>
        <li>zweiter ..
    </ul>
    <li>zweiter Eintrag, Ebene 1
</ul>

Die numerierte Liste

Die numerierte Liste (ordered list) wird durch das Tag <ol> eingeleitet und unterscheidet sich nur durch die automatische Numerierung von der ungeordneten Liste. Auch sie kann geschachtelt werden. Die Art der Numerierung wird durch das Attribut "type" festgelegt, Default ist die einfache Zählung. Es bedeuten:

type="1" - die arabischen Ziffern, 1,2,3... (dies ist voreingestellt)
type="A" - Grossbuchstaben
type="a" - Kleinbuchstaben
type="I" - römische Ziffern, groß geschrieben
type="i" - römische Ziffern, klein geschrieben

In die Zählung kann auf zwei Arten eingegriffen werden.

Wenn die Zählung nicht mit dem natürlichen Startwert z. B. '1' oder 'A' beginnen soll, kann sie mit "start=n" auf einen Anfangswert gesetzt werden. Für n ist unabhängig von der Art der Numerierung die Angabe des Zählungswertes erforderlich.
Einzelne Listenpunkte können auf eine spezielle Nummer gesetzt werden mit "value=m". Für n ist auch hier die Angabe des Zählungswertes erforderlich.

Menschen
1. weibliche
2. männliche
Tiere
Pflanzen
1. Eichen
2. Buchen
3. Möhren

<ol>
     <li>Menschen
     <ol type="a">
          <li>weibliche
          <li>männliche
     </ol>
     <li>Tiere
     <li>Pflanzen
     <ol type="a" start=12>
          <li>Eichen
          <li>Buchen
          <li value=22>Möhren
     </ol>
</ol>

Definitionsliste

Eine dritte Form von Liste heißt Definitionsliste. Sie wird verwendet, um erklärende Texte zu strukturieren.

Geöffnet und geschlossen wird sie mit dem Tag <dl> ...</dl>.
Der zu erläuternde Begriff oder Text wird mit dem Tag <dt>..</dt> geklammert und später (so der Browser will) hervorgehoben dargestellt.
Die Erläuterung, die später eingerückt erscheint, wird mit <dd> .. </dd> zugeordnet.

Begriff 1: Erklärung 1
Begriff 2: Erklärung 2

<dl>
    <dt>Begriff 1</dt>
        <dd>Erklärung 1</dd>
    <dt>Begriff 2</dt>
        <dd>Erklärung 1</dd>
</dl>