Ga naar hoofdinhoud

Koppen en lijsten

Wat ga je leren?​

Koppen van verschillende grootte, en informatie netjes in een lijst.

Theorie​

Koppen​

HTML heeft zes niveaus van koppen, van <h1> (de grootste) tot <h6> (de kleinste):

<h1>Hoofdtitel</h1>
<h2>Ondertitel</h2>
<h3>Nog kleiner</h3>
<h4>Nog kleiner</h4>
<h5>Bijna de kleinste</h5>
<h6>De kleinste</h6>

Gebruik <h1> maar één keer per pagina — voor de hoofdtitel. Gebruik <h2> voor secties. Onder <h3> kom je zelden; <h4> tot <h6> gebruik je alleen op pagina's met veel lagen.

Lijsten​

Er zijn twee soorten lijsten:

  • Ongeordende lijst (<ul>) — met bolletjes
  • Geordende lijst (<ol>) — met nummers

Elk item staat in een <li> tag:

<ul>
  <li>Appel</li>
  <li>Banaan</li>
</ul>

<ol>
  <li>Eerst dit</li>
  <li>Dan dit</li>
</ol>

Predict​

Wat is het verschil in de browser tussen <ul> en <ol>?

Klik hier voor het antwoord
  • <ul> toont de items met bolletjes (bullets)
  • <ol> toont de items met nummers (1, 2, 3…)

De volgorde van items in een <ul> maakt niet uit. In een <ol> wel.

Probeer het zelf.​

Editor laden...

Investigate​

Experimenteer met de code:

  • Wat gebeurt er als je <ul> verandert in <ol>?
  • Voeg een <h4> toe tussen twee <h2>-secties. Zie je aan de grootte alleen al welke bij welke sectie hoort?
  • Kun je een lijst maken binnen een lijst? Probeer het.

Modify​

Opdracht: Voeg een derde sectie toe aan de pagina met de kop "Hobby's" en een ongeordende lijst met minstens drie van jouw hobby's.

Editor laden...
Tip

Maak een <h2> voor de kop en een <ul> met <li> items eronder. Zet dit geheel vóór </body>.

Antwoord
<h2>Hobby's</h2>
<ul>
  <li>Voetbal</li>
  <li>Tekenen</li>
  <li>Gamen</li>
</ul>

Make​

Opdracht: Maak een gestructureerde paklijst in HTML voor je volgende vakantie. Begin met een <h1> als paginatitel, en gebruik daaronder een ongeordende lijst (<ul>) voor kleding en een geordende lijst (<ol>) voor je top 3 met de hoogste prioriteit. Zet boven elke lijst een <h2>.

Editor laden...
Tip

Zorg ervoor dat elk item (zowel in de <ol> als de <ul>) in een <li> tag staat.

Antwoord
<h1>Paklijst vakantie</h1>

<h2>Kleding</h2>
<ul>
  <li>Zwembroek</li>
  <li>Zonnebril</li>
  <li>Zonnebrand</li>
</ul>

<h2>Top 3 prioriteit</h2>
<ol>
  <li>Paspoort</li>
  <li>Telefoonoplader</li>
  <li>Portemonnee</li>
</ol>

Er gaat iets mis​

<li> buiten een lijst gebruiken

<li>Dit item staat nergens in</li>

Een <li> moet binnen een <ul> of <ol> staan. Verraderlijk is dat het er goed uitziet: de browser tekent er een bolletje bij, alleen zonder de inspringing die de lijst eromheen geeft. Screenreaders en zoekmachines zien dan geen lijst, en zodra je de lijst later opmaakt met CSS valt dat ene item buiten de boot.