HTML - Lijstjes, opsommingen


Opsommingen kunnen op twee verschillende manieren worden geplaatst op een pagina, er kan gekozen worden tussen het plaatsen van een Unordered list en een Ordered list.

Unordered list

Als eerste de Unordered list. Deze opsomming kan voorzien worden bijvoorbeeld een punt of een cirkel voor elke opsomming en er is geen logische volgorde. De opsomming wordt geopend met <ul> en aan het einde afgesloten met </ul>. De items krijgen <li> en </li>.

<ul>
        <li>WebSonic.nl</li>
        <li>Webtools</li>
        <li>PC Tips en trucs</li>
        <li>Tutorials</li>
</ul>


Standaard staan er zwarte rondjes voor elk item maar dit kan gewijzigd worden. Dit kan op de onderstaande manier maar beter is altijd om dit in een CSS bestand in te stellen.

type="square": Vierkantjes
type="circle": Open cirkel


<ul type="circle">
        <li>WebSonic.nl</li>
        <li>Webtools</li>
        <li>PC Tips en trucs</li>
        <li>Tutorials</li>
</ul>

Ordered list

Het plaatsen van een Ordered list gaat op dezelfde manier als hierboven op een kleine wijziging na. Je maakt in dit geval een opsomming met cijfers, de items volgen elkaar dus op zoals hieronder. Een Ordered list open je met met <ol> en sluit je weer af met </ol>.

  1. WebSonic.nl
  2. Webtools
  3. PC Tips en trucs
  4. Tutorials

<ol>
        <li>WebSonic.nl</li>
        <li>Webtools</li>
        <li>PC Tips en trucs</li>
        <li>Tutorials</li>
</ol>


Net als voor de unordered list hierboven zijn er enkele opties beschikbaar voor de opsomming maar ook hiervoor is het zo dat je dit beter in een CSS bestand kunt plaatsen.

type="A": Hoofdletters
type="a": Kleine letters
type="I": Romeinse cijfers
type="i": Kleine Romeinse cijfers


<ol type="a">
        <li>WebSonic.nl</li>
        <li>Webtools</li>
        <li>PC Tips en trucs</li>
        <li>Tutorials</li>
</ol>

Definitielijst

Als laatste iets soortgelijks, een definitielijst. Deze open je met <dl> en sluit je af met </dl>. Dan komen de tags <dt> en </dt> voor de definitie, uitleg volgt met <dd> en </dd>.

<dl>
        <dt>WebSonic.nl</dt>
        <dd>Webtools</dd>
        <dd>PC Tips en trucs</dd>
        <dd>Tutorials</dd>
</dl>

WebSonic.nl
Webtools
PC Tips en trucs
Tutorials