List-grunder

Listor är vanligt förekommande i dokument. Det kan t.ex. vara punktlistor eller uppräkningslistor. Eftersom dessa är så vanliga, har HTML en uppsättning taggar som används för att skapa listor. Listor har även blivit att användas för en hel del annat inom webbvärlden, det är nästan alltid en oordnad lista som ligger till grunden för menyer på webbsidor.

De vanligaste listorna

Här kommer vi att gå igenom de två vanligaste listtyperna. Den oordnade listan och den ordnade listan.

Oordnade listor

Oordnade listor visas oftast som en punktlista. Det vill säga varje element i listan föregås av en punkt, följt av innehållet för den raden. Utseendet för hur varje element visas är fullt styrbart ifrån CSS.

Oordnade listor ska enbart användas för saker som inte har någon som helst inbördes ordning. Det vill säga det spelar ingen roll i vilken ordning elementens visas upp. Om man byter plats på två element ska inte innehållets betydelse förändras på något vis.

För att skapa en oordnad lista använder vi oss av taggen <ul>, vilket är en förkortning för engelskans ”unordered list”. Varje delelement i en lista anges med taggen <li>, vilket är en förkortning för ”list item”, som kan tolkas som listinnehåll.

En enkel lista skulle kunna läggas upp så här:

<ul>
   <li>Taggar</li>
   <li>Attribut</li>
   <li>Länkar</li>
</ul>

I de flesta webbläsare skapar det här en punktlista som ser ut ungefär så här:

• Taggar
• Attribut
• Länkar

Att byta ut punkten mot något annat, eller för den delen att ta bort punkten, är relativt enkelt att åstadkomma med CSS. Men för tillfället nöjer vi oss med utseendet på listan

Ordnade listor

En annan listtyp är den ordnade listan. Innehållet i en sådan lista har ett inbördes förhållande. Om vi byter plats på två rader, skulle det förändra listans betydelse. Ett exempel på en ordnad lista skulle kunna vara ett matrecept. I sådana fall spelar det ofta roll att vi utför varje steg i rätt ordning. Ett annat exempel skulle kunna vara resultaten ifrån något sportevenemang, där deltagarna säker inte skulle bli glada om man bytte plats på deras placering i listan.

Det skiljer sig inte så mycket åt mellan hur man skapar oordnade och ordnade listor. Det enda som skiljer sig är vilken tagg som inleder listan. Här använder man sig av taggen ”<ol>”, vilket är en förkortning av ”ordered list” eller ordnad lista. Liksom med den oordnade listan så anger man varje listrad med taggen ”<li>”.

Så här skulle en enkel ordnad lista kunna se ut.

<ol>
   <li>Knäck äggen</li>
   <li>Häll i äggen i skålen</li>
   <li>Vispa äggen</li>
</ol>

De flesta webbläsare kommer att visa ovanstående exempel ungefär så här:

1. Knäck äggen
2. Häll i äggen i skålen
3. Vispa äggen

Med hjälp av CSS kan man enkelt styra hur uppräkningen ska se ut, t.ex. om man vill använda bokstäver istället. Men vissa saker kan man faktiskt styra redan med taggen. För det behöver vi dock lära oss om så kallade attribut.