Hoe wordt een lijst gemaakt? De basis html-codes

Installeer een nieuwere versie van je browser als je deze video wilt bekijken.

Ongenummerde lijsten

Een ongenummerde lijst of opsomming staat binnen de volgende twee tags: <ul> en </ul>. De afkorting ‘ul’ staat voor: unordered list, oftewel: ongeordende lijst. In de praktijk betekent dat dat er geen cijfers voor de verschillende onderdelen uit zo’n lijst komen te staan, maar dichte rondjes (of bullets).

Binnen deze twee lijst-tags komen de verschillende lijstonderdelen (list items) te staan. Elk list item heeft op zijn beurt ook weer een begin- en een eindtag: <li> en </li>.

Tussen elke list item tag kun je nu de inhoud van dat onderdeel uit die lijst neerzetten. Meestal zal dat een paar woorden of een wat langer stuk tekst zijn, maar je zou er ook best een plaatje kunnen neerzetten. Als de inhoud van het onderdeel een wat langer stuk tekst is, zet ik het zelf vaak ook nog eens tussen een set paragraaf-tags (<p> en </p>), maar dat hoeft niet per se.

Als je verder niets doet, komen er voor de list items van een ongenummerde lijst vanzelf bullets te staan (in html-taal heet dat een disc). Maar behalve bullets kun je ook open rondjes laten weergeven (circle), of kleine, dichte vierkantjes (square), zoals ik in het voorbeeld heb gedaan.

Wil je bijvoorbeeld dat je lijst open rondjes krijgt in plaats van dichte, dan voeg je aan de openingstag van de lijst een style toe, met een waarde voor de eigenschap list-style-type. Die waarde is dan circle. Dus wil je dat je lijst open rondjes heeft in plaats van dichte, dan komt de openingstag van je lijst er zo uit te zien: <ul style="list-style-type: circle;">

Een lijst zónder opsommingstekens kan trouwens ook: dan krijgt de eigenschap list-style-type de waarde none.

Hieronder vind je de html-code voor de lijst met de dagen van de week zoals die bovenaan staat:

    <ul style="list-style-type: square;">
        <li>maandag</li>
        <li>dinsdag</li>
        <li>woensdag</li>
        <li>donderdag</li>
        <li>vrijdag</li>
    </ul>

Genummerde lijsten

Een genummerde lijst maak je op dezelfde manier als een ongenummerde lijst, alleen vervang je nu de afkorting ‘ul’ door ‘ol’. Dit staat voor: ordered list, ofwel: geordende lijst. De begin- en eind-tags van zo’n lijst zijn <ol> en </ol>. De bullets uit het eerste voorbeeld veranderen daardoor vanzelf in cijfers.

De onderdelen uit een genummerde opsomming staan – net zoals bij een ongenummerde opsomming – elk weer tussen een set list item tags: <li> en </li>.

Wil je dat je opsomming niet met het cijfer 1 begint, maar met het cijfer 5 bijvoorbeeld, dan voeg je aan de begin-tag van de lijst de code start="5" toe. Die begin-tag wordt dan: <ol start="5">. Je bereikt trouwens hetzelfde als je binnen de openingstag van het eerste list item de code value="5" neerzet, dus: <li value="5">.

Behalve cijfers, kun je ook letters voor een genummerde opsomming laten zetten, of romeinse cijfers. Daarvoor voeg je aan de openingstag van de lijst een style toe met een waarde voor de eigenschap list-style-type (net zoals wanneer je de bullets van een ongenummerde lijst wilt veranderen in vierkantjes). Maar bij een genummerde lijst moet je hier andere waardes gebruiken: lower-latin (kleine letters) bijvoorbeeld, of upper-latin (hoofdletters), lower-roman (kleine romeinse cijfers), of upper-roman (grote romeinse cijfers).

De html-code voor de kleurenlijst met de kleine romeinse cijfers uit het voorbeeld is dan:

    <ol style="list-style-type: lower-roman;">
        <li>rood</li>
        <li>oranje</li>
        <li>geel</li>
        <li>groen</li>
        <li>blauw</li>
    </ol>

Een lijst bínnen een lijst

Ten slotte wil ik je ook nog even laten zien hoe je een lijst bínnen een lijst zet. In het voorbeeld hiernaast heb ik dezelfde lijst neergezet als uit het tweede voorbeeld, alleen heb ik aan het eerste item nog een sublijst toegevoegd. De ‘hoofdlijst’ is een geordende lijst (ol), en de sublijst een ongeordende (ul). De html-code voor deze lijst vind je hieronder:

    <ol>
        <li>rood
            <ul>
                <li>donkerrood</li>
                <li>felrood</li>
                <li>lichtrood</li>
            </ul>
        </li>
        <li>oranje</li>
        <li>geel</li>
        <li>groen</li>
        <li>blauw</li>
    </ol> 
    

Uit dit laatste voorbeeld wordt gelijk nog iets anders duidelijk: de ongenummerde sublijst heeft open rondjes gekregen als opsommingsteken. Als het geen lijst bínnen een lijst was geweest, waren dit gewoon dichte rondjes geweest. Maar je weet nu hoe je dit kunt veranderen als je dat wilt.

Ook zie je misschien dat de (sub)lijst iets meer inspringt dan je had verwacht. Dit doen browsers automatisch, en ze doen het bovendien niet allemaal op dezelfde manier. Wil je zelf bepalen of en zo ja, hoe ver de list items inspringen, dan zet je in de begin-tag van de lijst nog een stijleigenschap neer: style="margin-left: 16px;"