Gå til innhold

Lister

HTML har tre typer lister: uordnede, ordnede og definisjonslister.

Uordnet liste (punktliste)

Brukes når rekkefølgen ikke er viktig:

<ul>
    <li>Epler</li>
    <li>Bananer</li>
    <li>Appelsiner</li>
</ul>

Vises som:

  • Epler
  • Bananer
  • Appelsiner

Elementer

Element Beskrivelse
<ul> Unordered list (listen)
<li> List item (hvert punkt)

Ordnet liste (nummerert)

Brukes når rekkefølgen er viktig:

<ol>
    <li>Varm opp ovnen</li>
    <li>Bland ingrediensene</li>
    <li>Hell i form</li>
    <li>Stek i 30 minutter</li>
</ol>

Vises som:

  1. Varm opp ovnen
  2. Bland ingrediensene
  3. Hell i form
  4. Stek i 30 minutter

Attributter for ol

<!-- Start fra annet tall -->
<ol start="5">
    <li>Femte</li>
    <li>Sjette</li>
</ol>

<!-- Omvendt rekkefølge -->
<ol reversed>
    <li>Tredje</li>
    <li>Andre</li>
    <li>Første</li>
</ol>

<!-- Annen nummerering -->
<ol type="A">  <!-- A, B, C... -->
<ol type="a">  <!-- a, b, c... -->
<ol type="I">  <!-- I, II, III... -->
<ol type="i">  <!-- i, ii, iii... -->

Nøstede lister

Lister kan inneholde andre lister:

<ul>
    <li>Frukt
        <ul>
            <li>Epler</li>
            <li>Bananer</li>
        </ul>
    </li>
    <li>Grønnsaker
        <ul>
            <li>Gulrøtter</li>
            <li>Brokkoli</li>
        </ul>
    </li>
</ul>

Vises som:

  • Frukt
    • Epler
    • Bananer
  • Grønnsaker
    • Gulrøtter
    • Brokkoli

Du kan også kombinere ul og ol:

<ol>
    <li>Første hovedpunkt
        <ul>
            <li>Underpunkt</li>
            <li>Underpunkt</li>
        </ul>
    </li>
    <li>Andre hovedpunkt</li>
</ol>

Definisjonsliste

For termer og deres definisjoner:

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language - språk for å lage nettsider</dd>

    <dt>CSS</dt>
    <dd>Cascading Style Sheets - språk for å style nettsider</dd>

    <dt>JavaScript</dt>
    <dd>Programmeringsspråk for interaktivitet på nettsider</dd>
</dl>
Element Beskrivelse
<dl> Definition list (listen)
<dt> Definition term (begrepet)
<dd> Definition description (forklaringen)

Flere definisjoner

En term kan ha flere definisjoner:

<dl>
    <dt>Løp</dt>
    <dd>Å bevege seg raskt til fots</dd>
    <dd>Et arrangement der man løper</dd>
</dl>

Lister brukes ofte for navigasjon:

<nav>
    <ul>
        <li><a href="index.html">Hjem</a></li>
        <li><a href="about.html">Om oss</a></li>
        <li><a href="contact.html">Kontakt</a></li>
    </ul>
</nav>

Horisontal meny (med CSS)

Med Flexbox kan du enkelt lage en horisontal meny:

<nav>
    <ul class="menu">
        <li><a href="#">Hjem</a></li>
        <li><a href="#">Om</a></li>
        <li><a href="#">Kontakt</a></li>
    </ul>
</nav>

.menu {
    list-style: none;
    display: flex;
    gap: 20px;
}

Fjerne listestil

Standard kuler/tall kan fjernes med CSS:

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

Egendefinerte kuler

ul {
    list-style-type: square;    /* Firkant */
    list-style-type: circle;    /* Sirkel */
    list-style-type: disc;      /* Fyllt sirkel (standard) */
    list-style-type: none;      /* Ingen */
}

/* Med emoji eller bilde */
ul {
    list-style: none;
}
ul li::before {
    content: "✓ ";
}

Praktiske eksempler

Handleliste

<h2>Handleliste</h2>
<ul>
    <li>Melk</li>
    <li>Brød</li>
    <li>Egg</li>
    <li>Ost</li>
</ul>

Oppskrift

<h2>Pannekaker</h2>
<h3>Ingredienser</h3>
<ul>
    <li>3 dl mel</li>
    <li>5 dl melk</li>
    <li>2 egg</li>
    <li>1 ts salt</li>
</ul>

<h3>Fremgangsmåte</h3>
<ol>
    <li>Bland mel og salt</li>
    <li>Tilsett melk litt etter litt</li>
    <li>Rør inn eggene</li>
    <li>La røren hvile i 30 minutter</li>
    <li>Stek på middels varme</li>
</ol>

FAQ

<dl class="faq">
    <dt>Hvordan bestiller jeg?</dt>
    <dd>Klikk på "Legg i handlekurv" og følg instruksjonene.</dd>

    <dt>Hva er leveringstiden?</dt>
    <dd>Normalt 2-4 virkedager.</dd>

    <dt>Kan jeg returnere varer?</dt>
    <dd>Ja, du har 30 dagers angrerett.</dd>
</dl>

Tabell of contents

<nav class="toc">
    <h2>Innhold</h2>
    <ol>
        <li><a href="#intro">Introduksjon</a></li>
        <li><a href="#kap1">Kapittel 1</a>
            <ol>
                <li><a href="#kap1-1">Avsnitt 1.1</a></li>
                <li><a href="#kap1-2">Avsnitt 1.2</a></li>
            </ol>
        </li>
        <li><a href="#kap2">Kapittel 2</a></li>
        <li><a href="#konklusjon">Konklusjon</a></li>
    </ol>
</nav>

Oppsummering

Element Type Bruk
<ul> Uordnet Punktliste, meny
<ol> Ordnet Nummerert, steg-for-steg
<dl> Definisjon Ordliste, FAQ
<li> Listepunkt Inne i ul/ol
<dt> Term Begrep i dl
<dd> Definisjon Forklaring i dl

Når bruke hva

  • ul - Handlelister, navigasjon, funksjoner
  • ol - Oppskrifter, instruksjoner, rangeringer
  • dl - Ordforklaringer, FAQ, metadata