Nummering van lijsten veranderen

In HTML heb je twee soorten lijsten: Geordende lijsten en ongeordende lijsten.
Een geordende lijst (tag: <ol> ... </ol>) begint met een cijfer of letter. Daarvoor zijn binnen HTML diverse stijlen beschikbaar: gewone cijfers, romeinse cijfers, hoofdletters, kleine letters.
En ongeordende lijst (tag: <ul> ... </ul>) begint met een bullet: een dikke stip (disc), rondje (circle), vierkantje (square).

Deze bladzijde gaat over geordende lijsten, en over de nummering in het bijzonder. In HTML hebben die een vast uiterlijk. De kleur is gelijk aan de tekst achter het nummer, de grootte wordt bepaald door de tekst.
Alle lijsten springen in. Dat is een vast gegeven in HTML.
Het is in HTML beperkt mogelijk om het uiterlijk van de nummering en de verdere opmaak van genummerde lijsten aan te passen. Met CSS heb je meer mogelijkheden. Hier staat beschreven hoe je dit aanpakt.

• Er worden drie items besproken:
  1. Aanpassen van nummering met HTML
  2. Aanpassen van nummering met CSS
  3. Andere opmaak kenmerken aanpassen
   
• De nummering kun je laten zien met Arabische cijfers 1, 2, 3, 4, enz., maar met romeinse cijfers (zowel in hoofdletters als in kleine letters) kan het ook.
  Alfanumerieke nummering (a, b, c, enz.) is ook mogelijk, zowel in hoofdletters als in kleine letters.
• Om dit aan te passen gebruik je het attribuut type in de <ol>-tag. Dit is ook te regelen met CSS. Daar heb je ook nog wat exotische nummeringen tot je beschikking, zoals Hebreeuws en Georgisch. Voor de meeste toepassingen zul je met het type-attribuut goed uit de voeten kunnen.
   
  De tabel hieronder toont de mogelijkheden.
   
  

  CSS-attribuut list-style	HTML type	Beschrijving
  none	(--)	Geen nummers. Deze worden dus weggelaten.
  decimal	1	Decimale getallen: 1, 2, 3, enz.
  decimal-leading-zero	(--)	Decimale getallen: 1, 2, 3, enz., met voorloop-nullen
  lower-roman	i	Romeinse cijfers, kleine letters
  upper-roman	I	Romeinse cijfers, hoofdletters
  lower-alpha	a	Alfanumeriek, kleine letters
  upper-alpha	A	Alfanumeriek, hoofletters
  lower-greek	(--)	Grieks alfabet, kleine letters. Vreemd genoeg staan Griekse hoofdletters hier niet bij!
  lower-latin	(--)	Alfanumeriek, kleine letters, uitgebreid met accenten: ä, á, à, enz.
  upper-latin	(--)	Alfanumeriek, hoofdletters, uitgebreid met accenten: Ä, Á, À, enz.
  hebrew	(--)	Hebreeuws
  armenian	(--)	Armeens
  georgian	(--)	Georgisch
  cjk-ideographic	(--)	Chinese karakters
  hiragana	(--)	Japanse Hiragana karakters
  katakana	(--)	Japanse Katakana karakters
  hiragana-iroha	(--)	Japanse Hiragana Iroha karakters
  katakana-iroha	(--)	Japanse Katakana Iroha karakters

  
   
• Als je een lijst wilt laten beginnen op een andere waarde dan 1, dan moet je het attribuut start meegeven in de <ol>-tag. start is de numerieke waarde van het eerste item in de lijst bijvoorbeeld:
   
  
  4. Code: <ol type="1" start="4">
  5. (enz.)
   
  of:  
  
  3. Code: <ol type="A" start="3">
  4. (enz.)
   
• De attributen start en type van de <ol>-tag zijn in HTML 4.01 deprecated, dat wil zeggen: afgeraden. In toekomstige versies van de HTML-standaard worden ze mogelijk niet meer ondersteund. In de HTML5-standaard komen de attributen start en type inderdaad niet meer voor. In plaats van type moet je nu CSS gebruiken. In plaats van start geeft je nu het eerste item in de lijst een nummer mee in het attribuut value:

  <ol start="7">
  <li> .... </li>
  <li> .... </li>
  (enz.)

  wordt in HTML5:

  <ol>
  <li value="7"> .... </li>
  <li> .... </li>
  (enz.)

Andere opmaak kenmerken aanpassen met CSS
Hieronder zie je twee dezelfde lijsten, alleen de plaats van de is anders. Er is gebruik gemaakt van het CSS-attribuut list-style-position, dat achtereenvolgens de waarde outside (default) en inside heeft. Hiermee bepaal je of de bullets onderdeel zijn van de lijst of er voor staan.

De eerste lijst heeft de class buiten, de tweede heeft de class binnen.

• Dit is list-item één.
  Dit is de tweede regel van list-item één.
• Dit is list-item twee.
  Dit is de tweede regel van list-item twee.
• Dit is list-item drie.
  Dit is de tweede regel van list-item drie.

• Dit is list-item één.
  Dit is de tweede regel van list-item één.
• Dit is list-item twee.
  Dit is de tweede regel van list-item twee.
• Dit is list-item drie.
  Dit is de tweede regel van list-item drie.

In beide gevallen hier boven zijn de lijsten nog steeds ingesprongen. Als je de nummers helemaal tegen de linkermarge van de bladzijde wilt hebben moet je het CSS-attribuut margin inzetten.
De afstand tussen het nummer en de tekst verander je met padding.

• Dit is list-item één.
  Dit is de tweede regel van list-item één.
• Dit is list-item twee.
  Dit is de tweede regel van list-item twee.
• Dit is list-item drie.
  Dit is de tweede regel van list-item drie.

De lijst hierboven heeft buitenmarges rondom (margin) van 25 pixels en linker- en rechter binnenmarge (padding) van 5 pixels. De binnenmarges boven en onder zijn 0. Op deze manier maak je de witruimte tussen de lijst en de tekst. Een en ander is vastgelegd in de class marges in het style-block, zie hier onder.

Code van het Style-block op deze bladzijde.
<style>
ul.buiten {list-style-position:outside;list-style:upper-alpha}
ul.binnen {list-style-position:inside;list-style:upper-alpha}
ul.marges {margin:25px; padding:0 5px; list-style-position:outside;list-style:upper-alpha}
</style>

Opmerking:
 
De nummering van ongeordende lijsten kan ook worden aangepast met CSS. Je hebt dan wat meer mogelijkheden dan die HTML (sec) biedt, bijvoorbeeld een GIF-plaatje als bullet.
Zie het item "Bullets van lijsten veranderen".