HTML/Textstrukturierung/ol

Aus SELFHTML-Wiki
< HTML‎ | Textstrukturierung(Weitergeleitet von Ol)
Wechseln zu: Navigation, Suche

Das Element ol bezeichnet eine geordnete oder nummerierte Liste, englisch ordered list, also eine Liste, bei der die Reihenfolge der Elemente von Bedeutung ist.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • HTML 2.0
  • XHTML 1.0
  • HTML5

<ol> leitet eine nummerierte Liste ein (ol = ordered list = nummerierte Liste). Mit <li> beginnt ein neuer Punkt innerhalb der Liste (li = list item = Listeneintrag). </li> beendet den Listeneintrag, </ol> die Liste.

Das Verschachteln von nummerierten Listen ist ebenfalls möglich, bewirkt aber keine Gesamtnummerierung. Automatische Nummerierungshierarchien wie 1, 1.1, 1.1.1, sind mit HTML allein nicht möglich. Dazu bedarf es der Unterstützung von CSS (siehe Listen mit hybrider Nummerierung formatieren).


Beispiel ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Nummerierte Liste definieren</title> </head> <body> <h1>To-do-Liste</h1> <ol> <li>bei Anette vorbeischauen</li> <li>bei Bert vorbeischauen</li> <li>bei Christine vorbeischauen</li> <li>bei Dieter vorbeischauen</li> </ol> </body> </html>

Nummerierung beeinflussen[Bearbeiten]

Sie können den Startwert einer Liste festlegen und bei einem beliebigen Listenelement neu setzen. Dazu nutzen Sie das Attribut start des ol-Elementes. Erlaubte Werte für dieses Attribut sind ganze Zahlen. Um die Nummerierung in der Liste zu ändern, verwenden Sie das Attribut value im li-Element.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • HTML 3.2
  • HTML5
Beispiel ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Nummerierung beeinflussen</title> </head> <body> <h1>Listen individuell zählen lassen</h1> <h2>Startwert einer Liste setzen</h2> <ol start="3"> <li>Schweiz</li> <li>Österreich</li> <li>Liechtenstein</li> </ol> <h2>Nummerierung des Listenelementes setzen</h2> <ol start="17"> <li>Siebzehn</li> <li>und</li> <li value="4">Vier</li> <li>Wer gewinnt?</li> </ol> </body> </html>
Die erste Liste beginnt bei 3 an zu zählen. Die zweite Liste fängt bei 17 an, das zweite Element zählt normal weiter (18). Beim dritten Element geht es mit 4 weiter, da das value-Attribut des li-Elementes gesetzt ist, das vierte Element zählt wieder um eins hoch.
Beachten Sie: Die hier beschriebenen Attribute wurden mit HTML 3.2 eingeführt, HTML 4.01 kennzeichnete sie als veraltet - was mit HTML5 wieder rückgängig gemacht wurde.

Zählrichtung umkehren[Bearbeiten]

HTML5 ermöglicht es zusätzlich, die Zählrichtung umzukehren wie bei der Bekanntgabe von Gewinnern bei einer Verlosung häufig praktiziert. Für den Startwert wird das start-Attribut des ol-Elementes genutzt, das Rückwärtszählen durch das Attribut reversed veranlasst.

  • HTML5
  • Opera
  • Firefox
  • Chrome

Es kann dabei auf folgende Weise angegeben werden:

  • reversed="reversed"
  • reversed=""
  • reversed
Beispiel ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Listen abwärts zählen lassen</title> </head> <body> <h1>Abwärts zählen</h1> <ol start="3" reversed="reversed"> <li>Dreirad</li> <li>Fahrrad</li> <li>Motorrad</li> </ol> </body> </html>
Die Nummerierung beginnt mit 3 und endet bei 1.

Listen mit CSS formatieren[Bearbeiten]

Wie eine Liste genau dargestellt wird, können Sie mit HTML nicht beeinflussen. Die Browser benutzen Default-Formatierungen, um Listen darzustellen. Mit Stylesheets (CSS) können Sie ganze Listen und ihre Listenpunkte jedoch nach Wunsch formatieren. Maßgeblich sind im hier beschriebenen Zusammenhang die CSS-Eigenschaften zur:

und auch die allgemeinen Eigenschaften:

Beispiel ansehen …
<!doctype hmtl> <html> <head> <meta charset="utf-8"> <title>Listen mit CSS formatieren</title> <style> ul { list-style-type: disc; color: red; font-weight: bold; } ol { list-style-type: upper-roman; font-weight: bold; } ol > li:first-child { color: blue; } ol > li:nth-child(2) { color: maroon; } ol > li:nth-child(3) { color: olive; } dl { font-size: 0.7em ; font-family: Verdana,Arial,sans-serif; } </style> </head> <body> <h1>Listen mit CSS formatieren</h1> <h2>Aufzählungsliste</h2> <ul> <li>Probieren geht über Studieren</li> <li>Liebe geht über Triebe</li> <li>Tante fällt über Kante</li> </ul> <h2>Nummerierte Liste</h2> <ol> <li>bei Anette vorbeischauen</li> <li>bei Bianca vorbeischauen</li> <li>bei Christine vorbeischauen</li> </ol> <h2>Definitions- bzw. Beschreibungsliste</h2> <dl> <dt>AA</dt> <dd>Auto Answer (Modem)</dd> <dt>AAE</dt> <dd>Allgemeine Anschalte-Erlaubnis</dd> <dt>AARP</dt> <dd>Appletalk Address Resolution Protocol</dd> </dl> </body> </html>
Im Beispiel wird für eine Aufzählungsliste (<ul>…</ul>) bestimmt, dass sie ein Disk-Symbol als Bullet-Zeichen erhält, fett und in roter Farbe erscheint. Für eine nummerierte Liste (<ol>…</ol>) wird bestimmt, dass sie in römischen großen Ziffern zählt, und dass ihre Einträge fett dargestellt werden. Ihre einzelnen Listenpunkte werden zudem in unterschiedlichen Farben dargestellt. Für eine Definitionsliste (<dl>…</dl>) wird eine kleinere Schriftgröße als normal und eine Schriftart festgelegt.

Siehe auch[Bearbeiten]



Referenz:

  • Referenz: ol
  • Referenz: li

Weblinks[Bearbeiten]