<ol>: Das geordnete Listenelement

Dieses Element akzeptiert auch die globalen Attribute.

compact Veraltet Nicht standardisiert

Dieses Boolean-Attribut deutet an, dass die Liste in einem kompakten Stil dargestellt 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 Boolean-Attribut gibt an, dass die Elementreihenfolge umgekehrt ist. Elemente werden von hoch nach niedrig nummeriert.

start

Eine Ganzzahl, von der aus die Listenelemente gezählt werden. Immer eine arabische Zahl (1, 2, 3, usw.), selbst wenn der Nummerierungstyp Buchstaben oder römische Zahlen sind. Um zum Beispiel die Nummerierung der Elemente mit dem Buchstaben "d" oder der römischen Zahl "iv" zu beginnen, verwenden Sie start="4".

type

Bestimmt den Nummerierungstyp:

• a für kleine Buchstaben
• A für große 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 für ein enthaltenes <li> Element verwendet.

Hinweis: Es sei denn, der Typ der Listennummer ist von Bedeutung (wie in rechtlichen oder technischen Dokumenten, in denen Elemente nach ihrer Nummer/Buchstabe referenziert werden), sollten Sie die CSS-Eigenschaft list-style-type verwenden.

In der Regel werden geordnete Listenelemente mit einem vorangestellten Marker angezeigt, wie einer Zahl oder einem Buchstaben.

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

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

• Schritte in einem Rezept
• Schritt-für-Schritt-Anleitungen
• Die Zutatenliste auf Nährwertangaben-Etiketten in abnehmender Reihenfolge

Um zu bestimmen, 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.

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

Ergebnis

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

Ergebnis

<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

<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

<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

• Andere listenbezogene 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 Darstellungsweise der Ordnungszeichen zu wählen
  • CSS-Zähler, um mit komplexen verschachtelten Listen umzugehen
  • die line-height-Eigenschaft, um das veraltete compact-Attribut zu simulieren
  • die margin-Eigenschaft, um den Listeneinzug zu steuern