Listor

XHTML-guide

Artiklar

I den här artikeln lär du dig använda oilika sorts listor i XHTML: onumrerad lista (ul), numrerad lista (ol) och en definitionslistor (dl).

När använder man listor?

En lista är inte märkvärdigare än en lista i vanliga livet - den används helt för att lista olika saker och kan vara numrerad (ol) eller icke numrerad (ul). Ett exempel där jag använder listor är i innehållsmenyn till höger här på Webbdesigna.se. Det är helt logiskt eftersom det inte vore semantiskt korrekt att märka upp länkarna som exempelvis stycken.

Onumrerad lista

För att använda dig av en onumrerad lista (eng. unordered list) så använder du öppningstaggen <ul>, lägger in listelementen <li>Listelement</li>och stänger listan med </ul>

Ett exempel på en icke-numrerad lista:

Bröd
Mjölk
Smör
Ägg
Juice

Så här ser koden för listan ut:

<ul> <li>Bröd</li> <li>Mjölk</li> <li>Smör</li> <li>Ägg</li> <li>Juice</li> </ul>

Numrerad lista

Att skapa en numrerad lista fungerar på samma sätt som den icke-numrerade listan. Använd bara öppningstaggen <ol> (eng. ordered list) och stängningstaggen </ol> istället.

En numrerad lista har öppningstaggen <ol> och stängningstaggen </ol>

Ketchup
Bakmargarin
Spagetti
Jäst
Oregano

Så här ser koden för den listan ut:

<ol>
<li>Ketchup</li>
<li>Bakmargarin</li>
<li>Spagetti</li>
<li>Jäst</li>
<li>Oregano</li>
</ol>

Definitionslista

Om du vill skapa ett lexikon så finns det en definitionslista, eng. definition list, som fungerar något annorlunda än de övriga två listorna.

Definitionslistan omsluts av <dl> och </dl>

Varje listelement består av:
<dt>Ord</dt>
<dd>Betydelse>

Exempel:

<dl> <dt><strong>Webbdesigna.se</strong></dt> <dd>Svensk guide till webbdesign med XHTML och CSS. Här hittas även enkla lösningar för att snabbt skapa en egen blogg, forum eller hemsida.</dd> </dl>

Resultat:

Webbdesigna.se: Svensk guide till webbdesign med XHTML och CSS. Här hittas även enkla lösningar för att snabbt skapa en egen blogg, forum eller hemsida.

<<< Bilder || Tabeller >>>