Listor och menyer
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.
En stor fördel med att använda listor för att skapa menyer är att det ger goda möjligheter att följa den designprincip som brukar kallas graceful degradation, eller den närbesläktade principen progressive enhancement, som jag tänkte förklara lite närmare.
Graceful degradation
Graceful degradation är en designprincip, alltså ett sätt att förhålla sig till sitt projekt, som innebär att det du gör ska fungera bra även om mer avancerade funktioner faller bort.
Om du väljer att göra dina menyer som enkla listor med länkar, kommer de behålla sin funktionalitet och vara begripliga även om CSS eller javascript som använts i utformningen inte fungerar.
Principen innebär alltså att du alltid ska tänka på att den grundläggande funktionen ska finnas kvar, även när högre funktioner faller bort.
Progressive enhancement
Progressive enhancement är en princip som ligger nära idén om graceful degradation, men man tänker liksom åt andra hållet.
I stället för att utgå ifrån hur sajten ska vara när all avancerad funktionalitet är på plats utgår designern från att den från början ska vara bra i sitt enklaste skick och lägger sedan till mer avancerad funktionalitet. I praktiken kommer en sajt som är designad efter principen om progressive enhancement också följa principen om graceful degradation.
Tips för att göra snygga menyer av listor
Det finns många olika exempel och tutorials på webben för snygga menyer, baserade på listor, om du ser någonting du gillar kan du också i webbläsaren kolla källkoden och se om du kan låna idéer.
Ett mycket bra ställe för menybyggen är annars Listamatic, där du kan hitta massor av exempel med tydliga instruktioner av olika svårighetsgrad.
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:
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:
- Item
- Item
- 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.