HTML - Elemente - Listen

1. Einführung

Listen dienen dazu, Aufzählungen übersichtlich darzustellen. Dabei kann es sich um Text handeln, Text mit Bildern oder hierarchisch strukturierten Links. Dabei werden, je nach Inhalt, drei Arten unterschieden.

2. Ungeordnete Listen

Ungeordnete Listen zeichnen sich durch Aufzählungssymbole aus. Welche dabei wo zum Einsatz kommen, hängt von der Verschachtelungstiefe ab. Oder sie werden per CSS vorgegeben. Die Syntax dazu sieht folgendermaßen aus:

<ul>
  <li>ein Punkt</li>
  <li>noch ein Punkt</li>
  <li>und noch einer</li>
</ul>

Man kann das aber auch weiter verschachteln, indem man den einzelnen Punkten zusätzliche Listen zuordnet.

<ul>
  <li>
    Punkt 1
    <ul>
      <li>Punkt 1.1</li>
      <li>Punkt 1.2</li>
      <li>Punkt 1.3</li>
    </ul>
  </li>
  <li>Punkt 2</li>
  <li>
    Punkt 3
    <ul>
      <li>Punkt 3.1</li>
      <li>Punkt 3.2</li>
    </ul>
  </li>
</ul>

<ul> leitet immer den Beginn einer ungeordneten (unordered list) Liste ein. Jeder Punkt wird in einem <li>....</li> eingeschlossen. Abgeschlossen wird alles mit </ul>. Listen gehören zu den Block-Elementen, und zwar die Liste als Ganzes als auch die einzelnen Aufzählungspunkte.

3. Numerische oder geordnete Listen

Numerische Listen haben keine Aufzählungssymbole, sondern nummerieren einfach alles durch. Die Syntax unterscheidet sich von der ungeordneten Liste nur durch das Haupt-Tag. Anstelle des <ul> wird ein <ol> (ordered list) genommen.

<ol>
  <li>Kräh</li>
  <li>
    Bla
    <ol>
      <li>Blubb</li>
      <li>Blubber</li>
    </ol>
  </li>
  <li>Schwall</li>
</ol>

Leider ist es nicht möglich, bei Verschachtelungen dieses Listentyps eine durchnummerierte Aufzählung wie zum Beispiel 2. Bla, 2.1 Blubb, 2.2 Blubber zu erzwingen. Es geht zwar mit CSS, ist aber recht kompliziert. Wen es trotzdem interessiert, der findet hier eine Lösung.

Attribute

Hier sind nur zwei wirklich interessant. start legt den Startwert fest und value baut "Sprünge" ein.

<ol start="10">
  <li>A</li>
  <li>B</li>
  <li value="30">C</li>
  <li>D</li>
</ol>

Die Numerierung in diesem Beispiel ergibt dann 10, 11, 30 und 31.

4. Definitionslisten

Könnte man auch als Glossarlisten bezeichnen. Sie bestehen aus einen zu definierenden Ausdruck und mehreren Einträgen.

<dl>
  <dt>Administrator</dt>
  <dd>Apostolischer Administrator</dd>
  <dd>Betreut Computersysteme und -netze</dd>
  <dt>Basic</dt>
  <dd>Programmiersprache aus der Steinzeit</dd>
  <dd>Basiswissen(im Plural)</dd>
</dl>

<dl> (definition list) leitet die Liste ein, <dt> (definition term) den zu definierenden Ausdruck und <dd> (definition definition) den Eintrag.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt