Viktige punkter
- HTML-lister er fundamentale for å strukturere og vise data på en nettside. Det finnes tre hovedtyper: nummererte, ikke-nummererte og beskrivelseslister.
- Nummererte lister bruker tall eller andre tegn for å vise rekkefølgen på elementene. Attributtet «type» gir mulighet for tilpasning, mens attributtene «start» og «reversed» endrer startposisjonen og rekkefølgen.
- Ikke-nummererte lister samler relaterte elementer uten en bestemt rekkefølge. Stilen på kulene kan tilpasses ved hjelp av CSS.
En HTML-liste er et essensielt strukturelt verktøy for enhver samling av relaterte data på en nettside. Enten det gjelder å skape en meny, organisere salgsvarer eller presentere komplekse data på en mer lesbar måte, vil disse listetypene hjelpe deg med å fullføre oppgaven.
Det finnes tre primære typer HTML-lister, hver med sitt spesifikke formål innen webutvikling.
1. Nummerert liste
En HTML-nummerert liste lar deg organisere en rekke relaterte elementer i en bestemt rekkefølge. For å starte en ny nummerert liste, bruker du <ol>-taggen.
<ol>-taggen fungerer som en beholder for <li>-taggene. Hvert listeelement (<li>-tag) representerer en individuell post i listen.
<ol> <li>Element 1</li> <li>Element 2</li> <li>Element 3</li> <li>Element 4</li> </ol>
Denne koden resulterer i følgende visning:
Som standard bruker en nummerert liste tall som nummereringstype, men dette kan endres med attributtet «type». Dette attributtet lar deg velge hvordan listen skal nummereres. Du kan bruke bokstaver (store eller små), tall eller romertall (store eller små).
<ol type="a"> <li>Element 1</li> <li>Element 2</li> <li>Element 3</li> <li>Element 4</li> </ol>
Når du legger til attributtet «type» til <ol>-taggen, vil visningen endres som følger:
I tillegg til attributtet «type», finnes det to andre attributter som kan brukes med <ol>-taggen: «start» og «reversed».
Attributtet «start» lar deg spesifisere et startpunkt for nummereringen ved hjelp av et heltall. For eksempel, hvis du legger til start="3" til <ol>-taggen uten å spesifisere en type, vil listen begynne nummereringen fra tallet 3. Hvis du bruker type="a" eller type="I", vil den starte nummereringen fra henholdsvis bokstaven «c» eller romertallet «III».
<ol type="I" start="3"> <li>Element 1</li> <li>Element 2</li> <li>Element 3</li> <li>Element 4</li> </ol>
Koden over resulterer i følgende utseende:
Attributtet «reversed» lar deg snu rekkefølgen på listen. Det aksepterer en boolsk verdi, og standardverdien er «false».
<ol reversed="true"> <li>Element 1</li> <li>Element 2</li> <li>Element 3</li> <li>Element 4</li> </ol>
Denne koden genererer følgende utdata i nettleseren:
2. Ikke-nummerert liste
En ikke-nummerert liste brukes til å gruppere relaterte elementer hvor rekkefølgen ikke er viktig. Som standard bruker nettlesere et punkt foran hvert listeelement.
For å opprette en ny ikke-nummerert liste, bruker du <ul>-taggen som et overordnet element, og <li>-taggen for hvert listeelement:
<ul> <li>Element 1</li> <li>Element 2</li> <li>Element 3</li> <li>Element 4</li> </ul>
Denne koden resulterer i følgende utseende:
Standard kulestil for en ikke-nummerert liste er en fylt sirkel. Tidligere kunne du bruke attributtet «type» for å endre kulestilen. Imidlertid er dette attributtet nå utdatert. Det anbefalte alternativet for å tilpasse kulestilen er å bruke CSS-egenskapen «list-style-type».
<style>
ul { list-style-type: square; }
</style>
Koden over endrer visningen til følgende:
CSS-egenskapen «list-style-type» lar deg bruke en rekke forskjellige kulestiler, inkludert sirkler, egendefinerte bilder, ikoner eller symboler. Med CSS for å endre utseendet på listeelementer, kan du til og med bruke ikke-nummererte lister til å lage navigasjonsmenyer.
Nøstede lister
En nøstet liste er et listeelement som er en del av en annen liste. Du kan opprette en nøstet liste ved å kombinere nummererte og/eller ikke-nummererte listeelementer. Disse strukturene kan representere mer komplekse hierarkier.
<h3>Oppskrift på kyllingpasta</h3>
<ol>
<li>Kok pasta.</li>
<li>
Krydre kyllingbryst.
<ul>
<li>Salt og pepper</li>
<li>Paprika</li>
<li>Hvitløkspulver</li>
<li>Italiensk krydder</li>
</ul>
</li>
<li>Varm olivenolje i en kjele på middels høy varme.</li>
<li>Legg kyllingbryst i pannen og stek i 5 minutter.</li>
<li>Tilsett fløte og parmesanost i den tomme kjelen.</li>
<li>Tilsett pasta og skivet kylling til fløtesausen.</li>
</ol>
Denne koden gjengir følgende utseende:
3. Beskrivelsesliste
Et beskrivelseslisteelement lar deg lage en liste over termer og deres tilhørende forklaringer. <dl>-taggen brukes for å opprette en ny beskrivelsesliste, og den brukes sammen med taggene <dt> (beskrivelsesterm) og <dd> (beskrivelsesdetaljer).
<h3>Populære Laptops</h3>
<dl>
<dt>MacBook Pro</dt>
<dd>
Gir opptil 22 timers batteritid, har et avansert kamera, og et magisk tastatur med touch ID.
</dd>
<dt>MSI GS76 Stealth</dt>
<dd>
En kraftig gaminglaptop med superladet grafikk og tilpassbare taster.
</dd>
</dl>
Koden over resulterer i følgende utseende:
Organiser innholdet ditt med den riktige HTML-listen
Den HTML-listen du velger å bruke i ditt webutviklingsprosjekt bør baseres på typen innhold du vil vise til brukerne dine. For eksempel, hvis du skal lage en sekvensiell liste som trinnene for å tilberede et måltid eller fullføre en oppgave, er en nummerert liste det beste alternativet.
Men hvis du vil gruppere relatert informasjon som ikke krever en bestemt rekkefølge (som en sjekkliste), vil en ikke-nummerert liste være et mer passende valg. Videre, hvis du trenger å lage en ordliste eller en liste over vanlige spørsmål, er en beskrivelsesliste det mest hensiktsmessige valget.