3 soorten HTML-lijsten en hoe ze te gebruiken

Belangrijkste leermomenten

Geordende, ongeordende en beschrijvende lijsten.

Geordende lijsten zijn een veelvoorkomend element in HTML dat kan worden gerangschikt met numerieke of niet-numerieke waarden die bekend staan als “geordende lijsttypen”. Bovendien kunnen deze lijsten verder worden aangepast met behulp van verschillende attributen, zoals het “type”-attribuut dat persoonlijke opmaakopties mogelijk maakt, terwijl de attributen “start” en “omgekeerd” aanpassingen mogelijk maken aan respectievelijk de plaatsing van het eerste item en de richting van de lijst.

Ongeordende lijsten bieden een manier om informatie op een beknopte manier te organiseren en te presenteren, waarbij items die losjes met elkaar verbonden zijn of geen bepaalde volgorde van belangrijkheid hebben, gegroepeerd worden. Het uiterlijk van deze lijsten kan worden verfijnd door Cascading Style Sheets (CSS) te gebruiken om de opmaak van de opsommingstekens aan te passen, zoals de grootte, vorm, kleur en positie binnen het lijstitem. Met deze functie kunnen ontwerpers en ontwikkelaars ongeordende lijsten aanpassen aan verschillende visuele ontwerpen, terwijl de indeling voor gebruikers gemakkelijk leesbaar blijft.

Een HTML-lijst dient als een fundamenteel structureel onderdeel voor elk assortiment van samenhangende informatie op een webpagina. Of je nu een navigatiemenu maakt, producten in de aanbieding rangschikt of ingewikkelde gegevens in een beter verteerbaar formaat probeert weer te geven, deze lijsten blijken onmisbare hulpmiddelen te zijn bij het uitvoeren van de taak.

Er bestaan drie primaire varianten van HTML-lijsten, die verschillende architectonische rollen vervullen binnen webdesign en -ontwikkeling.

Geordende lijst

De HTML-lijst is een effectief middel om een reeks onderling gerelateerde elementen in een bepaalde volgorde te ordenen. Om zo’n lijst te maken, moet gebruik worden gemaakt van de

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

Deze code geeft de volgende weergave:

Het is belangrijk om te weten dat een geordende lijst standaard een numerieke volgorde volgt. Je hebt echter de flexibiliteit om deze ordening te veranderen door gebruik te maken van het “type” attribuut. Dit attribuut geeft de gebruiker controle over welke factor de ordening van de lijst bepaalt. Er zijn verschillende opties beschikbaar voor het kiezen van de ordeningsmethode, waaronder alfabetische tekens (zowel hoofdletters als kleine letters), numerieke waarden of zelfs Romeinse cijfers in hoofdletters of kleine letters.

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

Het opnemen van het “type”-attribuut in het geordende lijstelement (" “) levert een herziene visuele presentatie op zoals hieronder getoond:

“start”, waarmee het aantal items wordt bepaald dat aan het begin van de lijst moet worden weergegeven; en “omgekeerd”, waarmee de volgorde van de lijst wordt omgekeerd zodat deze vanaf het laatste item eerst wordt weergegeven.

Het start attribuut maakt het mogelijk om elementen te rangschikken vanaf elke gegeven positie door een geheel getal te gebruiken. Ter illustratie, wanneer je start="3" in het element opneemt, zonder een specifiek type te specificeren, zal het beginnen met het ordenen van de lijst vanaf het cijfer drie. In het geval dat men ofwel type="a" of type="I" specificeert, zal het beginnen met ordenen vanaf respectievelijk ‘c’ of ‘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> 

De bovenstaande code geeft de volgende weergave:

Met het “reversed” attribuut kunnen de elementen in een lijst opnieuw worden gerangschikt door de Booleaanse waarde ervan aan te passen, met een standaardinstelling van false.

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

Als de opgegeven code wordt uitgevoerd, wordt in de webbrowser een tabel weergegeven met specifieke kenmerken en inhoud zoals hieronder beschreven:html Table Title

Ongeordende lijst

Een ongeordende lijst is een efficiënte manier om verschillende items te ordenen en te presenteren die conceptueel met elkaar verbonden zijn, maar geen specifieke volgorde of rangschikking vereisen. Gewoonlijk gebruiken webbrowsers opsommingstekens om elk element binnen zo’n verzameling aan te duiden.

Om een ongestructureerd prikbord met een reeks items te genereren, moeten respectievelijk de HTML-elementen (om de container aan te duiden) en (voor elke afzonderlijke vermelding) worden gebruikt.

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

Deze code geeft de volgende weergave:

Het conventionele uiterlijk van een ongeordende lijst wordt aangeduid door een cirkelvorm die bekend staat als een “schijf”. Historisch gezien kon men gebruik maken van een “type” attribuut om de visuele weergave van een ongeordende lijst te bepalen.Helaas is dit specifieke kenmerk verouderd en wordt het niet langer ondersteund. In plaats daarvan wordt het sterk aangeraden om gebruik te maken van de algemeen toepasbare “CSS list-style-type eigenschap” om de gewenste aanpassingen met betrekking tot ongeordende lijsten te bereiken.

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

De bovengenoemde code wijzigt de visuele weergave van de verstrekte informatie door een HTML-structuur te genereren die meerdere div-elementen bevat, waarbij aan elk element verschillende attributen worden toegekend en het specifieke inhoud bevat.

Met de eigenschap CSS list-style-type kunnen verschillende opsommingstijlen worden gebruikt, zoals ronde vormen, aangepaste afbeeldingen, pictogrammen en symbolen. Door CSS te gebruiken dat de rangschikking van lijstitems verandert, kan men ongeordende lijsten gebruiken om navigatiemenu’s te genereren.

Geneste lijsten

Een geneste lijst bestaat in essentie uit een element uit een bredere lijst die er zelf deel van uitmaakt. De vorming van een dergelijke structuur kan worden bereikt door een harmonieuze mix van zowel geordende als ongeordende lijstitems. Dergelijke configuraties zijn in staat om ingewikkelde systemen van hiërarchie met meer verfijning weer te geven.

 <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> 

Deze code geeft de volgende weergave:

Beschrijvingslijst

De HTML-tag wordt gebruikt om een beschrijvingslijst te definiëren, bestaande uit beschrijvende termen ( ) en bijbehorende details ( ). Dit gestructureerde formaat biedt een duidelijke organisatie voor het presenteren van informatie op een hiërarchische manier, wat de leesbaarheid en het begrip verbetert.

 <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> 

De bovenstaande code geeft de volgende weergave:

Organiseer je inhoud met de juiste HTML-lijst

De keuze van de HTML-lijst die je gebruikt voor webontwikkeling moet gebaseerd zijn op de informatie die je aan de gebruiker wilt overbrengen. Als je bijvoorbeeld een seriële presentatie wilt maken, zoals de stappen die nodig zijn om een gerecht te bereiden of een klus te klaren, is een geordende lijst het meest geschikt.

Bij het organiseren van inhoud die geen stapsgewijs proces of opeenvolging vereist, zoals feitelijke gegevens of definities, kan het gebruik van een ongestructureerde lijst een praktischer alternatief zijn. Bovendien, in gevallen waarin men een compendium van termen en hun bijbehorende uitleg wil presenteren, of een compilatie van vragen en antwoorden, zal het gebruik van een definitielijst formaat optimale resultaten opleveren.