Wenn du auf deiner Seite eine Aufzählung in Listenform anlegen möchtest, zum Beispiel so etwas hier:

ich mag…
• Tiere
• Pizza
• Computer

dann musst du dafür nicht jede einzelne Zeile einrücken, mit einem Symbol versehen und am Ende umbrechen – viel einfacher geht dies über Listen.

Listen-Typen

HTML bietet hier zwei verschiedene Arten von Listen: sortierte, also durchnummertierte, und unsortierte Listen.

Während bei einer nummerierten Liste alle Punkte automatisch durchnummeriert werden, sind die einzelnen Punkte unsortierter Listen etwa mit einem Punkt oder einem Strich als Listensysmbol versehen, wie auch im Beispiel hier oben.

Aufbau

Listen sind folgendermaßen aufgebaut:
außen herum kommt die Definition, dass es sich um eine Liste handelt – <ul> (unordered list) für unsortierte Listen bzw. <ol> (ordered list) für nummerierte Listen, darin folgen die einzelnen Punkte in <li>-Tags (list item).

Der Code des obenstehenden Beispiels sieht so aus:

<ul>ich mag...
<li>Tiere</li>
<li>Pizza</li>
<li>Computer</li>
</ul>

Formatierung

Via CSS lassen sich Listen natürlich beliebig formatieren – hier gehe ich jetzt nur einmal darauf ein, wie du die Symbole ändern kannst:

ul {
list-style-type:disc;
}Für unsortierte Listen gibt es drei verschiedene Symbole: disc erzeugt einen gefüllten Kreis, circle einen unausgefüllten Kreis, square ein Rechteck (es gibt zwar noch mehr, aber diese können nicht von jedem Browser interpretiert werden).

Nummerierte Listen lassen sich so sortieren: I ordnet die Listenpunkte nach I, II, III usw., i entsprechend nach i, ii, iii, iv usw. Möchte man die Punkte durch Buchstaben ordnen, so gibt man als Typ entweder A oder a an.

Zudem ist es möglich, dass du ein eigenes Symbol verwendest – dies muss als Grafik im *.gif, *.jpg oder *.png-Format vorliegen.

list-style-image:url(image.gif);

semantisches Web

Nicht zuletzt stellen Listen einen wichtigen Schritt auf dem Weg zum sogenannten semantischen Web dar: sie ordnen Informationen in einer zusammenhängenden Form an.