HTML5: Ungeordnete Listen („unordered lists“)

Eine unsortierte Liste ist eine Methode, Dinge übersichtlich anzuordnen. Stell dir vor, du möchtest jemandem eine Liste von Aufgaben, Einkäufen oder Ideen zeigen. Du könntest einfach alles untereinander aufschreiben, ohne eine bestimmte Reihenfolge. Genau so funktionieren unsortierte Listen in der Welt der Programmierung.

Zum Anzeigen von Listen nutzen wir in der Programmierung oft etwas, das als „unsortierte Liste“ bezeichnet wird. Man nennt sie auch „unordered list„, weil die Reihenfolge der Elemente dabei keine Rolle spielt. Es ist einfach eine Liste von Dingen, die alle gleich wichtig sind.

Was ist eine unsortierte Liste?

Eine unsortierte Liste zeigt Elemente (Inhalte), die nicht in einer bestimmten Reihenfolge stehen. Im Unterschied dazu gibt es sortierte Listen, bei denen die Reihenfolge zählt – zum Beispiel, wenn du eine Checkliste hast, die Punkte in der Reihenfolge ihrer Wichtigkeit anzeigt.

Unsortierte Listen erkennt man oft an Punkt-Aufzählungen. Zum Beispiel:

  • Einkaufen
  • Putzen
  • Freunde treffen

Hier gibt die Reihenfolge keinen speziellen Hinweis darauf, was zuerst gemacht werden soll. Es ist lediglich eine Liste mit den Dingen, die du tun möchtest.

So schreibt man eine unsortierte Liste in der Programmierung

Wenn man eine unsortierte Liste in der Programmierung darstellt, erstellt man eine Struktur, die mehrere „Elemente“ enthält. Hier ein Beispiel in der Programmiersprache HTML, mit der Webseiten erstellt werden können:

<ul>
  <li>Äpfel</li>
  <li>Orangen</li>
  <li>Bananen</li>
</ul>

Hier passiert Folgendes:

  1. Wir beginnen mit <ul>. Das steht für „unordered list“ (unsortierte Liste).
  2. Jedes Element der Liste wird mit <li> (list item – Listenelement) gekennzeichnet.
  3. Am Ende schließen wir die Liste mit </ul> wieder ab.

Das Ergebnis wäre eine Auflistung, bei der die Punkte untereinander stehen:

  • Äpfel
  • Orangen
  • Bananen

Beispiele aus dem echten Leben

Beispiel 1: Einkaufliste

Wenn du deinen Einkaufszettel schreibst, sieht er meist so aus:

  • Milch
  • Brot
  • Butter
  • Käse

Hier ist es wichtig zu notieren, was du brauchst, aber es spielt keine Rolle, in welcher Reihenfolge du die Sachen besorgst. Solch eine Auflistung entspricht einer unsortierten Liste.

Beispiel 2: Kategorien in einem Webshop

Ein Webshop zeigt oft Kategorien, damit du schnell das findest, wonach du suchst. Zum Beispiel:

  • Elektronik
  • Kleidung
  • Haushalt
  • Bücher

Auch hier ist die Reihenfolge nicht festgelegt. Du kannst mit jeder Kategorie beginnen, denn es sind einfach nur verschiedene Gruppierungen.

Beispiel 3: Aufgabenliste

Auch für To-Do-Listen eignen sich unsortierte Listen. Zum Beispiel:

  • Auto waschen
  • Call mit dem Team
  • Rechnung bezahlen

Es gibt keine Reihenfolge – du entscheidest selbst, womit du anfängst.

Wichtige Eigenschaften von unsortierten Listen

  1. Reihenfolge egal: Die Reihenfolge der Elemente hat keine Bedeutung.
  2. Übersichtlichkeit: Sie helfen, Inhalte übersichtlicher darzustellen.
  3. Einfachheit: Sie sind sehr leicht zu benutzen, auch in der Programmierung.

Attribute für ungeordnete Listen

  1. type-Attribut für Listenpunkte (Nicht in modernen Standards, aber historisch) Mit dem type-Attribut konnte der Stil der Aufzählungspunkte (Bullet Points) verändert werden. Es gibt drei Varianten:
    • type="disc": Punkte in Form eines gefüllten Kreises (Standard).
    • type="circle": Punkte in Form von leeren Kreisen.
    • type="square": Punkte in Form von Quadraten.
    Beispiel:
<ul type="circle">
  <li>Erster Punkt</li>
  <li>Zweiter Punkt</li>
  <li>Dritter Punkt</li>
</ul>

Ergebnis:

  • ○ Erster Punkt
  • ○ Zweiter Punkt
  • ○ Dritter Punkt

⚠️ Das Attribut type wird heute allerdings nur noch wenig verwendet und von modernen Browsern eher ignoriert. Stattdessen kann der Aufzählungstyp besser über CSS angepasst werden.

Zusammenfassung

Unsortierte Listen sind einfach zu verstehen und sehr vielseitig. Ganz egal, ob du Sachen, Kategorien oder Aufgaben aufschreiben möchtest – eine unsortierte Liste hält alles geordnet, ohne dass eine feste Reihenfolge wichtig ist. Du kannst sie dir immer wie eine einfache Aufzählung aus deinem Alltag vorstellen, wie eine Einkaufsliste oder eine Übersicht der Abteilungen in einem Supermarkt.