Hamburger-Menu
Bild zum Thema

Tag <ol>

html css php mysql javascript
Bild zum Thema

Tag <ol>

Definition

Status: Aktueller Standard


Das Tag <ol> steht für ordered list (geordnete Liste).
Das <ol>-Element definiert eine geordnete Liste von Elementen. Im Gegensatz zur ungeordneten Liste (<ul>) ist hier die Reihenfolge der Listeneinträge von Bedeutung. Die einzelnen Einträge werden innerhalb des Tags mit dem <li>-Tag markiert. Es können unterschiedliche Aufzählstile entweder über das Attribut type oder über CSS definiert werden. Bei semantischer Bedeutung der Aufzählung bitte über das Attribut definieren. Bei rein dekorativer Aufzählung bitte über CSS definieren. Listen können auch verschachtelt werden und dabei sowohl <ol> als auch <ul> gemeinsam vorkommen (siehe Beispiele).

Syntax

<ol [attribut]><li>...</li></ol>

Attribute bzw. Unterelemente

type

Art der Nummerierung:
"1" = "dezimal" (Standard)
"a" = Kleinbuchstaben
"A" = Großbuchstaben
"i" = römische Ziffer (klein)
"I" = römische Ziffern (groß)


start

Startwert der Zählung


reversed

Zählung rückwärts (absteigend)


Beispiele

= Tag

= Attribut

= Wert

Text
= Kommentar bzw. wichtig!
Beispiel <ol> - Verschiedene Nummerierungen

Der Code:
<h3>Standard</h3>
    <ol>
      <li>Einleitung</li>
      <li>Hauptteil</li>
      <li>Schluss</li>
    </ol>

    <h3>Römische Ziffern</h3>
    <ol type="I">
      <li>Einleitung</li>
      <li>Hauptteil</li>
      <li>Schluss</li>
    </ol>

    <h3>Alphabet</h3>
    <ol type="A">
      <li>Einleitung</li>
      <li>Hauptteil</li>
      <li>Schluss</li>
    </ol>

Ergebnis:
Ergebnis: <ol>-Demo 1
Verschiedene Nummerierungen

Verschiedene Listenmarkierungen
Beispiel <ol> - Verschachtelung von Listen (<ol> und <ul>)

Der Code:
<ul>
  <li>Getränke
    <ol>
      <li>Wasser</li>
      <li>Limonade</li>
    </ol>
  </li>
  <li>Speisen
    <ol>
      <li>Vorspeisen</li>
      <li>Hauptspeisen</li>
      <li>Nachspeisen</li>
    </ol>
  </li>
</ul>

Ergebnis:
Ergebnis: <ol>-Demo 2
Verschachtelung von Listen (<ol> und <ul>)

Würde man hier beim beim zweiten <ol> das Attribut start="3" einsetzen würde die Zählung bei der "Vorspeise" mit "3" beginnen (sozusagen die Zählung fortführen).