html 5, een lijst in omgekeerde volgorde

Een van de nieuw geïntroduceerde onderdelen van html 5 is de mogelijkheid om lijsten te laten verschijnen in een omgekeerde volgorde. Deze zijn hetzelfde als gewone geordende lijsten, maar in plaats van verder te nummeren vanaf 1, telt deze lijst af naar 1. Dit kan gebruikt worden om bijvoorbeeld een top 10 van beste films af te laten tellen van 10 naar 1. Een zogenaamde countdown.

Dit artikel is een vertaling van reverse ordered lists van whatwg.org

Het ‘value’ element

In eerdere versies van html kon een omgekeerde lijst alleen maar bereikt worden met het toevoegen van het ‘value’ attribuut aan ieder ‘li’-element. Dat ging bijvoorbeeld op de volgende manier.

Top 5 TV Series

  
Friends
  
24
  
The Simpsons
  
Stargate Atlantis
  
Stargate SG-1

Het probleem met deze benadering is dat het handmatig aanmaken van waarden nogal tijdrovend is om te schrijven en te onderhouden. Daarnaast is het attribuut ‘value’ niet toegestaan in de strikte versies van html 4.01 en xhtml 1. html 5 staat dit attribuut overigens wel weer toe.

De nieuwe code in html 5

De nieuwe code is vrij eenvoudig in te passen. Het enige wat je moet doen is het attribuut ‘reversed’ toevoegen aan het ‘ol’-element. Daarnaast is er de mogelijkheid om een beginwaarde toe te voegen. Wanneer je geen beginwaarde toevoegt dan wordt er automatisch een lijst opgemaakt die aftelt naar 1. Voorbeeld:

Greatest Movies Sagas of All Time

  
Police Academy (Series)
  
Harry Potter (Series)
  
Back to the Future (Trilogy)
  
Star Wars (Saga)
  
The Lord of the Rings (Trilogy)

Aangezien er in het voorbeeld 5 items zijn zal de lijst van 5 naar 1 tellen.

Boolean

Aangezien ‘reversed’ een boolean is, volstaat het om alleen ‘reversed’ te plaatsen in de code. Een Boolean is een bepaald type variabele, en de waardes kun je vergelijken met zwanger zijn: false, true of undefined. Er is geen middenweg. Boolean zijn uitermate geschikt om waardes te controleren. In xhtml schrijf je daarom het atribuut ‘reversed=”reversed”‘.

Het start-attribuut

Het attribuut ‘start’ kan worden gebruikt als je een startwaarde vast wil leggen. Daarnaast kun je een ‘value’ attribuut toevoegen. Normaal gesproken wordt er steeds een lagere waarde aan het volgende item gegeven, steeds met een minder. Het volgende voorbeeld start bij 100, maar na een paar items gaat de lijst naar de top 3.

Top 100 Logical Fallacies Used By Creationists

  
False Dichotomy
  
Appeal to Ridicule
  
Begging the Question (Circular Logic)
  
  
Strawman
  
Bare Assertion Fallacy
  
Argumentum ad Ignorantiam

Alle voorbeelden zijn te zien op deze pagina. Met browsers die html 5 al ondersteunen kun je de voorbeelden juist zien.