CSS, HTML & Javascript mit {stil}

HTML ol – nummerierte geordnete Listen

HTML ol (ordered list) erzeugt geordnete nummerierte Listen oder Aufzählungen mit einem Index aus li-Elementen, z.B. für die Bundesliga, Bestsellerlisten oder die Schritte eines Backrezepte.

HTML ol, ul: Aufzählung, Liste

Nummerierte Listen

Geordnet Listen stellen Zusammenhänge besser heraus als einfache Textabsätze, bringen eine automatische Reihenfolge in die einzelnen Elemente und setzen Priortäten. 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. Die Browser ziehen sie leicht nach rechts ein, um sie vom normalen Text abzusetzen.

  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>

Start und Unterbrechung

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.

Die meisten indexbasierten Listen fangen zwar mit 1 an, aber HTML ol hat mit start ein optionales Attribut für den Anfang des Index. Das erlaubt eine Unterbrechung der Aufzählung 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>

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-Attributen, sondern nur durch CSS geändert werden.

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 Reihenfolge. 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 HTML 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>

Als Zähler sind CSS Counter mit counter-increment und counter-reset Alternativen zur geordneten Liste mit HTML ol. CSS zählt mit counter auch Elemente, die nicht aufeinander folgen wie die li-Elemente innerhalb eines ol-Blocks.

Browser-Support für ol reversed

Das ewige Lied: nicht IE11. Firefox macht mit, Chrome und Safari ohne Probleme.

  1. Internet Explorer
  2. Microsoft Edge
  3. Chrome
  4. Firefox
  5. Safari
  6. Opera
Suchen auf mediaevent.de