O2e

Hvordan lage en punktliste i et HTML nettside

Web utvikling er ikke bare om å plassere et nettsted på webserveren din. Det er andre hensyn, som overholdelse av markup din med gjeldende HTML-standardene, lesbarhet, og selv den informasjonen arkitektur. Hvor lett er det for menneskelige øyne å lese innholdet? Hvor lett er det for søkemotor roboter å krype din nettside for informasjon?

Bruke punktlister på innholdet vil være nyttig i å gjøre det lettere å lese. Det vil også gjøre det lettere for robotsøkeprogrammer å få relevante søkeord og fraser fra ditt nettsted. En punktliste kan skannes raskere enn en lang tekstavsnitt. En punktliste kan også gjøre en god "linkbait" eller viral markedsføring materiale. For eksempel vil en "Topp 10"-listen være enklere å finne og lese enn en full-lengde essay med ti avsnitt.

Hvordan lage en punktliste i et HTML nettside. Dette er det andre elementet i den overordnede listen.
Hvordan lage en punktliste i et HTML nettside. Dette er det andre elementet i den overordnede listen.

For dette formålet, ville du trenger å lære hvordan du bruker en punktliste i HTML.

Opprette en punktliste er enkel nok. Du trenger å vite hvordan du bruker disse kodene:

  • UL
  • OL
  • LI

UL betyr sorterte liste

UL betyr sorterte liste. Opprette en ikke-sorterte liste ville spesifisere hver linje i punkter (slik som den ovenfor). Du må legge ved hele listen i <ul> og </ ul>-kodene (der en skråstrek betegner en avsluttende tag).

OL betyr sortert liste

OL betyr sortert liste. En sortert liste spesifiserer hver linje i numerisk rekkefølge. Du må legge ved hele listen i <ol> koder. Pass på å lukke den med </ ol>.

UL betyr sorterte liste. OL betyr sortert liste.
UL betyr sorterte liste. OL betyr sortert liste.

Du må da legge hver linje i <li> koder. Sørg for å lukke den med <li>.

Du kan opprette en ikke-sorterte liste med dette formatet:

<ul> <li> Ett element går her

<ul>
<li> Ett element går her. </ li>
<li> Et annet element går her. </ li>
<li> Det siste elementet går her. </ li>
</ Ul>

Dette ville se slik ut:

  • Ett element går her.
  • Et annet element går her.
  • Det siste elementet går her.

Som for en sortert liste, kan du opprette en i dette formatet:

<ol> <li> Det første elementet går her

<ol>
<li> Det første elementet går her. </ li>
<li> andre elementet går her. </ li>
<li> Den tredje elementet går her. </ li>
</ Ol>

Denne listen vil se slik ut:

  1. Det første elementet går her.
  2. Det andre elementet går her.
  3. Det tredje elementet går her.

Du kan faktisk hekker lister med forskjellige nivåer. Bare omslutte <ul> eller <ol> kode i en annen kode, og at nye listen vil bli nestet under større liste. For eksempel:

<ul>
<li> Dette er det første elementet i den overordnede listen. </ li>
<li> Dette er det andre elementet i den overordnede liste </ li>
<ul>
<li> Dette er det første elementet i den nestede listen. </ li>
<li> Dette er det andre elementet i den nestede listen. </ li>
<ul>
<li> Dette er det første elementet i den dypere nestet liste. </ li>
<li> Dette er det andre elementet i den dypere nestet liste. </ li>
</ Ul>
</ Ul>
<li> Dette er det tredje elementet i den overordnede listen. </ li>
</ Ul>

Denne listen vil se ut som følger:

  • Dette er det første elementet i den overordnede listen.
  • Dette er det andre elementet i den overordnede listen.
    • Dette er det første elementet i den nestede listen.
    • Dette er det andre elementet i den nestede listen.
      • Dette er det første elementet i den dypere nestet liste.
      • Dette er det andre elementet i den dypere nestet liste.
  • Dette er det tredje elementet i den overordnede listen.

Bare husk å legge hver etikett med tilhørende avsluttende koden. Husk at <ul> er lukket med </ ul>. <ol> er vedlagt </ ol>. <li> er vedlagt i </ li>.