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.

  1. Putt 1 liter melk i en bolle
  2. Dander mel, gjær og sukker mens du rører forsiktig
  3. 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
  1. Putt 1 liter melk i en bolle
  2. Dander mel, gjær og sukker mens du rører forsiktig
  3. 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.

Del denne artikkelen

Del og favoriser

For en oversikt over alt innhold, se sitemap