<ol>: Das Ordered List-Element
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 — üblicherweise als nummerierte Liste dargestellt.
Probieren Sie es aus
Attribute
Dieses Element akzeptiert auch die globalen Attribute.
reversed
-
Dieses Boolean-Attribut gibt an, dass die Elemente der Liste in umgekehrter Reihenfolge sind. Elemente werden von hoch nach niedrig nummeriert.
start
-
Eine ganze Zahl, die angibt, ab welcher Zahl die Zählung der Listenelemente beginnen soll. Immer eine arabische Zahl (1, 2, 3, etc.), auch wenn der Nummerierungstyp Buchstaben oder römische Ziffern ist. Um beispielsweise die Nummerierung von dem Buchstaben "d" oder der römischen Ziffer "iv" zu beginnen, verwenden Sie
start="4"
. type
-
Legt den Nummerierungstyp fest:
a
für KleinbuchstabenA
für Großbuchstabeni
für kleine römische ZiffernI
für große römische Ziffern1
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 nicht entscheidend ist (wie bei juristischen oder technischen Dokumenten, in denen Elemente nach ihrer Nummer/Buchstabe referenziert werden), verwenden Sie stattdessen die CSS-Eigenschaft
list-style-type
.
Nutzungshinweise
Typischerweise werden geordnete Listenelemente mit einem vorangehenden Marker angezeigt, wie einer Nummer oder einem Buchstaben.
Die <ol>
und <ul>
(oder das Synonym <menu>
) Elemente können so tief verschachtelt werden, wie gewünscht, wobei <ol>
, <ul>
(oder <menu>
) nach Bedarf abwechseln.
Die <ol>
und <ul>
Elemente repräsentieren beide eine Liste von Elementen. Der Unterschied ist, dass beim <ol>
Element die Reihenfolge bedeutungsvoll ist. Zum Beispiel:
- Schritte in einem Rezept
- Wegbeschreibung
- Die Liste der Zutaten in abnehmender Menge auf den Nährwertangaben
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
<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 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
Inhaltskategorien |
Flussinhalt, und wenn die Kinder des <ol> Elements mindestens
ein <li> Element einschließen,
fühlbarer Inhalt.
|
---|---|
Erlaubter Inhalt |
Null oder mehr <li> ,
<script> und
<template> Elemente.
|
Tag-Auslassung | Keine, sowohl das Start- als auch das End-Tag sind obligatorisch. |
Erlaubte Eltern | Jedes Element, das Flussinhalt akzeptiert. |
Implizite ARIA-Rolle | list |
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 Standard # the-ol-element |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
-
CSS-Eigenschaften, die besonders nützlich sein können, um das
<ol>
Element zu stylen:- die
list-style
Eigenschaft, um die Darstellung der Nummerierung festzulegen - CSS-Zähler, um komplexe verschachtelte Listen zu handhaben
- die
line-height
Eigenschaft, um das veraltetecompact
Attribut zu simulieren - die
margin
Eigenschaft, um die Einrückung der Liste zu steuern
- die