<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 Elementen – 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 Elemente der Liste in umgekehrter Reihenfolge angeordnet sind. Die Nummerierung erfolgt von hoch nach niedrig.

start

Eine ganze Zahl, mit der die Zählung für die Listenelemente beginnt. Immer eine arabische Ziffer (1, 2, 3 usw.), auch wenn der Nummerierungstype Buchstaben oder römische Ziffern sind. Zum Beispiel, um 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 römische Kleinbuchstaben
  • I für römische Großbuchstaben
  • 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 Typ der Listennummer keine Rolle spielt (wie in rechtlichen oder technischen Dokumenten, in denen Elemente nach ihrer Nummer/Buchstabe referenziert werden), verwenden Sie stattdessen die CSS-Eigenschaft list-style-type.

Verwendungshinweise

Typischerweise werden geordnete Listenelemente mit einem vorangestellten Markierer angezeigt, z. B. einer Zahl oder einem Buchstaben.

Die <ol> und <ul> (oder das Synonym <menu>) Elemente können beliebig tief geschachtelt werden, wobei nach Bedarf zwischen <ol>, <ul> (oder <menu>) abgewechselt wird.

Die <ol> und <ul> Elemente repräsentieren beide eine Liste von Elementen. Der Unterschied besteht darin, dass bei dem <ol> Element die Reihenfolge eine Bedeutung hat. Zum Beispiel:

  • Schritte in einem Rezept
  • Schritt-für-Schritt-Anweisungen
  • Die Liste der Zutaten in absteigender Menge auf Nährwertkennzeichnungen

Um zu bestimmen, welche Liste zu verwenden ist, versuchen Sie, die Reihenfolge der Listenelemente zu ändern; wenn sich die Bedeutung ändert, verwenden Sie das <ol>-Element — andernfalls können Sie <ul>, oder <menu> verwenden, wenn es sich bei Ihrer Liste um ein Menü handelt.

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 in 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 Fließender Inhalt, und wenn die Kinder des <ol>-Elements mindestens ein <li>-Element enthalten, fühlbarer Inhalt.
Erlaubter Inhalt Null oder mehr <li>, <script> und <template> Elemente.
Tag-Auslassung Keine, sowohl der Start- als auch der End-Tag sind erforderlich.
Erlaubte Eltern Jedes Element, das fließenden Inhalt akzeptiert.
Implizite ARIA-Rolle Liste
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

Siehe auch

  • Andere Listen-bezogene HTML-Elemente: <ul>, <li>, <menu>
  • CSS-Eigenschaften, die speziell nützlich sein könnten, um das <ol>-Element zu stylen:
    • die list-style Eigenschaft, um die Art der Anzeige des Ordnungszeichens 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 den Listeneinzug zu steuern