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>

  1. Ketchup
  2. Bakmargarin
  3. Spagetti
  4. Jäst
  5. Oregano

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

<ol>
<li>Ketchup</li>
<li>Bakmargarin</li>
<li>Spagetti</li>
<li>J&auml;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 >>>

Hitta ett billigt webbhotell för din hemsida

12:-/mån
One Webbhotell Betyg
15:-/mån
Web10 Webbhotell Betyg
36:-/mån
Host Gator Webbhotell Betyg
36:-/mån
Surftown Webbhotell Betyg

Snabbguider

Nedanför finns information för dig som vill komma igång med en hemsida på snabbast möjliga sätt - utan fokus på webbspråk.

Ett litet "gilla" är också ett sätt att hjälpa sajten. =)