Lister i HTML

 

Sorterede lister

I en sorteret liste (ordered list) er hvert punkt i listen nummereret fra 1 og opad. En sorteret liste kan skabes med tagget <ol>. Imellem åbnings- og lukningstagget tilføjes hvert punkt i listen med tagget <li>. Indholdet mellem åbnings- og lukningstagget for <li> vil være indholdet i hvert punkt. Nedenstående kodestykke er et eksempel på en sorteret liste med tre punkter:

<ol>
  <li>Punkt 1</li>
  <li>Punkt 2</li>
  <li>Punkt 3</li>
</ol>

Ovenstående kodestykke vil resultere i nedenstående liste:

1. Punkt 1
2. Punkt 2
3. Punkt 3

Attributten type specificerer, hvordan punkterne i listen skal tælles. Attributten kan have følgende værdier:

 

Usorterede lister

I en usorteret liste (unordered list) bliver hvert punkt i listen stillet op i punktform. En usorteret liste kan skabes med tagget <ul>. Imellem åbnings- og lukningstagget tilføjes hvert punkt i listen med tagget <li>. Indholdet mellem åbnings- og lukningstagget for <li> vil være indholdet i hvert punkt. Nedenstående kodestykke er et eksempel på en usorteret liste med tre punkter:

<ul>
  <li>Punkt 1</li>
  <li>Punkt 2</li>
  <li>Punkt 3</li>
</ul>

Ovenstående kodestykke vil resultere i nedenstående liste:

• Punkt 1
• Punkt 2
• Punkt 3

I CSS kan man style punkterne i listen med egenskaben list-style-type. Denne egenskab kan have følgende værdier:

 

Indlejrede lister

Lister kan blive indlejret, så der bliver skabt lister inde i lister. Kodestykket for det ser sådan her ud:

<ul>
  <li>Punkt 1
    <ul>
      <li>Punkt 1.1</li>
      <li>Punkt 1.2</li>
    </ul>
  </li>
  <li>Punkt 2</li>
  <li>Punkt 3</li>
</ul>

Ovenstående kodestykke vil resultere i nedenstående liste, hvor underpunkterne “Punkt 1.1” og “Punkt 1.2” er indlejret i “Punkt 1”:

• Punkt 1
  • Punkt 1.1
  • Punkt 1.2
• Punkt 2
• Punkt 3

 

Gå videre til Tabeller i HTML her →