Jag bloggar numera på http://blog.dileno.com ».

Att använda rätt lista till rätt ändamål

en XHTML-artikel av Martin S., publicerad den 2 maj 2005
När man vill presentera något i punktform så är det listor man ska använda sig av – de är helt enkelt gjorda för det. Problemet är dock att det finns ett flertal olika typer av listor att välja mellan, och det kan ibland vara svårt att avgöra vilken typ av lista man vill använda för vilken text. I denna artikel ska vi närmre titta på vad det är för olika listor som finns och hur de används.

Fem listtyper


Det finns fem typer av listor. Tre som används mer frekvent, och två som används sällan. Jag kommer att ta upp de tre mer frekvent använda listtyperna först, för att senare i artikeln gå in på vilka de två andra listtyperna är.

Varje punkt i en lista kallas för ett listelement. Listelementet är alltså texten som finns i en punkt i listan. Fyra av listtyperna använder sig av elementet li när man ska skapa ett nytt listelement. li är en förkortning för list item. Man börjar med en starttagg, skriver listelementet, och avslutar med en sluttagg. Exempel:

<li>Här är ett listelement.</li>
Listtyperna som finns är dessa:
  • - oordnade listor
  • - ordnade listor
  • - definitionslistor
  • - menylistor
  • - kataloglistor

Den listtyp som inte använder sig av li-elementet är definitionslistan. Den går vi in på senare.

Oordnade listor


När man vill skriva upp listelement som inte kräver nån speciell inbörders ordning så använder man sig av oordnade listor.

En oordnad lista börjar med HTML-elementet ul som står för unordered list. Till varje listelement använder vi li-elementet. Ett exempel på en oordnad lista kan vara det man behöver för att kunna steka köttbullar:

<ul>
<li>stekpanna</li>
<li>spis</li>
<li>margarin</li>
<li>köttbullar</li>
</ul>

Den oordnade listan kommer då att se ut så här:

exempel på oordnad lista

Oordnade listor kan komma till användning när man t.ex. vill lista ett flertal länkar till artiklar man har på sin sajt. (Jag använder själv en oordnad lista för att visa artikellänkar i artikelarkivet.)

Ordnade listor


Vill du i stället skriva upp listelement i en särskild ordning, så är ordnade listor det du ska använda dig av. Till skillnad från oordnade listor så använder man HTML-elementet ol i stället, som står för ordered list. En ordnad listform av exempellistan skulle kunna se ut så här:

<ol>
<li>Ta fram stekpannan</li>
<li>Ställ den på spisen</li>
<li>Smält margarin i stekpannan</li>
<li>Stek köttbullarna</li>
</ol>

I sitt grundutförande ser en ordnad lista ut på följande sätt, där varje listelement föregås av en siffra för att visa att det är en ordnad lista:

exempel på ordnad lista

Definitionslistor


Den tredje typen av lista är definitionslistan. Den är lite annorlunda jämfört med ordnade och oordnade listor. En definitionslista passar bra för ett ändamål där man behöver ge en förklaring till en term. HTML-element som används i en definitionslista är startelementet dl (definition list), definitionselementet dt (definition term) och beskrivningselementet dd (definition description). I dt-elementet skriver man själva termen som ska beskrivas, och i dd-elementet så beskriver man termen. Om jag skulle beskriva vad fotboll är, så kan jag använda en definitionslista på följande sätt:

<dl>
<dt>Fotboll</dt>
<dd>Ett bollspel mellan två lag. Det lag som vid matchens slut gjort flest mål har vunnit.</dd>
</dl>

Som du ser används en sluttagg till respektive element här också. Resultatet av ovanstående kod blir denna lista:

exempel på definitionslista

Noterbart är att li-elementet inte används här. li-element finns inte över huvud taget i definitionslistor.

Behöver man så kan man beskriva fler termer inom samma lista också. Då är det bara att lägga till nya dt- och dd-element, fortfarande mellan dl-starttaggen och dl-sluttaggen:

<dl>
<dt>Fotboll</dt>
<dd>Ett bollspel mellan två lag. Det lag som vid matchens slut gjort flest mål har vunnit.</dd>
<dt>Ishockey</dt>
<dd>Lagspel som spelas på is, med skridskor och klubba. Det lag som vid matchens slut gjort flest mål har vunnit.</dd>
</dl>

Då kommer den nya listan i stället att se ut så här:

exempel 2 på definitionslista

Ett exempel på en definitionslista som jag använder mig av, är nyheterna på förstasidan. Om du tittar i källkoden kommer du att se att mina nyhetsrubriker är (definitions)termer och själva nyhetsinnehållet (definitions)beskrivningar.

Meny- och kataloglistor


De två mindre använda listtyperna är menylistan och kataloglistan. Den första är avsedd att användas för menyer och den andra för att exempelvis lista filer.

Menylistan startelement är menu, och kataloglistans startelement dir. Respektive lista skiljer sig otroligt lite från en vanlig oordnad lista. Den enda skillnaden jag sett idag är att meny- och kataloglistor hamnar lite längre in (mer åt höger än övrigt innehåll på samma sida) på sidan i webbläsaren Opera 7 – annars visas de precis som en oordnad lista (i exempelvis Firefox 1.0 och IE 6). Här kommer exempelkod:

<menu>
<li>Meny-alternativ #1</li>
<li>Meny-alternativ #2</li>
<li>Meny-alternativ #3</li>
</menu>

<dir>
<li>index.htm</li>
<li>style.css</li>
<li>default.aspx</li>
</dir>

Rätt lista till rätt ändamål


Det är få personer som kommer att slå dig på fingrarna om du exempelvis använder dig av en oordnad lista för listelement som egentligen kan skrivas i ordnad form, men för standardens och din egen skull så bör du tänka igenom vad för innehåll en lista egentligen innehåller – och i så fall anpassa typen av listan för det innehållet. Du lär dig på så sätt att använda listor rätt, och det blir lättare för webbläsare att tolka dina sidor korrekt. Kort sagt ger man sig själv en tjänst om man följer standarden – det slutar med att ditt innehåll visas precis som du vill det, och det är ju så du vill ha det.