HTML-Tag <ol>

❮ Vorige Nächste ❯

HTML Tag <ol> wird für die Erstellung einer geordneten Liste, die Elemente mit einer bestimmten Reihenfolge enthält, verwendet.

Jedes Element der nummerierten Liste beginnt mit dem Starttag <li> und endet mit dem Endtag </li>. Das Tag <li> kann neben dem Text auch andere HTML-Elemente (Listen, Bilder, Kopfzeile, Absätze usw.) enthalten.

Als Nummerierungselemente können folgende Werte vorkommen: Arabische Ziffer (1, 2, 3, ...); Lateinische Großbuchstaben (A, B, C, ...); Lateinische Kleinbuchstaben (a, b, c, ...); Römische Großzahlschrift (I, II, III, ...); Römische Kleinzahlschrift (i, ii, iii, ...). Für die Bestimmung des Typs der nummerierten Liste wird das Attribut type verwendet.

Wenn man keine zusätzliche Attribute eingibt, wird voreingestellt der Inhalt des Tages <ol> mit arabischen Zahlen nummeriert.

Wenn zum Tag <ol> die CSS-Stile angewendet werden, dann erben die im Tag </li> eingeschlossene Elemente diese Stile.

Syntax

Das Tag <li> wird gepaart verwendet, das Endtag ist obligatorisch.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
  </head>
  <body>
    <ol>
  	  <li>Appetitanreger</li>
	  <li>Warme Mahlzeit</li>
 	  <li>Salate</li>
	</ol>

	<ol start="50">
  	  <li>Erfrischungsgetränke</li>
 	  <li>Heiße Getränke</li>
  	  <li>Speiseeis</li>
	</ol>

	<ol type="A">
 	  <li>Coca-Cola</li>
 	  <li>Eistee</li>
	  <li>Fanta</li>
	</ol>
 </body>
</html>

Versuch es selber!

Ergebnis

In diesem Beispiel haben wir das Attribut start mit dem Wert “50” verwendet.

CSS-Eigenschaften

Für die Typbestimmung von nummerierenden Elementen kann man statt des Attributes type die CSS-Eigenschaft list-style-type verwenden.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
  </head>
  <body>
     <h2>Beispiel einer nummerierten Liste</h2>
       <ol style="list-style-type: upper-roman">
          <li>Erfrischungsgetränke</li>
          <li>Heiße Getränke</li>
          <li>Speiseeis</li>
      </ol>
    
      <ol style="list-style-type: hebrew">
           <li>Coca-Cola</li>
           <li>Fanta</li>
           <li>Eistee</li>
       </ol>

      <ol style="list-style-type: decimal">
          <li>Coca-Cola</li>
           <li>Fanta</li>
           <li>Eistee</li>
       </ol>
   </body>
</html>

Versuch es selber!

Ergebnis

Attribute

Attribut	Wert	Beschreibung
compact	compact	Es reduziert die Ränder und den Abstand zwischen den Zeilen. Es wird in HTML5 nicht unterstützt. Stattdessen empfehlen wir Ihnen, CSS-Eigenschaft line-height zu verwenden.
reversed	reversed	Es bestimmt, dass die Elemente der Liste in absteigender Reihenfolge (statt der aufsteigenden Reihenfolge) vorkommen müssen.
start	number	Es definiert die Zahl, von der die nummerierte Liste anfängt. Der Wert muss eine Ganzzahl sein, es können auch negative Werte verwendet werden. Bei der Verwendung von Buchstaben (type = "A" und type = "a") entspricht die Zahl, die im Wert des Attributes angegeben ist, der Artikelnummer der Buchstabe im Alphabet. Zum Beispiel wird start = "5" der Buchstabe "E" entsprechen und die Liste wird mit "E" anfangen. Wenn der Wert start = "27" eingestellt ist, ist die Liste zweisprachig ("27" = "AA", "28" = "AB", "29" = "AC"...).
type	1 A a I i	Es bestimmt den Typ des Listenmarkers.