Wenn du mehrere Dinge aufzählen willst, bei denen die Reihenfolge keine Rolle spielt (zum Beispiel eine Einkaufsliste oder Hobbys), benutzt du eine ungeordnete Liste.

Der Aufbau einer Liste

Eine Liste besteht immer aus zwei Teilen: <ul> ("unordered list", umschließt die ganze Liste) und mehreren <li> ("list item", jeweils ein einzelner Punkt):

<ul>
  <li>Fußball spielen</li>
  <li>Videospiele</li>
  <li>Mit Freunden draußen spielen</li>
</ul>

Der Browser zeigt jeden <li>-Punkt automatisch mit einem kleinen Punkt (einem "Aufzählungszeichen") davor an, jeweils in einer eigenen Zeile.

Die wichtigste Regel: nur li direkt in ul

Innerhalb von <ul> dürfen nur <li>-Elemente direkt stehen, sonst nichts. Wenn du in einem Listenpunkt zum Beispiel Text hervorheben willst, kommt das <strong> innerhalb des <li>, nicht daneben:

<ul>
  <li><strong>Hauptsport:</strong> Fußball</li>
  <li>Nebensportart: Schwimmen</li>
</ul>

Finns Hobbys als Liste hinzufügen

Füge eine neue Überschrift mit einer Liste zu deiner Webseite hinzu:

<h2>Meine Hobbys</h2>
<p>Neben Fußball mache ich noch andere Dinge gerne:</p>
<ul>
  <li>Fahrrad fahren</li>
  <li>Zeichnen</li>
  <li>Mit meinem Hund spazieren gehen</li>
  <li>Videospiele mit Freunden</li>
</ul>

Listen innerhalb von Listen (Verschachtelung)

Du kannst sogar eine ganze Liste innerhalb eines <li>-Punktes verschachteln, wenn ein Punkt eigene Unterpunkte hat:

<ul>
  <li>Sport
    <ul>
      <li>Fußball</li>
      <li>Schwimmen</li>
    </ul>
  </li>
  <li>Kreativ
    <ul>
      <li>Zeichnen</li>
    </ul>
  </li>
</ul>

Der Browser zeigt verschachtelte Listen automatisch etwas eingerückt an, damit man die Hierarchie erkennt.