HTML

Listor

I HTML finns det tre olika typer av listor: punktlistor (oordnade listor), numrerade listor (ordnade listor) och definitionslistor.

Listor används vanligtvis för att lista information. Ett vanligt användningsområde är att göra menyer till webbsajter. Det överväldigande flertalet av olika menyer du stöter på på webben är faktiskt helt vanliga oordnade listor med länkar i, även om punkterna är borttagna och listan kanske är lagd på tvären med hjälp av CSS.

De olika listtyperna

Oordnad lista

En oordnad lista är en vanlig punktlista, och skapas med elementet <ul>. Detta är en förkortning av unordered list.

Inuti <ul>, alltså mellan <ul> och </ul> placerar du dina listpunkter, det som ska vara i listan, med elementet <li>, list item. Koden till en oordnad lista med tre punkter skulle alltså kunna se ut så här:

<ul>
   <li>Item</li>
   <li>Item</li>
   <li>Item</li>
</ul>
och ge resultatet:
  • Item
  • Item
  • Item

I varje <li> kan du lägga in text, andra taggar, bilder eller vad som helst. Vanligt är att listan består av länkar. Listor är helt enkelt ett bra sätt att ställa upp och organisera innehåll.

En (oordnad) lista med länkar till tre populära webbtjänster skulle kunna se ut som följer.

<ul>
   <li><a href="http://facebook.com">Facebook</a></li>
   <li><a href="http://twitter.com">Twitter</a></li>
   <li><a href="http://google.se">Google</a></li>
</ul>
Och ge resultatet:

Listans utseende, till exempel vilken sorts punkter som ska användas eller om den ska visas på "fel" ledd, kan sedan ändras med CSS…

Ordnad lista

En ordnad lista är i HTML det samma som en numrerad lista. Som standard används vanliga arabiska siffror (1, 2, 3), men det kan ändras i efterhand, precis som man kan ändra utseendet på oordnade listor.

Den ordnade listan definieras med elementet <ol>, ordered list. I övrigt gör du precis som med oordnade listor.

<ol>
   <li>Item</li>
   <li>Item</li>
   <li>Item</li>
</ol>
ger:
  1. Item
  2. Item
  3. Item

Bortsett från att en ordnad lista är just ordnad/numrerad fungerar allt likadant som med oordnade/punktlistor.

Definitionslista Beskrivningslista

En definitionslista beskrivningslista (description list) skiljer sig från de två tidigare sorterna genom att den innehåller två olika nivåer, en term och en definition.

En definitionslista är en speciell typ av lista, med två nivåer, En term som ska definieras beskrivas och en definition beskrivning av denna term.

Själva listan definieras med elementet <dl>, definition description list (namnbyte i HTML 5). I denna finns det två typer av listelement, termen <dt> och definitionen beskrivningen <dd>. Termen är här det som ska definieras beskrivas och definitionen beskrivningen av termen.

En definitionslista beskrivningslista med tre termer och tre definitioner beskrivningar skulle kunna skrivas så här:

<dl>
   <dt>Term</dt>
   <dd>Beskrivning</dd>
   <dt>Term</dt>
   <dd>Beskrivning</dd>
   <dt>Term</dt>
   <dd>Beskrivning</dd>
</dl>
och visas som:
Term
Beskrivning
Term
Beskrivning
Term
Beskrivning

Namnbyte i HTML 5

Eftersom man menar att begreppet definition list har varit svårt för folk att förstå, har man bytt ut namnet på den här typen av lista i HTML 5. <dl> ska inte längre stå för definition list utan för description list, beskrivningslista. Detta innebär inte mycket ren praktiskt, men kanske är det lättare att förstå begreppen term och beskrivning än term och definition.

Utöver detta kan du göra samma saker med <dt> och <dd> som med <li> i de andra listtyperna.

Nästlade listor

Det är fullt rimligt att ha flera listnivåer i en lista. Det gör man helt enkelt genom att lägga en lista inuti en <li> eller motsvarande. Det går tekniskt bra att lägga en lista i en <dt> eller <dd>, men det kommer att resultera i en underlig lista.

Listor som ligger i varandra på det här sättet kallas nästlade, nested på engelska.

Om jag placerar en ordnad lista i en annan ordnad lista kan det se ut så här:

<ol>
   <li>Item
      <ol>
         <li>Item</li>
         <li>Item</li>
         <li>Item</li>
      </ol>
   </li>
   <li>Item</li>
   <li>Item</li>
</ol>
och resultera i det här:
  1. Item
    1. Item
    2. Item
    3. Item
  2. Item
  3. Item

Det här går att bygga ut, man kan lägga en lista i en lista i en lista och så vidare. Det finns ingen gräns för hur många listor man kan lägga i en annan lista. Man får hålla tungan rätt i mun så att man inte tappar bort sig i koden. Listorna man lägger i andra listor behöver inte vara av samma slag, utan man kan kombinera hur som helst.

Ett vanligt användningsområde för nästlade listor är i menyer, där man ibland kan behöva fler nivåer.