I den här artikeln lär du dig använda olika sorters 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.
