Ster inactiefSter inactiefSter inactiefSter inactiefSter inactief
 

De meeste html-ontwikkelaars maken handig gebruik van lijsten. Maar wie weet zit in het onderstaande nog wat nieuws.

Het eerste type lijst is de zogenaamde Ordered List (genummerde lijst). Dit is een lijst, waarin alle opgesomde items worden getoond met een oplopend volgnummer:

  1. Selecteer het gewenste product
  2. Geef aan hoeveel u ervan wilt bestellen
  3. Klik op 'Afrekenen'

Toon/verberg html5 code

Wil je de volgorde van de items wijzigen, dan zul je in de code de items hoger of lager moeten plaatsen.

Voor de weergave van de nummering worden standaard cijfers gebruikt. Daar is nog wel wat variatie in aan te brengen:

  • decimal (default): 1, 2, 3, ...
  • lower-alpha: a, b, c, ...
  • upper-alpha: A, B, C, ...
  • lower-roman: i, ii, iii, ...
  • upper-roman: I, II, III, ...

Toon/verberg html5 code

Met CSS3 daarentegen zijn de opties veel exotischer. Het voorbeeld hieronder is weergegeven als inline CSS, maar uiteraard kun je dit ook in een CSS-bestand opnemen.

Toon/verberg html5 code

Op deze manier kun je ook aangeven:

  • armenian - Armeense nummering
  • cjk-ideographic - Chinees/Japans/Koreaans/Vietnamees
  • decimal - Genummerd
  • decimal-leading-zero - Genummerd met voorloopnul
  • georgian - Georgisch
  • hebrew - Hebreeuws
  • hiragana - Japans, afwijkend van Kanji
  • hiragana-iroha - Japans, traditioneel
  • katakana Japans, afgeleid van Kanji
  • katakana-iroha - Japans, traditionele variant van katakana
  • lower-alpha / lower-latin - Alfabetisch, kleine letters
  • lower-greek - Grieks, kleine letters
  • lower-roman - Romeins, kleine letters
  • upper-alpha / upper-latin - Alfabetisch, hoofdletters
  • upper-roman - Romeins, hoofdletters

Iedere keer wanneer je een nieuwe <ol> begint, dan begint de nummering opnieuw. Soms wil je echter een lijst kunnen onderbreken om daarna verder te gaan met het volgende nummer. Helaas lukt dat niet geheel geautomatiseerd, maar door zelf een nummer mee te geven, kun je in elk geval bepalen wat het nummer van het volgende item wordt.

  1. En doe daarna nog iets belangrijks
  2. En nog iets

Toon/verberg html5 code

Daarnaast is het ook nog mogelijk om de nummering om te draaien. Let wel: De items blijven wel in de zelfde volgorde staan.

  1. Selecteer het gewenste product
  2. Geef aan hoeveel u ervan wilt bestellen
  3. Klik op 'Afrekenen'

Toon/verberg html5 code

Een volgende optie is om - met behulp van wat css - genummerde lijsten te maken met subnummering:

  1. Hoofdstuk I
    1. Hoofdstuk Ia
    2. Hoofdstuk Ib
  2. Hoofdstuk II
    1. Hoofdstuk IIa
    2. Hoofdstuk IIb
    3. Hoofdstuk IIc

Toon/verberg html5 code

Behalve de Ordered List kennen we natuurlijk ook de Unordered List, de ongesorteerde lijst. De werking daarvan is hetzelfde: Plaats alle items als <li> tussen <ul>-tags.

  • Boodschappen halen
  • Auto naar de garage
  • Rekeningen betalen

Toon/verberg html5 code