<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 an, dass die Liste in einem kompakten Stil dargestellt werden soll. Die Interpretation dieses Attributs ist browserspezifisch. Verwenden Sie stattdessen CSS: Um einen ähnlichen Effekt wie das compact-Attribut zu erzielen, können Sie die CSS-Eigenschaft line-height mit einem Wert von 80% verwenden.

reversed

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

start

Eine Ganzzahl, von der an die Listeneinträge gezählt werden. Immer eine arabische Zahl (1, 2, 3 usw.), auch wenn der Nummerierungstyp 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 Ziffern in Kleinbuchstaben
• I für römische Ziffern in 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 enthaltenen <li>-Element verwendet.

Hinweis: Sofern es nicht auf die Art der Listennummerierung ankommt (wie in juristischen oder technischen Dokumenten, in denen Einträge durch ihre Nummer/Buchstabe referenziert werden), verwenden Sie stattdessen die CSS-Eigenschaft list-style-type.

Hinweise zur Verwendung

In der Regel zeigen geordnete Listeneinträge ein vorangehendes Marker, wie eine Nummer oder einen Buchstaben.

Die <ol>- und <ul>- (oder das Synonym <menu>) Elemente können so tief wie gewünscht geschachtelt werden, wobei zwischen <ol>, <ul> (oder <menu>) nach Bedarf gewechselt wird.

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

• Schritte in einem Rezept
• Schritt-für-Schritt-Richtungen
• Die Liste der Zutaten in abnehmender Reihenfolge auf den Nährwertangaben

Um zu bestimmen, welche Liste zu verwenden ist, versuchen Sie, die Reihenfolge der Listeneinträge 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

Verwendung des Römischen Zahlentyps

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

Ergebnis

Verwendung 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 geordneter 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 listebezogene HTML-Elemente: <ul>, <li>, <menu>
• CSS-Eigenschaften, die speziell nützlich sein können, 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 kontrollieren