HTML Grundlagen: Listen und Aufzählungen definieren. Was ist der Unterschied zwischen dem HTML UL und OL-Tag?

ungeordnete und geordnete Listen mit UL und OL erstellen

HTML unterscheidet drei verschiedene Arten von Listen.

1. ungeordnete Listen bzw. Aufzählungsliste

   • Eine ungeordnete Liste wird mit dem HTML UL-Tag (für Englisch: unordered List) definiert.
     
   • Die ungeordnete Liste wird mit <ul> eingeleitet und muss mit </ul> abgeschlossen werden.
     
   • Die Listen-Elemente werden mit dem HTML LI-Tag (für Englisch: List Item) definiert. Jedes Element der Liste wird mit <li> eingeleitet und sollte immer mit </li> abgeschlossen werden.
     
   • Standardmäßig werden die Elemente der Liste mit einem vorangestellten Aufzählungszeichen „⏺“ (Englisch: Bullet Point) dargestellt.
     
   
   

2. geordnete Listen bzw. nummerierte Listen

   • Eine geordnete Liste wird mit dem HTML OL-Tag (für Englisch: ordered List) definiert.
     
   • Die geordnete Liste wird mit <ol> eingeleitet und muss mit </ol> abgeschlossen werden.
     
   • Die einzelnen Listenelemente der geordneten Liste beginnen (wie bei der ungeordneten Liste) mit dem <li>-Tag und müssen mit </li> abgeschlossen.
     
   • Bei der geordneten Liste werden die einzelnen Elemente der Liste automatisch nummeriert.
     
   
   

3. Beschreibungslisten bzw. Definitionslisten

   • Eine Beschreibungsliste (früher Definitionsliste) wird mit dem DL-Tag (für Englisch: Description List) definiert.
     
   • Da diese Art Liste nur selten benutzt wird, wird dieser Listentyp hier nicht weiter berücksichtigt.
     
   
   

Die Bezeichnungen ungeordnete Liste und geordnete Liste sind etwas irreführend, da bei diesen beiden Listentypen die Elemente der Liste stets sortiert angegeben werden. Die Listeneinträge der geordneten Liste werden nicht automatisch sortiert, sondern nummeriert.

Mit ungeordnete Liste ist nicht gemeint, dass die Einträge der Liste durcheinander sind. Gemeint ist bloß, dass die Listen-Elemente nicht nummeriert werden.

Eine einfache ungeordnete Liste mit <ul> und <li> erstellen

Die einzelnen Elemente der UL-Liste stehen standardmäßig untereinander, weil das LI-Element ein Block-Element ist. Mit CSS kann man die vertikale Liste aber in eine horizontale Liste umwandeln.

Eine einfache geordnete Liste mit <ol> und <li>

Die geordnete Liste (OL-Liste) wird genauso wie die ungeordnete erstellt. Man muss dazu nur <ul> und </ul> durch <ol> und </ol> ersetzen. Die geordnete Liste erzeugt zusammen mit LI für jedes Element der Liste eine nummerierte Aufzählung.

Verschachtelte Listen

Listen kann man verschachteln. Das bedeutet, dass man innerhalb einer Liste eine weitere Liste einfügen kann.

Zwischen <li> und </li> einer übergeordneten Liste kann man eine weitere Liste einfügen. Die Listen dürfen unterschiedliche Listentypen haben.

Eine ungeordnete Liste kann z.B, als Unterliste bzw. Sub-Liste in eine geordnete Liste eingefügt werden.