HTML - Element: <ol>

Eine Nummerierte Liste definieren Sie mit den Tags <ol> und <li>. Mit dem Attribut start="" legen Sie den Startpunkt fest, ab welcher zu zählen begonnen wird.
Siehe auch Aufzählungsliste <ul> und Definitionsliste <dl>.

<!DOCTYPE html>
<html>
<head>
 <title>Nummerierte Liste</title>
</head>
<body>

<h1>Nummerierte Liste</h1>

<ol>
 <li>Listenpunkt</li>
 <li>Listenpunkt</li>
 <li>Listenpunkt</li>
 <li>Listenpunkt</li>
</ol>

<ol start="90">
 <li>Listenpunkt</li>
 <li>Listenpunkt</li>
 <li>Listenpunkt</li>
 <li>Listenpunkt</li>
</ol>

<ol reversed="reversed">
 <li>Listenpunkt</li>
 <li>Listenpunkt</li>
 <li>Listenpunkt</li>
 <li>Listenpunkt</li>
</ol>

</body>
</html>

Das Attribut: reversed="reversed" wird nicht vom Internet Explorer unterstützt.
Beispiel anzeigen

Mit CSS können Sie bestimmen wie die Nummerierung dargestellt wird.

<!DOCTYPE html>
<html>
<head>
 <title>Nummerierte Liste bestimmen</title>
</head>
<body>

<h1>Nummerierte Liste bestimmen</h1>

<ol style="list-style-type: decimal">
 <li>Listenpunkt</li>
 <li>Listenpunkt</li>
</ol>

<ol style="list-style-type: lower-roman">
 <li>Listenpunkt</li>
 <li>Listenpunkt</li>
</ol>

<ol style="list-style-type: upper-roman">
 <li>Listenpunkt</li>
 <li>Listenpunkt</li>
</ol>

<ol style="list-style-type: lower-alpha">
 <li>Listenpunkt</li>
 <li>Listenpunkt</li>
</ol>

<ol style="list-style-type: upper-alpha">
 <li>Listenpunkt</li>
 <li>Listenpunkt</li>
</ol>

<ol style="list-style-type: decimal-leading-zero">
 <li>Listenpunkt</li>
 <li>Listenpunkt</li>
</ol>

</body>
</html>

Beispiel anzeigen

Tipp

CSS-Counter: Nummerierungen für HTML-Elemente - Mit dem CSS-Counter lassen sich beliebige HTML-Elemente nummerieren.

Bausteine Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<object> Objekt

CSS - Kalender Symbol neben dem Datepicker

PHP - Bild und Bildinformation anzeigen

JavaScript - Bei der Eingabe eines Datums die Punkte automatisch hinzufügen

MySQL - Anzahl der Datensätze in einer Spalte

Aktualität vortäuschen
Viele Seiten werben mit "aktuellen News", die in Wirklichkeit Wochen alt sind. Wenn man aktuelle News verspricht, dann sollte man diese auch bieten, ansonsten sollte man lieber darauf verzichten.