Koppen, tekst, links en afbeeldingen

Een webpagina is vooral tekst: koppen, alinea's en links naar andere pagina's. Daar komen afbeeldingen bij. In deze les leer je de vier elementen die je op bijna elke pagina gebruikt, en hoe je ze zo inzet dat ook zoekmachines en schermlezers je pagina snappen. Je maakt een receptpagina met een foto.

Koppen: h1 tot en met h6

HTML heeft zes niveaus van koppen: <h1> is de belangrijkste, <h6> de minst belangrijke.

<h1>Appeltaart</h1>
<h2>Ingrediënten</h2>
<h2>Bereiding</h2>
<h3>Het deeg</h3>
<h3>De vulling</h3>

Koppen vormen samen een inhoudsopgave van je pagina:

Appeltaart
├── Ingrediënten
└── Bereiding
    ├── Het deeg
    └── De vulling

Regels:

• Eén <h1> per pagina: het onderwerp van de pagina.
• Sla geen niveaus over: na een <h2> komt een <h3>, geen <h4>.
• Kies een kop om wat hij betekent, niet om hoe groot hij is. De grootte pas je later aan met CSS.

Schermlezergebruikers springen van kop naar kop om een pagina te verkennen, zoals jij met je ogen de vette regels scant. Een kop die alleen "groot" is maar geen kop, of een niveau dat ontbreekt, maakt dat lastig.

Alinea's en nadruk

<p>Deze appeltaart is het recept van mijn oma. Hij is <em>niet</em> moeilijk,
maar je hebt wel <strong>een springvorm van 24 cm</strong> nodig.</p>

Gebruik ze om wat ze betekenen. Wil je alleen iets cursief voor de vorm, dan doe je dat met CSS.

Links

Een link maak je met <a> (anchor) en het attribuut href (hypertext reference):

<a href="https://www.voedingscentrum.nl">Voedingscentrum</a>
<a href="contact.html">Neem contact op</a>
<a href="#bereiding">Direct naar de bereiding</a>
<a href="mailto:sam@example.nl">Mail Sam</a>

Voor een ankerlink geef je het doel een id:

<h2 id="bereiding">Bereiding</h2>

Een id moet uniek zijn op de pagina en mag geen spaties bevatten.

Goede linkteksten

Schermlezers kunnen alle links op een pagina als lijstje voorlezen. Bij "klik hier", "klik hier", "lees meer" weet niemand waar ze heen gaan.

<!-- slecht -->
Het recept staat <a href="recept.pdf">hier</a>.

<!-- goed -->
Download <a href="recept.pdf">het recept als pdf</a>.

Afbeeldingen

<img src="img/appeltaart.jpg" alt="Appeltaart met een rooster van deeg, net uit de oven" width="800" height="600">

• <img> is een leeg element: geen sluittag.
• src: waar de afbeelding staat.
• alt: een alternatieve tekst voor wie de afbeelding niet kan zien: schermlezers, zoekmachines, en iedereen bij wie het plaatje niet laadt.
• width en height (in pixels, zonder px): de browser reserveert dan alvast ruimte, zodat de tekst niet verspringt als de afbeelding binnenkomt.

Een goede alt-tekst

Vraag jezelf: wat zou ik zeggen als ik deze pagina aan de telefoon voorlees?

Een lege alt="" betekent: dit plaatje is decoratie, sla het over. Laat het attribuut nooit helemaal weg; dan leest een schermlezer vaak de bestandsnaam voor.

Relatieve paden

Je site heeft deze mappen:

recepten/
├── index.html
├── appeltaart.html
├── img/
│   └── appeltaart.jpg
└── over/
    └── index.html

.. betekent: één map omhoog. Een pad zonder / aan het begin is relatief aan het bestand waar de link in staat.

Uitgewerkt voorbeeld: een receptpagina

<!doctype html>
<html lang="nl">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Appeltaart van oma · Recepten</title>
  </head>
  <body>
    <h1>Appeltaart van oma</h1>
    <p><a href="#bereiding">Direct naar de bereiding</a></p>

    <img src="img/appeltaart.jpg" alt="Appeltaart met een rooster van deeg, net uit de oven" width="800" height="600">

    <p>Een klassieke Hollandse appeltaart. Reken op <strong>1,5 uur</strong>, waarvan een uur in de oven.</p>

    <h2>Ingrediënten</h2>
    <p>300 g bloem, 200 g boter, 150 g suiker, 1 ei, 1 kg appels, kaneel.</p>

    <h2 id="bereiding">Bereiding</h2>
    <h3>Het deeg</h3>
    <p>Kneed bloem, boter, suiker en het ei tot een soepel deeg.</p>
    <h3>De vulling</h3>
    <p>Schil de appels, snijd ze in stukjes en meng met kaneel en suiker.</p>

    <p>Meer weten over gezond bakken? Kijk bij het
      <a href="https://www.voedingscentrum.nl">Voedingscentrum</a>.</p>
  </body>
</html>

Voorspel: wat gebeurt er als img/appeltaart.jpg niet bestaat? De browser toont een klein icoontje (of niets) met de alt-tekst. Daarom is een goede alt-tekst ook voor ziende bezoekers nuttig.

De ingrediënten staan nu in één alinea. Dat is niet ideaal; in de volgende les maak je er een lijst van.

Typische fouten

Oefeningen

Oefening 1. Schrijf de koppenstructuur voor een pagina over je stad met de onderdelen: geschiedenis, bezienswaardigheden (met daaronder musea en parken) en bereikbaarheid.

<h1>Utrecht</h1>
<h2>Geschiedenis</h2>
<h2>Bezienswaardigheden</h2>
<h3>Musea</h3>
<h3>Parken</h3>
<h2>Bereikbaarheid</h2>

Oefening 2. Schrijf een alt-tekst voor: (a) een foto van een team van vijf collega's voor het kantoor, op de pagina Over ons; (b) een icoontje van een telefoon naast het telefoonnummer.

Oefening 3. Je staat in blog/2026/recept.html. Wat is het pad naar img/logo.png in de hoofdmap?

Lab: receptpagina met foto

Samenvatting

• Koppen h1–h6 vormen de inhoudsopgave; één h1, geen niveaus overslaan.
• <p> voor alinea's, <em> en <strong> voor betekenis, niet voor opmaak.
• <a href>: extern, relatief, #anker of mailto:; schrijf linkteksten die op zichzelf duidelijk zijn.
• <img> altijd met alt: beschrijvend, of leeg bij decoratie.
• Relatieve paden met ..; kleine letters en geen spaties in bestandsnamen.

Volgende les: lijsten en tabellen.