HTML ol nummerierte Aufzählungen

Geordnete Aufzählung mit Nummern, Buchstaben oder Ziifern

HTML ol erzeugt geordnete nummerierte Aufzählungen mit einem Index aus li-Tags, z.B. für die Bundesliga, Bestsellerlisten oder die Schritte eines Backrezepts. Die Browser markieren die Listenelemente durch Ziffern oder Buchstaben (numerisch oder alphanumerisch) und ziehen sie leicht nach rechts ein, um sie vom normalen Text abzusetzen.

Geordnet Listen stellen Zusammenhänge besser heraus als einfache Textabsätze und bringen eine automatische Reihenfolge in die einzelnen Elemente der Liste.

Das ol-Tag kennzeichnet den Anfang und das Ende der geordneten Aufzählung und nummeriert jedes Element mit einem fortlaufenden Index beginnend mit der Zahl 1 oder der römischen Ziffer i oder mit Buchstaben des Alphabets.

  1. 1899 Hoffenheim
    Borussia Dortmund 3:1
  2. Herta BSC
    RB Leipzig 2:6
  3. VfL Wolfsburg
    1. FC Köln 4:1
  4. 1. FSV Mainz 05
    Werder Bremen 1:2
<ol>
   <li>1899 Hoffenheim <br> Borussia Dortmund 3:1</li>
   <li>Herta BSC <br> RB Leipzig 2:6</li>
   <li>VfL Wolfsburg <br> 1. FC Köln 4:1</li>
   <li>1. FSV Mainz 05 <br> Werder Bremen 1:2</li>
</ol>

CSS Vorgabe für ol

Die meisten Browser rendern ol-Element mit folgenden CSS-Stilen:

ol {
   display: block;
   list-style-type: decimal;
   margin-top: 1em;
   margin-bottom: 1em;
   margin-left: 0;
   margin-right: 0;
   padding-left: 40px;
}

Der Einzug vor geordneten Listen kann nicht mit HTML, sondern nur durch CSS geändert werden.

Unterbrechung und Wiederaufnahme des Index

Die nummerierte Liste mit HTML ol ist das Gegenstück zur ungeordneten Liste. HTML ol setzt einen Index vor jeden Listeneintrag. Wird ein zusätzliches Element in die Aufzählung aufgenommen, nummeriert der Browser die Liste automatisch neu.

Das ol-Tag hat ein optionales Attribut start für den Anfang des Index. Das erlaubt eine Unterbrechung der Liste und die Wiederaufnahme.

  1. VW Golf
  2. Audi A4

So können geordnete Listen an anderer Stelle wieder aufgenommen werden.

  1. Skoda Octavia
  2. Ford Focus
<ol>
	<li>VW Golf</li>
	<li>Audi A4</li>
</ol>

…

<ol start="3">
	<li>Skoda Octavia</li>
	<li>Ford Focus</li>
</ol>

Verschachtelte Aufzählungen und Listen

Ungeordnete und nummerierte Listen können verschachtelt werden, um mehrstufige Aufzählungen zu erzeugen.

  1. Informationen zu Basistarifen
    1. Preisliste
    2. Leistungsbeschreibung
  2. Informationen zu Handy-Flat-Tarifen
    • Preisliste der Tarifleistungen
    • Weitere Leistungen (z.B. Roaming-Gebühren)
<ol style="list-style-type:upper-roman">
   <li>Informationen zu Basistarifen
      <ol style="list-style-type:upper-alpha">
         <li>Preisliste</li>
         <li>Leistungsbeschreibung</li>
      </ol>
   </li>
   <li>Informationen zu Handy-Flat-Tarifen
      <ul>
         <li>Preisliste der Tarifleistungen</li>
         <li>Weitere Leistungen (z.B. Roaming-Gebühren)</li>
      </ul>
   </li>
</ol>

Zwar gibt es das Attribut type für ungeordnete Listen mit HTML ol, aber der Typ der Aufzählung wird eher der Darstellung zugeschlagen.

Anstelle des type-Attributs wie upper-roman oder lower-latin wird also besser CSS list-style-type verwendet.

Attribute für HTML ol: reversed, type, start, value

Anstelle der langen Liste von Typen für das HTML ol-Tag

  1. decimal (1. 2. 3. )
  2. decimal-leading-zero (dezimal mit führenden Nullen: 01. 02. 03.)
  3. lower-alpha, upper-alpha (a. b. c bzw. A. B. C.)
  4. lower-roman, upper-roman (i. ii. iii. bzw. I. II. III.)
  5. lower-latin, upper-latin (a. b. c. bzw. A. B. C.)
  6. lower-greek (α. β. γ.)
  7. hebrew, armenian, georgian,cjk-ideographic,hiragana, hiragana-iroha,katakana, katakana-iroha

sind die CSS3-Typen für ol getreten. Das type-Attribut wird weiterhin immer durch CSS list-style-type überschrieben.

reversed
Rendert die nummerierte Liste in umgekehrter Reihenfole (HTML5). reversed ist ein Boolean-Attribut, geschrieben also <ol reversed>
start
Start-Wert des Index
type
Art des Markers:
type="1" decimal (Vorgabe oder default)
type="a" lower-alpha
type="A" upper-alpha
type="i" lower-roman
type="I" upper-roman
compact
Rendert die Liste in kleinerer Schrift, ist nicht mehr in HTML5 enthalten, sondern soll durch CSS gestaltet werden.

Beim Einsatz von Buchstaben eines Alphabets gibt es eine Obergrenze, z.B. 26 Buchstaben für das Alphabet.

HTML li

Direkt unterhalb eines ol-Tags dürfen nur li-Tags eingesetzt werden. Das <li>-Tag trennt die einzelnen Elemente der Aufzählung.

Spezielle Attribute für li-Tags unterhalb von ol-Tags:

value
Anstelle des start-Attributs kann das value-Attribut im ersten li unterhalb des ol-Tags eine nummerierte Aufzählung fortsetzen. Das value-Attribut kann auch jedem einzelnen li der ol-Liste zugewiesen werden,z.B. um die Nummerierung umzukehren (anstelle des reversed-Attributs).

Der Inhalt der li-Elemente unterliegt keinen Einschränkungen. Texte können beliebig lang werden. Innerhalb des li-Tags können alle Tags sitzen, gleich ob Inline-Elemente wie a oder strong, Block-Elemente wie div, table und auch weitere ul- und ol-Tags.

  1. smoove-turrel Mount Pleasant

    Smoove & Turrel

  2. goldmeisterAlles Gold

    Goldmeister

  3. kamasi-washington Heaven and Earth

    Kamasi Washington

<ol>
    <li>
        <span><img src="smoove-turrel.jpg" ></span>
        <h4>Mount Pleasant</h4> 
        <p>Smoove & Turrel</p></li>
    <li>
        <span><img src="goldmeister.jpg" ></span>
        <h4>Alles Gold</h4>
        <p>Goldmeister</p>
    </li>
    …
</ol>

CSS Counter mit counter-increment und counter-reset sind eine Alternative zur Strukturierung mit ol- und li-Elementen, die das zusätzliche Markup durch ol und li überflüssig machen.

Browser-Support für ol reversed

Das ewige Lied: Nicht IE10, nicht IE11, nicht Microsoft Edge. Firefox macht inzwischen mit, Chrome und Safari ohne Probleme.

  1. Internet Explorer
  2. Microsoft Edge
  3. Chrome
  4. Firefox
  5. Safari
  6. Opera