Ved at bruge denne side acceptere du samtidig Brugbarts og vores partneres brug af cookies.

Læs mere

HTML Lister og Hvorfor du bør bruge dem

Vejledning til hvordan du laver lister i HTML, og en forklaring på hvorfor de er så nyttige.

Redigeret: 2015-05-10 08:25

HTML living stadard logo anden orange udgave.

På de fleste hjemmesider bliver der brugt HTML Lister til link menuer, det skyldes at de er så nemme at kontrollere udsende på ved hjælp af CSS.

Lister gør også siden mere brugervenlig for folk der benytter skærmoplæsere.

Liste Typer

Der findes 3 forskellige liste typer, de to vigtigste er ul og ol elementerne. Som standard vil Ul blive vist med punkter, hvor Ol vil blive nummeret med tal.

Ul kan anvendes hvis rækkefølgen af ting på listen, ikke er så vigtig - og der er heller ikke noget krav om, at browseren skal vise tingene i en bestemt rækkefølge, men alligevel viser de dog listerne i den rækkefølge tingene er placeret.

Ol kan bruges hvis det er en sorteret liste. Dvs. Hvis du vil kontrollere rækkefølgen, eller hvis dit CMS returnere tingene i en bestemt rækkefølge. Det er normalt Ol som vil blive brugt til Link Menuer.

Sådan designer du gode HTML lister

Som standard bliver lister også vist på deres egen måde, ligesom alle andre elementer - der hvor mange bliver forvirret, er nå de skal til at fjerne nummereringen på lister, eller fjerne den "tomme plads" rundt om lister.

Det er nemmest hvis man bare nulstiller margin og padding for alle elementer, og selv vælger hvad der skal bruges.

En linkmenu som kan ses på mange hjemmesider, kan eksempelvis opmærkes således:

<ol>
 <li><a href="http://brugbart.dk/Vejledninger/web-design">Web-design Vejledning</a></li>
 <li><a href="http://brugbart.dk/Vejledninger/php">PHP Vejledning</a></li>
 <li><a href="http://brugbart.dk/Vejledninger/seo">SEO Vejledning</a></li>
</ol>

Men for at fjerne nummereringen på listen, skal man sætte list-style-type til none, som vist nedenfor:

ol {
 list-style-type: none;
}

Lister bliver nogle gange vist forskelligt i andre browsere, det skyldes at nogle browsere bruger margin som standard, hvor andre bruger padding. Nulstil derfor altid margin og padding - så kan du selv kan vælge hvad der skal bruges.

Tabeller i HTML - ID og Klasser i HTML og CSS