Naar de inhoud
Gratis naslagwerk over HTML
HTML leren en naslaan
Naslag / Lijsten

Het element <ol>

Het <ol>-element van HTML representeert een geordende lijst van items — meestal weergegeven als een genummerde lijst.

Code
<ol>
  <li>Mix flour, baking powder, sugar, and salt.</li>
  <li>In another bowl, mix eggs, milk, and oil.</li>
  <li>Stir both mixtures together.</li>
  <li>Fill muffin tray 3/4 full.</li>
  <li>Bake for 20 minutes.</li>
</ol>
Resultaat in de browser

Attributen

Dit element accepteert ook de globale attributen.

compact Verouderd Niet-standaardDit booleaanse attribuut geeft aan dat de lijst in een compacte stijl weergegeven moet worden. De interpretatie van dit attribuut is browserspecifiek. Gebruik in plaats daarvan CSS: om een vergelijkbaar effect te krijgen als het compact-attribuut kan de CSS-eigenschap line-height gebruikt worden met een waarde van 80%.
reversedDit booleaanse attribuut geeft aan dat de items van de lijst in omgekeerde volgorde staan. Items worden dan van hoog naar laag genummerd.
startEen geheel getal om het tellen van de lijstitems bij te beginnen. Altijd een Arabisch cijfer (1, 2, 3, enzovoort), zelfs wanneer het nummeringstype type letters of Romeinse cijfers is. Om bijvoorbeeld de nummering van elementen te laten beginnen bij de letter "d" of het Romeinse cijfer "iv", gebruikt u start="4".
type

Stelt het nummeringstype in:

  • a voor kleine letters
  • A voor hoofdletters
  • i voor kleine Romeinse cijfers
  • I voor hoofdletter Romeinse cijfers
  • 1 voor cijfers (standaard)

Het opgegeven type wordt gebruikt voor de hele lijst, tenzij een ander type-attribuut gebruikt wordt op een omsloten <li>-element.

Opmerking

Tenzij het type van het lijstnummer ertoe doet (zoals in juridische of technische documenten waarin naar items verwezen wordt via hun nummer/letter), gebruikt u beter de CSS-eigenschap list-style-type.

Gebruiksnotities

Doorgaans worden items van een geordende lijst weergegeven met een voorafgaande marker, zoals een cijfer of letter.

De elementen <ol> en <ul> (of het synoniem <menu>) kunnen zo diep genest worden als gewenst, afwisselend tussen <ol> en <ul> (of <menu>) naar behoefte.

De elementen <ol> en <ul> representeren beide een lijst van items. Het verschil is dat bij het <ol>-element de volgorde betekenisvol is. Bijvoorbeeld:

  • Stappen in een recept
  • Routebeschrijvingen stap voor stap
  • De lijst met ingrediënten in afnemende verhouding op voedingswaarde-etiketten

Om te bepalen welke lijst u moet gebruiken, probeert u de volgorde van de lijstitems te wijzigen; als de betekenis verandert, gebruikt u het <ol>-element — anders kunt u <ul> gebruiken, of <menu> als uw lijst een menu is.

Voorbeelden

Basisvoorbeeld

HTML
<ol>
  <li>Fee</li>
  <li>Fi</li>
  <li>Fo</li>
  <li>Fum</li>
</ol>

Resultaat

Resultaat in de browser

Romeinse cijfers als type gebruiken

HTML
<ol type="i">
  <li>Introduction</li>
  <li>List of Grievances</li>
  <li>Conclusion</li>
</ol>

Resultaat

Resultaat in de browser

Het start-attribuut gebruiken

HTML
<p>Finishing places of contestants not in the winners' circle:</p>

<ol start="4">
  <li>Speedwalk Stu</li>
  <li>Saunterin' Sam</li>
  <li>Slowpoke Rodriguez</li>
</ol>

Resultaat

Resultaat in de browser

Geneste lijsten

HTML
<ol>
  <li>first item</li>
  <li>
    second item
    <!-- closing </li> tag is not here! -->
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
  </li>
  <!-- Here's the closing </li> tag -->
  <li>third item</li>
</ol>

Resultaat

Resultaat in de browser

Ongeordende lijst binnen geordende lijst

HTML
<ol>
  <li>first item</li>
  <li>
    second item
    <!-- closing </li> tag is not here! -->
    <ul>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ul>
  </li>
  <!-- Here's the closing </li> tag -->
  <li>third item</li>
</ol>

Resultaat

Resultaat in de browser

Technische samenvatting

Content categories Flow content, en als de kinderen van het <ol>-element ten minste één <li>-element bevatten, palpable content.
Toegestane inhoud Nul of meer <li>-, <script>- en <template>-elementen.
Weglaten van tag Geen, zowel de begin- als eindtag zijn verplicht.
Toegestane ouders Elk element dat flow content accepteert.
Impliciete ARIA-rol list
Toegestane ARIA-rollen directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar, tree
DOM-interface HTMLOListElement

Zie ook

Verwante elementen