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

Viktiga lärdomar

ordnade, oordnade och beskrivande listor.

Ordnade listor är ett vanligt element i HTML som kan ordnas med hjälp av numeriska eller icke-numeriska värden som kallas “typer av ordnade listor”. Dessutom kan dessa listor skräddarsys ytterligare med hjälp av olika attribut, t.ex. attributet “type” som möjliggör personliga formateringsalternativ, medan attributen “start” och “reversed” möjliggör justeringar av den ursprungliga objektplaceringen respektive listans riktning.

Oordnade listor är ett sätt att organisera och presentera information på ett kortfattat sätt genom att gruppera objekt som är löst sammankopplade eller inte har en särskild viktighetsordning. Utseendet på dessa listor kan förfinas genom att använda Cascading Style Sheets (CSS) för att modifiera deras punktstyling, vilket kan inkludera att ändra dess storlek, form, färg och position inom listobjektet. Med den här funktionen kan designers och utvecklare skräddarsy oordnade listor så att de passar olika visuella mönster samtidigt som de behåller ett lättläst format för användarna.

En HTML-lista fungerar som en grundläggande strukturell komponent för alla typer av korrelerad information på en webbsida. Oavsett om man konstruerar en navigeringsmeny, arrangerar produkter på specialerbjudande eller försöker visa komplicerade data i ett mer lättsmält format, visar sig dessa listor vara oumbärliga verktyg för att utföra den aktuella uppgiften.

Det finns tre primära varianter av HTML-listor, som tillgodoser olika arkitektoniska roller inom webbdesign och utveckling.

Ordnad lista

Den ordnade HTML-listan är ett effektivt sätt att organisera en serie inbördes relaterade element i en viss ordningsföljd. För att konstruera en sådan lista måste man använda

 <!-- Ordered list -->
<ol>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ol>

Denna kod återger följande vy:

Det är viktigt att vara medveten om att en ordnad lista som standard följer en numerisk sekvens. Man har dock möjlighet att ändra detta arrangemang genom att använda attributet “typ”. Detta attribut ger användaren kontroll över vilken faktor som bestämmer listans organisation. Det finns olika alternativ för att välja ordningsmetod, inklusive alfabetiska tecken (både versaler och gemener), numeriska värden eller till och med romerska siffror i antingen versal eller gemen form.

 <!-- Ordered list -->
<ol type="a">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ol> 

Genom att införliva attributet “type” i elementet för ordnad lista (" “) får man en reviderad visuell presentation som visas nedan:

“start”, som bestämmer hur många objekt som ska visas i början av listan; och “reversed”, som inverterar ordningen i listan så att den visas från det sista objektet först.

Attributet start gör att man kan börja arrangera element från en given position genom att använda ett heltalsvärde. Som ett exempel, när start="3" införlivas i -elementet, utan att ange en specifik typ , kommer det att börja organisera listan från siffran tre. Om man specificerar antingen type="a" eller type="I" , kommer den att börja ordna från ‘c’ respektive ‘I’.

 <!-- Ordered list -->
<ol type="I" start="3">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ol> 

Koden ovan ger följande vy:

Attributet “reversed” gör det möjligt att ändra ordningen på elementen i en lista genom att växla dess booleska värde, med en standardinställning på false.

 <!-- Ordered list -->
<ol reversed="true">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ol> 

När den angivna koden körs visas en tabell i webbläsaren med specifika funktioner och innehåll som beskrivs nedan:html Table Title

Oordnad lista

En oordnad lista är ett effektivt sätt att organisera och presentera flera objekt som är konceptuellt kopplade men inte kräver en specifik sekvens eller rangordning. Webbläsare använder vanligtvis punktlistor för att markera varje element i en sådan samling.

För att skapa en ostrukturerad anslagstavla bestående av en serie objekt krävs att man använder HTML-elementen (för att beteckna behållaren) respektive (för varje enskild lista).

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

Denna kod renderar följande vy:

En oordnad lista har vanligtvis en cirkulär form som kallas “disk”. Historiskt sett har man kunnat använda ett “typ”-attribut för att bestämma den visuella representationen av en oordnad lista.Tyvärr har detta attribut ansetts vara föråldrat och stöds inte längre. Istället rekommenderas att man använder sig av den allmänt tillämpliga “CSS list-style-type property” för att uppnå önskade anpassningar när det gäller oordnade listor.

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

Den ovan nämnda koden ändrar den visuella representationen av den tillhandahållna informationen genom att generera en HTML-struktur som innehåller flera div-element, där varje element tilldelas olika attribut och innehåller specifikt innehåll.

CSS-egenskapen list-style-type gör det möjligt att använda olika punktstilar, t.ex. cirkelformer, anpassade bilder, ikoner och symboler. Genom att använda CSS som ändrar arrangemanget av listobjekt kan man utnyttja oordnade listor för att skapa navigeringsmenyer.

Nästade listor

En nästad lista består i princip av ett element från en bredare lista som är inneslutet i den. En sådan struktur kan skapas genom en harmonisk blandning av både ordnade och oordnade listobjekt. Sådana konfigurationer kan avbilda invecklade hierarkiska system på ett mer sofistikerat sätt.

 <H3>Chicken Pasta Insturctions</H3>
<ol>
   <li>Boil pasta.</li>
   <li>
   Season chicken breast.
    <ul>
       <li>salt and pepper</li>
       <li>paprika</li>
       <li>garlic powder</li>
       <li>Italian seasoning</li>
     </ul>
  </li>
  <li>Heat olive oil in pot over medium-high heat.</li>
   <li>Add chicken breast to pan and cook for 5 minutes.</li>
   <li>Add heavy cream and parmesan cheese to empty pot.</li>
   <li>Add pasta and slice chicken to cream sauce.</li>
</ol> 

Denna kod renderar följande vy:

Beskrivningslista

HTML-taggen används för att definiera en beskrivningslista, bestående av beskrivande termer ( ) och motsvarande detaljer ( ). Detta strukturerade format ger en tydlig organisation för att presentera information på ett hierarkiskt sätt, vilket förbättrar läsbarheten och förståelsen.

 <h3>Popular Laptops</h3>
<dl>
  <dt>MacBook Pro</dt>
   <dd>
     Provides up to 22 hours of battery life,
     has an advanced camera, and a magic keyboard with touch ID.
   </dd>

  <dt>MSI GS76 Stealth</dt>
   <dd>
    A powerful gaming laptop with supercharged graphics and customized keys.
   </dd>
</dl> 

Koden ovan renderar följande vy:

Organisera ditt innehåll med rätt HTML-lista

Valet av HTML-lista som används i en webbutveckling bör baseras på den information som är avsedd att förmedlas till användaren. Om du t.ex. vill skapa en seriell presentation av de steg som ingår i tillagningen av en maträtt eller utförandet av en syssla, är en ordnad lista lämpligast.

När det gäller organisering av innehåll som inte kräver en stegvis process eller sekvens, t.ex. faktauppgifter eller definitioner, kan en ostrukturerad lista vara ett mer praktiskt alternativ. Dessutom, i fall där man försöker presentera ett kompendium av termer och deras motsvarande förklaringar, eller en sammanställning av frågor och svar, kommer användandet av en definitionslista att ge optimala resultat.