HTML-Element <ol> für geordnete Listen

Probieren Sie es aus

<ol>
  <li>Mix flour, baking powder, sugar, and salt.</li>
  <li>In another bowl, mix eggs, milk, and oil.</li>
  <li>Stir both mixtures together.</li>
  <li>Fill muffin tray 3/4 full.</li>
  <li>Bake for 20 minutes.</li>
</ol>

li {
  font:
    1rem "Fira Sans",
    sans-serif;
  margin-bottom: 0.5rem;
}

Attribute

Dieses Element akzeptiert auch die globalen Attribute.

compact

Dieses boolesche Attribut gibt an, dass die Liste kompakt dargestellt werden soll. Wie das Attribut interpretiert wird, hängt vom Browser ab. Verwenden Sie stattdessen CSS: Einen ähnlichen Effekt wie mit dem Attribut compact erzielen Sie mit der CSS-Eigenschaft line-height und dem Wert 80%.

reversed

Dieses boolesche Attribut legt fest, dass die Listeneinträge in umgekehrter Reihenfolge nummeriert werden. Die Nummerierung verläuft von hoch nach niedrig.

start

Eine Ganzzahl, bei der die Zählung der Listeneinträge beginnt. Der Wert ist immer eine arabische Ziffer (1, 2, 3 usw.), auch wenn für den Nummerierungstyp type Buchstaben oder römische Zahlen verwendet werden. Um die Nummerierung beispielsweise mit dem Buchstaben „d“ oder der römischen Zahl „iv“ zu beginnen, verwenden Sie start="4".

type

Legt den Nummerierungstyp fest:

• a für Kleinbuchstaben
• A für Großbuchstaben
• i für kleine römische Zahlen
• I für große römische Zahlen
• 1 für Zahlen (Standardwert)

Der angegebene Typ gilt für die gesamte Liste, sofern für ein enthaltenes <li>-Element kein anderes Attribut type verwendet wird.

Hinweis: Sofern der Typ der Listennummerierung nicht von Bedeutung ist – etwa in juristischen oder technischen Dokumenten, in denen anhand von Nummern oder Buchstaben auf Einträge verwiesen wird –, verwenden Sie stattdessen die CSS-Eigenschaft list-style-type.

Verwendungshinweise

Einträge geordneter Listen werden üblicherweise mit einem vorangestellten Marker dargestellt, beispielsweise einer Zahl oder einem Buchstaben.

Die Elemente <ol> und <ul> (oder dessen Synonym <menu>) können beliebig tief ineinander verschachtelt werden. Dabei können Sie nach Bedarf zwischen <ol>, <ul> und <menu> wechseln. Um eine Liste zu verschachteln, platzieren Sie sie innerhalb eines <li>-Elements der übergeordneten Liste. Ein Listenelement darf kein direktes Kindelement eines anderen <ul>- oder <ol>-Elements sein.

Sowohl <ol> als auch <ul> stellen Listen von Einträgen dar. Bei <ol> ist jedoch die Reihenfolge der Einträge von Bedeutung. Beispiele:

• Schritte in einem Rezept
• Schrittweise Wegbeschreibungen
• Eine Zutatenliste auf Nährwertkennzeichnungen, sortiert nach absteigendem Mengenanteil

Um zu entscheiden, welches Listenelement Sie verwenden sollten, ändern Sie probeweise die Reihenfolge der Einträge. Ändert sich dadurch die Bedeutung, verwenden Sie <ol>. Andernfalls können Sie <ul> verwenden – oder <menu>, wenn Ihre Liste ein Menü ist.

Beispiele

Einfaches Beispiel

<ol>
  <li>Fee</li>
  <li>Fi</li>
  <li>Fo</li>
  <li>Fum</li>
</ol>

Ergebnis

Römische Zahlen als Nummerierungstyp verwenden

<ol type="i">
  <li>Introduction</li>
  <li>List of Grievances</li>
  <li>Conclusion</li>
</ol>

Ergebnis

Das Attribut start verwenden

<p>Finishing places of contestants not in the winners' circle:</p>

<ol start="4">
  <li>Speedwalk Stu</li>
  <li>Saunterin' Sam</li>
  <li>Slowpoke Rodriguez</li>
</ol>

Ergebnis

Listen verschachteln

<ol>
  <li>first item</li>
  <li>
    second item
    <!-- closing </li> tag is not here! -->
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
  </li>
  <!-- Here's the closing </li> tag -->
  <li>third item</li>
</ol>

Ergebnis

Ungeordnete Liste innerhalb einer geordneten Liste

<ol>
  <li>first item</li>
  <li>
    second item
    <!-- closing </li> tag is not here! -->
    <ul>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ul>
  </li>
  <!-- Here's the closing </li> tag -->
  <li>third item</li>
</ol>

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Weitere HTML-Elemente für Listen: <ul>, <li>, <menu>
• CSS-Eigenschaften, die für die Gestaltung des <ol>-Elements besonders nützlich sein können:
  • die Eigenschaft list-style, um die Darstellung der Nummerierung festzulegen
  • CSS-Zähler, um komplexe verschachtelte Listen zu verwalten
  • die Eigenschaft line-height, um das veraltete Attribut compact nachzubilden
  • die Eigenschaft margin, um die Einrückung der Liste festzulegen