<ol>: Das geordnete Listenelement

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 Einträgen – typischerweise als nummerierte Liste dargestellt.

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.

reversed

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

start

Eine Ganzzahl, ab der die Listeneinträge gezählt werden. Immer eine arabische Ziffer (1, 2, 3, etc.), auch wenn der Nummerierungstyp Buchstaben oder römische Ziffern ist. Zum Beispiel, um die Nummerierung 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 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 auf einem eingeschlossenen <li> Element verwendet.

Hinweis: Sofern der Listentyp wichtig ist (wie in rechtlichen oder technischen Dokumenten, bei denen Einträge durch ihre Nummer/Buchstabe referenziert werden), verwenden Sie stattdessen die CSS-Eigenschaft list-style-type.

Nutzungshinweise

Typischerweise werden geordnete Listeneinträge mit einem vorangestellten Marker, wie einer Zahl oder einem Buchstaben, angezeigt.

Die <ol> und <ul> (oder das Synonym <menu>) Elemente können so tief verschachtelt werden, wie gewünscht, wobei <ol>, <ul> (oder <menu>) bei Bedarf abwechselnd verwendet werden.

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

  • Schritte in einem Rezept
  • Schritt-für-Schritt-Anweisungen
  • Die Liste der Zutaten in abnehmender Proportion auf Nährwertangaben

Um zu bestimmen, welche Liste verwendet werden soll, versuchen Sie, die Reihenfolge der Listeneinträge zu ändern; wenn sich die Bedeutung ändert, verwenden Sie das <ol> Element – ansonsten 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 Zahlen

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

Verschachteln von 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 in geordneter 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 Fließender Inhalt, und wenn die Kinder des <ol>-Elements mindestens ein <li> Element umfassen, wahrnehmbarer Inhalt.
Erlaubter Inhalt Null oder mehr <li>, <script> und <template> Elemente.
Tag-Auslassung Keine, sowohl das Start- als auch das End-Tag sind erforderlich.
Erlaubte Eltern Jedes Element, das Fließenden Inhalt 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
# 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 Darstellung der Ordinalzahlen zu wählen
    • CSS-Zähler, um komplexe verschachtelte Listen zu handhaben
    • die line-height Eigenschaft, um das veraltete compact Attribut zu simulieren
    • die margin Eigenschaft, um die Einrückung der Liste zu steuern