HTML-Listen erstellen mit ul, ol und li

Worum geht´s?

Ein weiterer Grundbaustein fast aller Webseite sind Listen. Auch wenn es dir womöglich noch nie aufgefallen ist, sind verschachtelte Listen (also Listen in Listen) die Basis fast aller Navigations-Menüs von Webseiten. Auch Dropdown-Menüs basieren – was den HTML-Code betrifft – fast immer auf verschachtelten Listen. Wie also kann man HTML-Listen erstellen?

Grundsätzlich gibt es einmal zwei Arten von Listen in HTML:

• Ungeordnete Listen (wie diese hier, mit immer gleichen Aufzählungspunkten)
• Geordnete Listen (mit 1., 2., 3. usw.)

1. Einfache ungeordnete HTML-Listen erstellen mit ul und li

Eine ungeordnete Liste besteht aus <ul>-Tags und <li>-Tags, wobei beide soziale Tags sind, also öffnende und schließende Tags haben.

<ul>-Tags sagen dem Browser, das ab hier bzw. bis hier eine ungeordnete Liste vorkommt.

Die <li>-Tags sind innerhalb des <ul>-Tags zu finden, und stehen jeweils für einen einzelnen Aufzählungspunkt.

Hier mal der HTML-Code für eine einfache, ungeordnete Liste mit drei Aufzählungspunkten:

<ul>
    <li>Erster Punkt</li>
    <li>Zweiter Punkt</li>
    <li>Dritter Punkt</li>
</ul>

Im Browser schaut das Ganze dann in etwa so aus:

• Erster Punkt
• Zweiter Punkt
• Dritter Punkt

Wenn du nun z.B. noch einen vierten Aufzählungspunkt haben willst, fügst du einfach noch ein <li>-Tag zusätzlich innerhalb der <ul>-Tags hinzu.

Gar nicht so schwer, oder?

2. Einfache geordnete HTML-Listen erstellen mit ol und li

Um aus unserer ungeordneten Liste von vorher eine geordnete Liste (das heißt mit 1., 2., 3. usw.) zu machen, sind nur ganz wenige Veränderungen notwendig.

Wir müssen nur das „u“ von unserem <ul>-Tag in ein „o“ umwandeln, so dass es zu einem <ol>-Tag wird:

<ol> 
   <li>Erster Punkt</li>
   <li>Zweiter Punkt</li>
   <li>Dritter Punkt</li>
</ol>

Hier das Ergebnis im Browser:

1. Erster Punkt
2. Zweiter Punkt
3. Dritter Punkt

Alles andere funktioniert genau gleich wie bei den ungeordneten Listen.

Was aber, wenn wir eine Liste in einer Liste haben wollen? Also gewissermaßen eine Unter-Liste unserer Liste?

Das bringt uns zum nächsten Punkt: Verschachtelte HTML listen erstellen.

3. Verschachtelte HTML-Listen erstellen

Eine verschachtelte HTML-Liste ist nichts anderes wie eine Liste in einer Liste. Also ein <ul>-Tag mit einem <li>-Tag in dem dann wieder ein <ul>-Tag und ein <li>-Tag versteckt sind.

Klingt kompliziert?

Schau dir erstmal das Beispiel an, dann wird dir vermutlich vieles klarer:

<ul> 
   <li>Erster Punkt</li>
   <li>Zweiter Punkt
       <ul> 
           <li>Erster Unterpunkt</li>
           <li>Zweiter Unterpunkt</li>
       </ul>
   </li>
   <li>Dritter Punkt</li>
</ul>

Im Browser sieht das Ganze dann in etwa so aus:

• Erster Punkt
• Zweiter Punkt
  • Erster Unterpunkt
  • Zweiter Unterpunkt
• Dritter Punkt

Könnte man jetzt in der Unter-Liste wieder eine Unter-Liste einfügen?

Ja, das geht tatsächlich. Viele Dropdown-Menüs auf Webseiten funktionieren genau nach diesem Prinzip. Sie verstecken bestimmte Unterlisten, bis der Benutzer mit der Maus über ein Listen-Element fährt, und zeigen sie dann an.

Wie das genau funktioniert, kommt dann in den Tutorials zu CSS vor.

Aber vorerst noch zu einer für viele womöglich drängenden Frage: Wie bekomme ich eigentlich die Punkte da weg?

4. Aus der HTML-Liste die Punkte entfernen

Im Grunde hat das Folgende sehr viel mit CSS zu tun, weswegen wir hier nicht sehr stark ins Detail einsteigen werden.

Aber erfahrungsgemäß wird diese Frage oft gestellt. Deshalb hier eine kurze Antwort, wie das gehen kann:

<ul style="list-style: none;"> 
   <li>Erster Punkt</li>
   <li>Zweiter Punkt
       <ul style="list-style: none;"> 
           <li>Erster Unterpunkt</li>
           <li>Zweiter Unterpunkt</li>
       </ul>
   </li>
   <li>Dritter Punkt</li>
</ul>

Im Browser sieht das dann so aus:

• Erster Punkt
• Zweiter Punkt
  • Erster Unterpunkt
  • Zweiter Unterpunkt
• Dritter Punkt

Was es mit diesem style-Attribut auf sich hat und wie alles zusammenhängt, kommt dann in den Tutorials zu CSS noch ausführlicher vor.

Erst mal viel Freude noch mit deinen HTML-Listen!

Diskussion zum Tutorial