<ol> HTML-Element für geordnete Listen - HTML | MDN

Seitenleiste umschalten

Farbschema

Systemeinstellung
Hell
Dunkel

Deutsch

Sprache merken Mehr erfahren

<ol> HTML-Element für geordnete Listen

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Das <ol>-Element HTML stellt eine geordnete Liste von Elementen dar - üblicherweise als nummerierte Liste dargestellt.

In diesem Artikel

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

Dieses boolesche Attribut deutet an, dass die Liste in einem kompakten Stil dargestellt werden soll. Die Interpretation dieses Attributs ist browserspezifisch. Verwenden Sie CSS stattdessen: 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 Elemente der Liste in umgekehrter Reihenfolge aufgeführt sind. Die Elemente werden von hoch nach niedrig nummeriert.

start

Eine Ganzzahl, ab der die Listenelemente gezählt werden. Immer eine arabische Zahl (1, 2, 3, etc.), auch wenn der Nummerierungstyp Buchstaben oder römische Ziffern ist. Um beispielsweise die Nummerierung bei 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 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 Listennummerierung nicht relevant ist (z. B. in rechtlichen oder technischen Dokumenten, in denen Elemente durch ihre Nummer/Buchstabe referenziert werden), verwenden Sie stattdessen die CSS-Eigenschaft list-style-type.

Verwendungshinweise

Typischerweise werden Elemente geordneter Listen mit einem vorangestellten Marker, wie einer Zahl oder einem Buchstaben, angezeigt.

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

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

Schritte in einem Rezept
Schritt-für-Schritt-Anweisungen
Die Zutatenliste in abnehmender Menge auf Nährwertangaben-Etiketten

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> oder <menu> verwenden, 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 römischen Ziffern-Typs

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

Verschachtelung 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 innerhalb 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 Erlaubter Inhalt Tag-Auslassung Erlaubte Eltern Implizierte ARIA-Rolle Erlaubte ARIA-Rollen DOM-Schnittstelle

Flow-Inhalt und wenn die Kinder des <ol>-Elements mindestens ein <li>-Element enthalten, fühlbarer Inhalt.

Null oder mehr <li>, <script> und <template>-Elemente.

Keine, sowohl das Start- als auch das End-Tag sind obligatorisch.

Jedes Element, das Flow-Inhalt akzeptiert.

list

directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar, tree

[`HTMLOListElement`](/de/docs/Web/API/HTMLOListElement)

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 des Ordnungszeichens 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 den Listeneinzug zu steuern

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

<ol> HTML-Element für geordnete Listen

In diesem Artikel

Probieren Sie es aus

Attribute

Verwendungshinweise

Beispiele

Einfaches Beispiel

Ergebnis

Verwendung des römischen Ziffern-Typs

Ergebnis

Verwendung des Start-Attributs

Ergebnis

Verschachtelung von Listen

Ergebnis

Ungeordnete Liste innerhalb einer geordneten Liste

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

Help improve MDN