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

Probeer eerst zelf, klap dan het antwoord uit.

1. Verander <ul> in <ol>, en </ul> in </ol>. Wat gebeurt er met de lijst met eten?
   Antwoord

   De bolletjes voor Pizza, Pasta en Sushi worden de nummers 1, 2 en 3. Een <ol> is een genummerde lijst, een <ul> een lijst met bolletjes.
2. Zet een <h4> met eigen tekst tussen de lijst met eten en de kop Top 3 films. Zie je aan de grootte bij welke sectie hij hoort?
   Antwoord

   De <h4> is maar 16 pixels, even groot als de lijsttekst en veel kleiner dan de <h2>-koppen van 24 pixels. Daaraan zie je dat hij een onderdeel is van de sectie erboven (Eten), en geen nieuwe sectie naast Top 3 films.
3. Kun je een lijst in een lijst maken? Zet een nieuwe <ul> met twee <li>-items binnen het <li> van Pasta, vlak voor </li>.
   Antwoord

   Ja. De binnenste lijst schuift naar rechts in en krijgt open rondjes in plaats van dichte bolletjes. Zo zie je dat die items bij Pasta horen.

Editor laden...

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.