Ordered lists i HTML – attributter

Du har kanskje brukt ordered lists i HTML for å skape en nummerert liste. Men, visste du at det finnes en rekke attributter som gjør at du kan tilpasse listen i HTML, uten å for eksempel bruke CSS?

Først, en helt ordinær liste:

<ol>
    <li>Dette er punkt nr 1</li>
    <li>Dette er punkt nr 2</li>
    <li>Dette er punkt nr 3</li>
    <li>Dette er punkt nr 4</li>    
    <li>Dette er punkt nr 5</li>
</ol>

Som vil se slik ut:

  1. Dette er punkt nr 1
  2. Dette er punkt nr 2
  3. Dette er punkt nr 3
  4. Dette er punkt nr 4
  5. Dette er punkt nr 5

Reversed

Ved å bruke reversed vil du snu listen «på hodet». Det vil si, du snur nummereringen, ikke innholdet i listen.

<ol reversed>
    <li>Dette er punkt nr 1</li>
    <li>Dette er punkt nr 2</li>
    <li>Dette er punkt nr 3</li>
    <li>Dette er punkt nr 4</li>    
    <li>Dette er punkt nr 5</li>
</ol>

Resultat:

  1. Dette er punkt nr 1
  2. Dette er punkt nr 2
  3. Dette er punkt nr 3
  4. Dette er punkt nr 4
  5. Dette er punkt nr 5

Start

Her velger vi hvilket nummer vi skal starte på.

<ol reversed start="15">
    <li>Dette er punkt nr 1</li>
    <li>Dette er punkt nr 2</li>
    <li>Dette er punkt nr 3</li>
    <li>Dette er punkt nr 4</li>    
    <li>Dette er punkt nr 5</li>
</ol>

Resultat:

  1. Dette er punkt nr 1
  2. Dette er punkt nr 2
  3. Dette er punkt nr 3
  4. Dette er punkt nr 4
  5. Dette er punkt nr 5

Type (aAiI1)

Standard type for en ordered list er vanlig nummerering. Du har imidlertid mulighet til å endre type ved å sette aAiI eller 1.

<ol reversed start="15" type="A">
    <li>Dette er punkt nr 1</li>
    <li>Dette er punkt nr 2</li>
    <li>Dette er punkt nr 3</li>
    <li>Dette er punkt nr 4</li>    
    <li>Dette er punkt nr 5</li>
</ol>

Resultat:

  1. Dette er punkt nr 1
  2. Dette er punkt nr 2
  3. Dette er punkt nr 3
  4. Dette er punkt nr 4
  5. Dette er punkt nr 5

Value

Med value kan du endre verdien på et punkt, noe som vil resultere i endring av resterende punkter i listen.

<ol reversed start="15" type="A">
    <li>Dette er punkt nr 1</li>
    <li>Dette er punkt nr 2</li>
    <li>Dette er punkt nr 3</li>
    <li value="50">Dette er punkt nr 4</li>    
    <li>Dette er punkt nr 5</li>
</ol>

Resultat:

  1. Dette er punkt nr 1
  2. Dette er punkt nr 2
  3. Dette er punkt nr 3
  4. Dette er punkt nr 4
  5. Dette er punkt nr 5

Relaterte kurs

Se våre kurs i HTML og CSS

Del denne artikkelen:

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert.