Lister i HTML

Vi omgir oss med lister hele livet. Handlelister, huskelapper, matoppsrkfiter, leselister og så videre. Nå skal vi se hvordan vi kan bruke lister for å tydeliggjøre budskapet vi ønsker å kommunisere.

Tre forskjellige listetyper

I {HTML} har vi tre forskjellige lister til disposisjon; uordnede lister <ul>, Ordnet (nummererte) lister <ol> og definisjonslister <dl>. Vi går først gjennom bruksområder for listetypene, deretter kombinerer vi dem. Du kan også utføre grafiske justeringer på listene ved bruk av {CSS}.

Anvendelsesområdene for disse listene er noe du må vurdere selv, men her er noen eksempler på bruk.

Uordnet liste

Ei uordnet liste, er som navnet tilsier, passende når rekkefølgen ikke spiller noen rolle. Hva er mer naturlig å bruke i dette listeeksemplet enn de tre forskjellige listene vi har til rådighet?

uordnet liste (punktliste)
ordnet (nummerert) liste
definisjonsliste

Som du ser, oppnår vi høyere grad av system og orden, men hva om vi ønsker å vise rekkefølgen?

Ordnet liste

Her spiller plutselig rekkefølgen en rolle. Et godt eksempel på ei liste der rekkefølgen teller, er en oppskrift.

Putt 1 liter melk i en bolle
Dander mel, gjær og sukker mens du rører forsiktig
Stek i ovnen på 225 grader i 20 minutter

Da kom svakheten i kokkekunst frem, for dette kan umulig bli noe godt, men poenget er at rekkefølgen er viktig Da er vi klare til å se på den siste formen for lister.

Definisjonsliste

Den som ikke vet hva ei definisjonsliste er, bør undersøke betydningen av ordet definisjon. La oss bruke denne listetypen for å illustrere de tre listetypene, hehe.

Uordnet liste: Ei uordnet liste er ei punktliste du kan bruke når rekkefølgen av data ikke er viktig.
Ordnet liste: Ei nummerert liste som brukes når rekkefølgen er viktig.
Definisjonsliste: Dette er ei definisjonsliste. Vi derfinerer noe.

Da skulle budskapet om lister være klekkelig klart, men vi kan også kombinere de tre listene!

Kombinasjon av lister

Eksempel på ei uordnet liste

uordnet liste (punktliste)
ordnet (nummerert) liste
definisjonsliste

Eksempel på ei ordnet liste

Putt 1 liter melk i en bolle
Dander mel, gjær og sukker mens du rører forsiktig
Stek i ovnen på 225 grader i 20 minutter

Ovenfor nøster vi ei ordnet og uordnet liste i ei definisjonsliste.

Lær mer om lister!

Hvis du vil lære mer om lister, anbefales W3Schools HTML-artikkel om lister. På den samme siden finner du forøvrig et spekket register over mange andre webrelaterte emner, og nettstedet er engelsk.