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:

15. Dette er punkt nr 1
16. Dette er punkt nr 2
17. Dette er punkt nr 3
18. Dette er punkt nr 4
19. Dette er punkt nr 5

Type (a, A, i, I, 1)

Standard type for en ordered list er vanlig nummerering. Du har imidlertid mulighet til å endre type ved å sette a, A, i, I 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:

15. Dette er punkt nr 1
16. Dette er punkt nr 2
17. Dette er punkt nr 3
18. Dette er punkt nr 4
19. 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:

15. Dette er punkt nr 1
16. Dette er punkt nr 2
17. Dette er punkt nr 3
50. Dette er punkt nr 4
51. Dette er punkt nr 5

Relaterte kurs

Se våre kurs i HTML og CSS