<ol>: Das geordnete Listen-Element

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Das <ol> HTML-Element repräsentiert eine geordnete Liste von Elementen – typischerweise als nummerierte Liste dargestellt.

Attribute

Dieses Element akzeptiert auch die globalen Attribute.

reversed

Dieses Boolean-Attribut gibt an, dass die Elemente der Liste in umgekehrter Reihenfolge sind. Die Elemente werden von hoch nach niedrig nummeriert.

start

Eine ganze Zahl, ab der die Listenelemente gezählt werden sollen. Immer eine arabische Ziffer (1, 2, 3 usw.), auch wenn der Nummerierungstyp Buchstaben oder römische Ziffern sind. Um beispielsweise die Nummerierung der Elemente mit dem Buchstaben „d“ oder der römischen Ziffer „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 Ziffern
I für große römische Ziffern
1 für Zahlen (Standard)

Der angegebene Typ wird für die gesamte Liste verwendet, es sei denn, ein anderes type-Attribut wird bei einem eingeschlossenen <li>-Element verwendet.

Hinweis: Sofern der Typ der Listen-Nr. wichtig ist (wie in rechtlichen oder technischen Dokumenten, in denen Elemente nach ihrer Nummer/Buchstabe referenziert werden), verwenden Sie stattdessen die CSS-Eigenschaft list-style-type.

Anwendungshinweise

Typischerweise werden geordnete Listenelemente mit einem vorausgehenden Marker angezeigt, wie z.B. einer Zahl oder einem Buchstaben.

Die Elemente <ol> und <ul> (oder das Synonym <menu>) können so tief verschachtelt werden, wie nötig, indem sie nach Bedarf zwischen <ol>, <ul> (oder <menu>) wechseln.

Die Elemente <ol> und <ul> repräsentieren beide eine Liste von Einträgen. Der Unterschied besteht darin, dass bei dem <ol>-Element die Reihenfolge bedeutsam ist. Zum Beispiel:

Schritte in einem Rezept
Routenanweisungen
Die Liste der Zutaten in absteigender Reihenfolge auf Nährwertkennzeichnungen

Um zu entscheiden, welche Liste verwendet werden soll, versuchen Sie, die Reihenfolge der Listenelemente zu ändern; wenn sich die Bedeutung ändert, verwenden Sie das <ol>-Element — andernfalls können Sie <ul> verwenden oder <menu>, wenn Ihre Liste ein Menü ist.

Beispiele

Einfaches Beispiel

html

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

Ergebnis

Verwendung des Typs Römische Ziffern

html

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

Ergebnis

Verwendung des Start-Attributs

html

<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

Verschachtelte Listen

html

<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

html

<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

Inhaltskategorien	Flussinhalte, und wenn die Kinder des `<ol>`-Elements mindestens ein `<li>`-Element umfassen, spürbare Inhalte.
Erlaubte Inhalte	Null oder mehr `<li>`, `<script>` und `<template>`-Elemente.
Tag-Auslassung	Keine, sowohl das öffnende als auch das schließende Tag sind obligatorisch.
Erlaubte Eltern	Jedes Element, das Flussinhalte akzeptiert.
Implizierte ARIA-Rolle	`list`
Erlaubte ARIA-Rollen	`directory`, `group`, `listbox`, `menu`, `menubar`, `none`, `presentation`, `radiogroup`, `tablist`, `toolbar`, `tree`
DOM-Schnittstelle	[`HTMLOListElement`](/de/docs/Web/API/HTMLOListElement)

Spezifikationen

Specification
HTML Standard # the-ol-element

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

Andere listenbezogene HTML-Elemente: <ul>, <li>, <menu>
CSS-Eigenschaften, die besonders nützlich sein könnten, um das <ol>-Element zu stylen:
- die list-style-Eigenschaft, um die Anzeigeform der Ordinalzahlen zu wählen
- CSS-Zähler, um komplexe verschachtelte Listen zu verwalten
- die line-height-Eigenschaft, um das veraltete compact-Attribut zu simulieren
- die margin-Eigenschaft, um die Einrückung der Liste zu steuern