Lijsten of opsommingen zijn bedoeld om informatie overzichtelijk op een pagina te kunnen weergeven.

Er zijn drie soorten lijsten:

• geordende lijsten
• ongeordende lijsten
• definitielijsten

Elk van deze lijsten heeft zijn eigen kenmerken.

Geordende lijsten

Geordende lijsten worden ook wel genummerde lijsten of opsommingen genoemd. Elk item in de lijst krijgt een opeenvolgende nummer (1, 2, 3, ...) of letter (a, b, c, ...) mee.

De tags die worden gebruikt bij het maken van een geordende lijst zijn <ol> en </ol>, waarbij 'ol' staat voor 'Orderd List'. Om verschillende lijstitems weer te geven worden binnen de tags <ol> en </ol> de tag <li> en </li> toegepast. Deze tags gebruik je voor ieder item dat je in de opsomming wilt laten weergeven; de browser vervangt deze tags automatisch door een cijfer.

Hieronder vind je een opsommingslijst van enkele muziekgenres:

1. Pop
2. R&B
3. Jump
4. Rock

De HTML-code van deze lijst ziet er zo uit:

Als je dit in je browser bekijkt, kun je zien dat de lijst is genummerd. De opsomming krijgt automatisch een nummering in de vorm van 1, 2, 3, enzovoort. Dit is te veranderen door het attribuut type=" ..." toe te kennen aan de <ol>-tag.

Het attribuut kent vier andere mogelijkheden:

<ol type="A"> zorgt voor een opsomming met hoofdletters
<ol type="a"> zorgt voor een opsomming met kleine letters
<ol type="I"> zorgt voor een opsomming in Romeinse cijfers, met gebruik van hoofdletters
<ol type="i"> zorgt voor een opsomming in Romeinse cijfers, met gebruik van kleine letters

Wil je echter dat een opsomming start met bijvoorbeeld '5' of 'D' (dit kan handig zijn wanneer je een tweede lijst maakt op een volgende pagina), dan kun je het attribuut start="x" toevoegen aan de tag <ol>. De 'x' staat in dit geval voor de beginwaarde van de nummering van de opsomming.

Als je het nodig vindt, kun je ook een lijst binnen een lijst maken. Het nesten van lijsten kan in sommige gevallen de duidelijkheid van een webpagina vergroten.

In het volgende voorbeeld is er gebruik gemaakt van twee lijsten en twee verschillende manieren van nummering.

1. Plantenrijk
   1. Bomen
   2. Struiken
2. Dierenrijk
   1. Gewervelden
   2. Ongewervelden

Ongeordende lijsten

Een ongeordende lijst kun je gebruiken om lijsten te maken waarin de volgorde van de opsomming niet van belang is. De hoofd-tags voor het maken van een ongeordende lijst zijn <ul> en </ul>, waarbij 'ul' staat voor 'Unordered List'.

Ook binnen deze tags wordt de tag <li> en </li> gebruikt om een opsomming te maken. Als je geen attributen aan de <ul>-tag toevoegt, worden de opsommingen voorafgegaan door een zwarte punt (bullet).

Je kunt echter ook een zwart vierkant of een open cirkel als opsommingselement gebruiken. Daarvoor moet aan de <ul>-tag het attribuut type="square" of type="circle" worden toegevoegd.

• Fiets
  • Band
  • Ketting
• Bergen
• Vakantie

Definitielijsten

Een definitielijst wordt ook wel een woordenlijst genoemd, omdat het uiterlijk van deze lijst lijkt op dat van een woordenboek.

Het betekent in de praktijk dat je eerst een definitie krijgt en dat vervolgens daaronder een uitleg wordt gegeven, waarvan de tekst wordt ingesprongen.

De hoofdtags van de definitielijst zijn <dl> en </dl>, waarbij dl staat voor 'definition list'. Binnen deze hoofdtags wordt de tag <dt> en </dt> gebruikt om de uit te leggen definitie weer te geven en wordt de <dd> en </dd> tag gebruikt voor de uitleg zelf. Bijvoorbeeld:

Hond

Beest met vier poten

Vogel

Beest met twee poten

Vis

Beest zonder poten

Paard

Beest met voeten

Het volgende deel van de cursus is Frames in HTML
Meerdere webpagina's tegelijk in één venster tonen doe je met frames.