3 typer av HTML-listor och hur man använder dem

Viktiga punkter

HTML-listor är avgörande för att strukturera och visa information på webbsidor. Det finns huvudsakligen tre typer: ordnade, oordnade och beskrivningslistor.

• Ordnade listor använder siffror eller liknande för att ange ordning. Attributet ”type” möjliggör anpassning, medan ”start” och ”reversed” justerar startpunkt och riktning.
• Oordnade listor samlar relaterade element utan inbördes ordning. Utseendet på punkter kan ändras med CSS.

En HTML-lista är en viktig del för att organisera samlingar av data på en webbplats. Oavsett om det handlar om en meny, produktlista eller komplex information, kan listor hjälpa till att göra innehållet tydligare och mer läsvänligt.

Det finns tre huvudtyper av HTML-listor, var och en med sin specifika funktion inom webbutveckling.

1. Ordnad lista

Med en ordnad HTML-lista kan du gruppera relaterade objekt i en bestämd ordning. Listan skapas med taggen

. Inuti
-taggen placeras
1. -taggar, där varje
2. -tagg representerar ett listelement.

<ol>
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
  <li>Element 4</li>
</ol>

Detta ger följande utseende:

Som standard numreras ordnade listor med siffror, men detta kan ändras med attributet ”type”. Du kan välja att använda bokstäver (versaler eller gemener), siffror eller romerska siffror (versaler eller gemener).

<ol type="a">
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
  <li>Element 4</li>
</ol>

Med attributet ”type” tillagt till

-taggen får du följande resultat:

Förutom ”type” finns det ytterligare två attribut för

-taggen: ”start” och ”reversed”.

Attributet ”start” låter dig bestämma vilket nummer listan ska starta ifrån. Om du t.ex. anger start=”3″ (utan att ange en ”type”) kommer listan att börja med nummer 3. Om du anger ”type=a” eller ”type=I” kommer den att börja med ”c” respektive ”III”.

<ol type="I" start="3">
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
  <li>Element 4</li>
</ol>

Koden ovan ger följande utseende:

Attributet ”reversed” vänder ordningen på listan. Standardvärdet är ”false”.

<ol reversed="true">
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
  <li>Element 4</li>
</ol>

Detta ger följande resultat i webbläsaren:

2. Oordnad lista

Med en oordnad lista grupperar du relaterade objekt där ordningen inte är viktig. Som standard används en punkt för att markera varje listelement.

En oordnad lista skapas med taggen

, och varje listelement representeras av en
• -tagg:

<ul>
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
  <li>Element 4</li>
</ul>

Detta ger följande utseende:

Standardutseendet för en oordnad lista är en fylld cirkel. Tidigare kunde man använda attributet ”type” för att ändra stilen, men det är nu utfasat. Istället rekommenderas det att använda CSS-egenskapen ”list-style-type”.

<style>
ul { list-style-type: square; }
</style>

Ovanstående kod ger följande resultat:

CSS-egenskapen ”list-style-type” ger dig möjlighet att använda olika typer av markörer, som cirklar, anpassade bilder, ikoner eller symboler. Du kan även använda oordnade listor för att skapa navigeringsmenyer, med hjälp av CSS för att ändra layouten på listelementen.

Kapslade listor

En kapslad lista är en lista som finns inuti en annan lista. Kapslade listor skapas genom att kombinera ordnade och/eller oordnade listor. Denna typ av struktur är användbar för att visa hierarkisk information.

<h3>Instruktioner för kycklingpasta</h3>
<ol>
  <li>Koka pasta.</li>
  <li>
   Krydda kycklingbröstet.
    <ul>
       <li>salt och peppar</li>
      <li>paprika</li>
       <li>vitlökspulver</li>
      <li>italiensk kryddblandning</li>
    </ul>
  </li>
  <li>Hetta upp olivolja i en kastrull.</li>
  <li>Lägg i kycklingbröstet och stek i 5 minuter.</li>
  <li>Häll i grädde och parmesanost i en tom kastrull.</li>
  <li>Tillsätt pasta och skivad kyckling i såsen.</li>
</ol>

Detta ger följande utseende:

3. Beskrivningslista

En beskrivningslista används för att skapa en lista med termer och deras beskrivningar. Taggen

skapar listan, medan

används för termen och

för beskrivningen.

<h3>Populära bärbara datorer</h3>
<dl>
  <dt>MacBook Pro</dt>
  <dd>
     Ger upp till 22 timmars batteritid,
    har en avancerad kamera och ett Magic Keyboard med Touch ID.
  </dd>
  <dt>MSI GS76 Stealth</dt>
  <dd>
      En kraftfull gaminglaptop med kraftfull grafik och anpassningsbara tangenter.
  </dd>
</dl>

Koden ovan ger följande utseende:

Använd rätt HTML-lista för att strukturera ditt innehåll

Valet av HTML-lista bör baseras på den information som ska presenteras. Om du behöver en lista med steg i en viss ordning, som till exempel i ett recept, är en ordnad lista det bästa valet.

Om du däremot ska gruppera relaterad information utan specifik ordning, som en checklista, är en oordnad lista bättre. Beskrivningslistan passar bra för ordlistor eller vanliga frågor.