Listen

Eine Einkaufsliste und ein Rezept sind beides Listen, aber nur eine davon geht kaputt, wenn man die Reihenfolge ändert. HTML hat für jede ein eigenes Element.

Ungeordnete und geordnete Listen

Wenn die Reihenfolge der Einträge keine Rolle spielt, verwende eine ungeordnete Liste, <ul>. Browser markieren jeden Eintrag mit einem Aufzählungspunkt. Wenn die Reihenfolge wichtig ist, etwa bei den Schritten eines Rezepts oder einer Rangliste, verwende eine geordnete Liste, <ol>, und der Browser nummeriert die Einträge für dich. In beiden Fällen ist jeder Eintrag ein <li>, ein Listeneintrag, und direkt in <ul> oder <ol> sind nur <li>-Elemente erlaubt. Text und andere Elemente stehen in den Einträgen.

<h2>You will need</h2>
<ul>
  <li>500 g flour</li>
  <li>10 g salt</li>
  <li>350 ml warm water</li>
</ul>

<h2>Method</h2>
<ol>
  <li>Mix everything in a bowl.</li>
  <li>Leave it covered for 12 hours.</li>
  <li>Shape and bake at 230 degrees for 40 minutes.</li>
</ol>

Warum tippst du die Zahlen oder Striche nicht selbst? Weil der Browser dann nicht weiß, dass es eine Liste ist. Ein Screenreader sagt eine echte Liste mit ihrer Länge an, zum Beispiel „Liste, 3 Einträge“, sodass der Zuhörer weiß, wie viel kommt, und sie überspringen kann. Fügst du einen Schritt in eine <ol> ein, passt sich jede folgende Nummer von selbst an. Mit getippten Zahlen müsstest du von Hand neu nummerieren.

Optionen für geordnete Listen

<ol> hat einige Attribute. start="4" beginnt die Zählung bei 4, praktisch, wenn eine Liste nach einem Absatz weitergeht. reversed zählt rückwärts, für eine Top Ten. type stellt die Markierung auf Buchstaben oder römische Zahlen um: type="a", type="A", type="i" oder type="I". Ein einzelner Eintrag kann mit value auch auf eine bestimmte Nummer springen, etwa <li value="10">. Wie Aufzählungspunkte und Nummern aussehen (Form, Farbe oder ob sie überhaupt erscheinen), steuert CSS.

Listen in Listen

Ein Listeneintrag kann eine ganze Liste enthalten. Setz die innere <ul> oder <ol> in das <li>, zu dem sie gehört, nach dem Text des Eintrags und vor dessen schließendem Tag. Ein häufiger Fehler ist, die innere Liste zwischen zwei <li>-Elemente direkt in die äußere Liste zu setzen, was nicht erlaubt ist. Mit verschachtelten Listen bauen Websites Menüs mit Untermenüs, und Gliederungen zeigen so Unterpunkte.

<ul>
  <li>Bread
    <ul>
      <li>Sourdough</li>
      <li>Rye</li>
    </ul>
  </li>
  <li>Cakes</li>
</ul>

Beschreibungslisten

Die dritte Art von Liste verbindet Begriffe mit Beschreibungen, etwa in einem Glossar oder bei Fragen und Antworten. <dl> ist die Beschreibungsliste, <dt> enthält einen Begriff und <dd> seine Beschreibung. Ein Begriff kann mehrere Beschreibungen haben, und mehrere Begriffe können sich eine teilen. Browser rücken die Beschreibungen standardmäßig ein.

Listen tauchen an Stellen auf, an denen du sie vielleicht nicht erwartest. Das Menü oben auf den meisten Websites ist eine <ul> aus Links in einem <nav>. CSS ordnet die Einträge in einer Reihe an und blendet die Aufzählungspunkte aus. Eine Reihe von Produktkarten oder eine Menge von Suchergebnissen ist oft ebenfalls eine Liste. Wenn du eine Gruppe ähnlicher Dinge siehst, frag dich, ob es eine Liste ist. Meist lautet die Antwort ja.

Ein schneller Weg, sich zwischen beiden zu entscheiden: Stell dir vor, du mischst die Einträge. Ändert das Mischen die Bedeutung, wie bei den Schritten eines Rezepts oder einer Top Ten, ist die Liste geordnet und braucht <ol>. Ändert sich nichts, wie bei einer Packliste, verwende <ul>. Halte jeden Eintrag kurz und beginne die Einträge grammatisch gleich, damit sich die Liste leicht überfliegen lässt.