HTML Grundlagen: Was ist der Unterschied zwischen <ul> und <ol>?

ungeordnete und geordnete Listen mit UL und OL erstellen

HTML unterscheidet drei verschiedene Listen Typen.

1. ungeordnete Listen bzw. Aufzählungsliste
   
   • Eine ungeordnete Liste wird mit dem <ul> Tag (ul für Englisch »unordered list«). definiert.
     
   • Das abschließende Tag </ul> ist notwendig.
     
   • Die einzelnen Listen-Elemente beginnen mit dem <li> Tag und werden mit </li> abgeschlossen.
     
   • Standardmäßig werden die Listen-Elemente mit vorangestellten Aufzählungszeichen ⏺ (Englisch: »bullet point«) dargestellt.
     
   
   
2. geordnete Listen bzw. nummerierte Listen
   
   • Eine geordnete Liste wird mit dem <ol> Tag (ol für Englisch »ordered list«). definiert.
     
   • Das abschließende Tag </ol> ist notwendig.
     
   • Die einzelnen Listen-Elemente beginnen mit dem <li> Tag und werden mit </li> abgeschlossen.
     
   • Die Listen-Elemente werden bei dieser Liste nummeriert.
     
   
   
3. Beschreibungslisten bzw. Definitionslisten
   
   • Eine Beschreibungsliste wird mit dem dl Tag (dl für Englisch »description list«) definiert.
     
   • Da diese Art Liste 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 Listen-Typen die Listen-Elemente sortiert angegeben werden. Die Listen-Elemente der geordneten Liste werden nicht automatisch sortiert.

Mit ungeordnete Liste ist nicht gemeint, dass die Listen-Elemente »durcheinander« sind. Gemeint ist bloß, dass die Listen-Elemente nicht nummeriert sind.

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

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

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

Die Definition einer geordneten Liste mit ol erzeugt zusammen mit li für jedes Listen-Element automatisch eine nummerierte Aufzählung der Listen-Elemente.

Verschachtelte Listen

Listen können verschachtelt werden. Das bedeutet, dass innerhalb einer Liste eine weitere Liste eingefügt wird. Zwischen <li> und </li> einer übergeordneten Liste kann eine weitere Liste definiert werden. Die übergeordnete und untergeordnete Liste dürfen einen unterschiedlichen Listentyp haben. Eine ungeordnete Liste kann zum Beispiel als Unterliste bzw. Sub-Liste in eine geordnete Liste eingefügt werden.