Listen und Aufzählungen

HTML hat verschiedene Elemente für Listen und Aufzählungen. Beide werden jedoch ziemlich ähnlich strukturiert. Es gibt Listen, bei denen die Reihenfolge keine Rolle spielt. Diese unordered lists werden mit dem Tag <ul> deklariert. Einzelne Listeneinträge (list items) werden als <li>-Kindelemente von <ul> angegeben. Ein Beispiel könnte eine Einkaufsliste sein, bei der die Reihenfolge unbedeutend ist:

<ul>
  <li>Butter</li>
  <li>Milch</li>
  <li>Eier</li>
  <li>Mehl</li>
</ul>

Die Darstellung erfolgt standardmäßig mit bullet points (oft durch CSS im Aussehen angepasst):

• Butter
• Milch
• Eier
• Mehl

Bei Aufzählungen ist die Reihenfolge wichtig, daher sind dies „geordnete Listen“ (ordererd list). Diese werden mit <ol> definiert und haben ebenfalls <li>-Elemente für die einzelnen Einträge. Bei einem Rezept sollten die Schritte wie angegeben nacheinander ausgeführt werden:

<ol>
  <li>Butter schmelzen</li>
  <li>Milch, geschmolzene Butter, Mehl und Eier vermischen</li>
  <li>Eine Kelle Teig in die heiße Pfanne geben</li>
  <li>Pfannkuchen wenden, wenn sich Blasen bilden</li>
</ol>

Aufzählungen mit <ol> werden automatisch in der Darstellung durchnummeriert:

1. Butter schmelzen
2. Milch, geschmolzene Butter, Mehl und Eier vermischen
3. Eine Kelle Teig in die heiße Pfanne geben
4. Pfannkuchen wenden, wenn sich Blasen bilden

Listen und Aufzählungen lassen sich kombinieren und schachteln:

<ol>
  <li>Butter schmelzen</li>
  <li>
    Alles vermischen:
    <ul>
      <li>geschmolzene Butter</li>
      <li>125ml Milch</li>
      <li>2 Eier</li>
      <li>150g Mehl</li>
    </ul>
  </li>
  <li>Eine Kelle Teig in die heiße Pfanne geben</li>
  <li>Pfannkuchen wenden, wenn sich Blasen bilden</li>
</ol>

1. Butter schmelzen
2. Alles vermischen:
   • geschmolzene Butter
   • 125ml Milch
   • 2 Eier
   • 150g Mehl
3. Eine Kelle Teig in die heiße Pfanne geben
4. Pfannkuchen wenden, wenn sich Blasen bilden