Stil mit {stil}

Jan 2009

HTML-Tag ol • Geordnete Listen mit führenden Zahlen

Eine geordnete Aufzählung ist eine Liste mit Elementen, die in einer logischen Verbindung stehen und in einer besonderen Reihenfolge aufgezählt werden. Aufzählungen oder Listen gestalten den Text übersichtlicher und bringen Zusammenhänge deutlicher ins Schriftbild als einfache Text ab.

Das <ol>-Tag kennzeichnet den Anfang und das Ende einer geordneten Aufzählung und nummeriert jedes Element mit einem fortlaufenden Index beginnend mit der Zahl 1. Aber auch römische Ziffern oder die Buchstaben des Alphabets können benutzt werden. sätze.

Das Gegenstück zur geordneten Liste ist die ungeordnete Liste, die ein Listensymbol anstelle des Index vor jeden Listeneintrag setzt.

Formatierung ohne CSS

Die meisten Browser trennen die Aufzählung von den vorangehenden und folgenden Elementen durch einen Absatz, ziehen jeden Absatz um einige Pixel ein und setzen dem Absatz eine Index in Form einer ganzen Zahl ab 1 voran. Der Einzug vor dem Index kann durch CSS-Eigenschaften (margin, padding) für das ol-Element geändert werden.

Formatierung mit CSS

Stylesheets bieten Mechanismen, die speziell ungeordnete und geordnete Listen formatieren – z.B. die Darstellung römischer oder griechischer Ziffern, alternativer Listensymbole anstelle der Kugel oder die Unterdrückung der Listenkugeln. Auch der Einzug vor geordneten und ungeordneten Listen kann nicht mit HTML, sondern erst durch eine CSS-Eigenschaft geändert werden.

HTML-Tag <li> ... </li> • Listenelemente

Das <li>-Tag wird innerhalb von Aufzählungen benutzt, um die einzelnen Elemente der Aufzählung zu trennen. Das li-Tag ist sowohl in der geordneten Liste ol als auch in der ungeordneten Liste ul erforderlich.

Weder in geordneten noch in ungeordneten Aufzählungen unterliegt der Text in der Aufzählung Einschränkungen – so können die Texte z.B. beliebig lang sein. Innerhalb eines li-Elements dürfen alle HTML-Tags verwendet werden – vom p- oder ul/ul-Element bis hin zur Tabelle.

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

Beispiel: Verschachtelte geordnete Liste

<ol>
   <li>HTML strukturiert die Inhalte einer Seite
      <ul>
         <li>durch einfache Elemente wie Überschriften und Textabsätze</li>
         <li>durch verschachtelte Elemente wie Aufzählungen, 
         Definitionslisten und Tabellen</li>
      </ul>
   </li>
   <li>CSS formatiert die Inhalte einer Webseite
      <ul>
         <li>CSS ändert Schriften, Farben und Hintergrundfarben</li>
         <li>CSS ändert Größe und Lage der HTML-Blöcke</li>
      </ul>
   </li>
</ol>

1. HTML strukturiert die Inhalte einer Seite
   • durch einfache Elemente wie Überschriften und Textabsätze
   • durch verschachtelte Elemente wie Aufzählungen, Definitionslisten und Tabellen
2. CSS formatiert die Inhalte einer Webseite
   • CSS ändert Schriften, Farben und Hintergrundfarben
   • CSS ändert Größe und Lage der HTML-Blöcke

Attribute und Ereignisse für ol