<ol>: Das geordnete Listenelement

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 Veraltet Nicht standardisiert

Dieses boolesche Attribut deutet darauf hin, dass die Liste in einem kompakten Stil gerendert werden sollte. Die Interpretation dieses Attributs ist browserspezifisch. Verwenden Sie stattdessen CSS: Um einen ähnlichen Effekt wie das compact-Attribut zu erzielen, kann die CSS-Eigenschaft line-height mit einem Wert von 80% verwendet werden.

reversed

Dieses boolesche Attribut gibt an, dass die Listenelemente in umgekehrter Reihenfolge vorliegen. Die Elemente werden von hoch zu niedrig nummeriert.

start

Eine ganze Zahl, ab der die Listenelemente gezählt werden sollen. Immer eine arabische Zahl (1, 2, 3, etc.), auch wenn der Nummerierungstyp Buchstaben oder römische Zahlen sind. Zum Beispiel, um nummerierte Elemente von dem Buchstaben "d" oder der römischen Zahl "iv" zu starten, 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 (Standard)

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

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

Nutzungshinweise

Typischerweise werden geordnete Listenelemente mit einem vorangestellten Markierungssymbol, wie einer Zahl oder einem Buchstaben, angezeigt.

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

Die Elemente <ol> und <ul> stellen beide eine Liste von Elementen dar. Der Unterschied besteht darin, dass bei dem <ol>-Element die Reihenfolge wichtig ist. Zum Beispiel:

• Schritte in einem Rezept
• Schritt-für-Schritt-Anweisungen
• Die Zutatenliste in abnehmender Proportion auf Nährwertinformationstabellen

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> 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

Verwenden des römischen Zifferntyps

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

Ergebnis

Verwenden des Start-Attributs

<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

<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

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