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 användas för en hel del olika syften, t.ex. så är det nästan alltid en oordnad lista som ligger till grunden för menyer på webbsidor.
De vanligaste listtyperna
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 på den listraden. Utseendet för hur varje element visas är fullt styrbart ifrån CSS och man kan ändra såväl utseende på punkter, färger och mycket annat.
Oordnade listor heter inte så därför att deras innehåll presenteras huller om buller, snarare anger det hur innehållet i listan hör samman. Oordnade listor ska enbart användas för saker som inte har någon som helst inbördes ordning. Det vill säga det ska inte spela någon 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.
ul
För att skapa en oordnad lista använder vi oss av taggen <ul>, vilket är en förkortning för engelskans ”unordered list”. Detta gör att webbläsaren "fattar" att den ska sätta in en lista i din webbsida. Nu förväntar sig webbläsaren att man ska ange listinnehållet. Det gör man med en annan tag.
li
Varje delelement i en lista anges med taggen <li>, vilket är en förkortning för ”list item”. Det vill säga innehållet som ska stå på den raden i listan.
I stort sett kan listinnehållet bestå av alla tillgängliga HTML-element. Ofta är innehållet ren text, men det är inget som hindrar att det är bilder, filmer, eller vad som helst. Man kan även skapa listhierarkier, där man har listor inuti andra listor.
Exempel på en oordnad lista
En enkel lista skulle kunna läggas upp så här:
Vill man byta ut punkten mot något annat, eller för den delen att ta bort punkten, så är det relativt enkelt att åstadkomma med CSS. Men för tillfället nöjer vi oss med standardutseendet på listan.
Man ska självklart inte att använda li-element utanför list-element!
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äkert inte skulle bli glada om man bytte plats på deras placering i listan!
ol
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”, dvs en ordnad lista. Liksom med den oordnade listan så markerar man innehållet på varje listrad med taggen ”<li>”.
Exempel på en ordnad lista
Så här skulle en enkel ordnad lista kunna se ut.
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.
Övningar
Lägg till de taggar som behövs för att skapa de tabeller som efterfrågas (klicka på "Edit on CodePen" för att utföra övningen).