Du har en oppskrift med fem trinn, en handleliste med ti varer, eller en FAQ med begreper og forklaringer. Du kan skrive alt som vanlige avsnitt, men da mister du strukturen som gjør innholdet enkelt å skanne. HTML-lister gir deg tre verktøy for dette: ul for punktlister, ol for nummererte lister, og dl for beskrivende lister.
Punktlister med ul og li
En unummerert liste (ul) brukes når rekkefølgen ikke betyr noe. Handleliste, egenskaper ved et produkt, navigasjonslenker. Nettleseren viser automatisk en kulepunkt foran hvert element.
Syntaksen ser slik ut:
<ul>
<li>Melk</li>
<li>Brød</li>
<li>Egg</li>
</ul>
ul er beholderen, li er hvert listeelement. Ingenting annet enn li-elementer skal ligge direkte inni ul. Du kan ha så mange li du vil, og hvert li-element kan inneholde tekst, lenker, bilder eller til og med en ny liste.
Selv om du kanskje kunne oppnådd noe lignende med avsnitt og bindestreker, gir ul-taggen informasjon til nettleseren og skjermlesere om at dette er en samling relaterte punkter. Det gjør innholdet mer tilgjengelig og lettere å style med CSS.
Nummererte lister med ol og li
En ordnet liste (ol) brukes når rekkefølgen er viktig. Oppskrifter, trinnvise instruksjoner, topp-ti-lister. Nettleseren viser automatisk tall i stedet for kulepunkter.
<ol>
<li>Forvarm ovnen til 200 grader</li>
<li>Bland mel og sukker</li>
<li>Sett inn i ovnen i 25 minutter</li>
</ol>
Syntaksen er nesten identisk med ul. Du bytter bare ul med ol. Alt annet er likt: li-elementer inni, ingenting mellom ol og li. Nettleseren håndterer nummereringen automatisk, så du trenger aldri å skrive tallene selv. Legger du til et nytt trinn midt i listen, oppdaterer nettleseren alle tallene.
En fordel med ol over å skrive tallene manuelt er at du aldri ender opp med to punkt 3 eller hopper fra 4 til 6. Nettleseren teller for deg.
Beskrivende lister med dl, dt og dd
Beskrivende lister (dl) passer når du har begreper med tilhørende forklaringer. Ordlister, FAQ-seksjoner, produktspesifikasjoner. Denne listetypen er mindre kjent enn ul og ol, men den er perfekt for innhold som har en naturlig struktur av «term og definisjon».
<dl>
<dt>HTML</dt>
<dd>Språket som strukturerer innhold på nettsider</dd>
<dt>CSS</dt>
<dd>Språket som styrer utseendet til nettsider</dd>
<dt>JavaScript</dt>
<dd>Språket som gir nettsider interaktivitet</dd>
</dl>
dl er beholderen. dt (description term) er begrepet. dd (description definition) er forklaringen. Hver dt kan ha én eller flere dd-er under seg. Det er nyttig når et begrep har flere betydninger eller når du vil gi eksempler i tillegg til en definisjon.
Når bruker du hvilken liste?
Valget mellom ul, ol og dl handler om innholdets natur. Spør deg selv: betyr rekkefølgen noe? Hvis ja, bruk ol. Hvis nei, bruk ul. Har innholdet en term-definisjon-struktur? Bruk dl.
Noen praktiske eksempler:
- Handleliste: ul (det spiller ingen rolle hvilken vare du plukker først)
- IKEA-monteringsanvisning: ol (trinnene må følges i rekkefølge)
- Ordliste med fagtermer: dl (hvert begrep har en tilhørende forklaring)
- Navigasjonsmeny: ul (lenkene er sidestilt, ingen rangering)
- Topp-5-filmer: ol (rangeringen er poenget)
Mange bruker ul for alt, også der ol eller dl hadde vært mer presist. Det fungerer visuelt, men du mister semantisk informasjon. En skjermleser forteller brukeren «ordnet liste, 5 elementer» for ol, og det signaliserer at rekkefølgen betyr noe. Med ul får brukeren bare «liste, 5 elementer».
Nøstede lister
Du kan plassere en liste inni en annen liste ved å legge en ny ul eller ol inni et li-element. Dette er nyttig for underpunkter, som en navigasjon med hovedkategorier og underkategorier.
<ul>
<li>Frukt
<ul>
<li>Epler</li>
<li>Bananer</li>
</ul>
</li>
<li>Grønnsaker</li>
</ul>
Den nøstede listen ligger inni li-elementet, ikke mellom to li-elementer. Denne detaljen er lett å bomme på, og feil plassering gir ugyldig HTML.
Vanlige feil med HTML-lister
Innhold direkte i ul eller ol. Tekst eller andre elementer skal ikke ligge rett mellom ul og li. Alt innhold skal være inni et li-element. Skriver du tekst direkte i ul, er det ugyldig HTML og kan gi uforutsigbare resultater i ulike nettlesere.
Bruke lister bare for kulepunkter. Noen bruker ul bare fordi de vil ha prikker foran teksten. Hvis innholdet ikke er en samling relaterte punkter, er ul feil verktøy. CSS gir deg kulepunkter uten å bruke listemarkering.
Glemme dl for definisjoner. Når du skriver en ordliste med term og forklaring og bruker ul med manuell formatering, gjør du jobben vanskeligere for deg selv. dl er laget for akkurat dette formålet og gir bedre struktur til innholdet.
Neste steg
Nå som du kan bruke HTML-lister med ul, ol og dl, har du verktøyene for å strukturere punkter, trinn og definisjoner. HTML-overskrifter gir deg hierarki for hele siden, mens lister organiserer innholdet inni hver seksjon. For å koble listeelementer til andre sider lærer du å bruke a-taggen for lenker. Ønsker du å forstå hvordan lister og annen HTML-struktur påvirker rangering i søkemotorer, kan du lese om interne lenker og SEO.
Denne artikkelen er basert på en videoleksjon fra HTML-kurset på Utdannet.no. I kurset får du praktiske eksempler på lister, lenker og dokumentstruktur som du kan følge steg for steg.
