Skip to content
ICT Fusion Knowledgebase

HTML: de basis van het web

Wanneer jij in de adresbalk van jouw webbrowser een website bezoekt (bijvoorbeeld https://hva.nl/), vraagt jouw computer een webpagina op bij een server. Die server stuurt HTML (structuur), CSS (opmaak), JavaScript (interactie) en bestanden zoals afbeeldingen of video.

HTML (HyperText Markup Language) is geen programmeertaal maar een opmaaktaal. Het beschrijft de structuur en betekenis van content. CSS en JavaScript bouwen daarop voort voor respectievelijk vormgeving en gedrag.

Hoe ziet een HTML-document eruit?

Een minimale, geldige HTML-pagina:

<!doctype html>
<html lang="nl">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mijn eerste pagina</title>
  </head>
  <body>
    <h1>Hallo wereld</h1>
    <p>Dit is mijn eerste HTML-pagina.</p>
  </body>
</html>
  • <!doctype html>: vertelt de browser dat het om HTML5 gaat.
  • : de root van het document; lang helpt toegankelijkheid en SEO.
  • : metadata (geen zichtbare content): meta, title, links naar CSS/JS.
  • : zichtbare content: koppen, tekst, afbeeldingen, navigatie, enz.

Elementen, tags en attributen

  • Element: een bouwblok, bv. <p>...</p>.
  • Tag: de notatie van een element, met een starttag en meestal eindtag.
  • Attribuut: extra informatie in de starttag, bv. <a href="/">Home</a>.

Voorbeeld met attributen:

<a href="https://www.hva.nl" target="_blank">Bezoek HvA</a>
  • href: linkbestemming.
  • target=”_blank”: opent in nieuw tabblad.

Veelgebruikte basis-elementen

Koppen en tekst:

<h1>Pagina titel</h1>
<h2>Sectie</h2>
<p>Een alinea met tekst. <strong>Belangrijk</strong> en <em>benadrukt</em>.</p>

Lijsten:

<ul>
  <li>Ongeordende lijst</li>
  <li>Met meerdere items</li>
  <li>Gebruik <code>ul</code> en <code>li</code></li>
</ul>

<ol>
  <li>Geordende lijst</li>
  <li>Met nummers</li>
</ol>

Afbeeldingen en links:

<img src="images/logo.png" alt="HvA-logo" width="200" height="60">
<a href="/contact">Contact</a>

Let op: alt-tekst is verplicht voor toegankelijkheid. Beschrijf wat de afbeelding voorstelt of laat leeg (alt="") als decoratief.

Containers:

<div>Blokcontainer (geen semantiek)</div>
<span>Inlinecontainer (geen semantiek)</span>

Gebruik liever semantische elementen (zie hieronder) dan generieke div/span.

Semantische HTML

Semantische elementen geven betekenis aan structuur, wat helpt voor toegankelijkheid, SEO en onderhoudbaarheid.

<header>Header van de pagina</header>
<nav>Navigatie</nav>
<main>
  <article>
    <h1>Artikel titel</h1>
    <p>Inhoud van het artikel.</p>
  </article>
  <aside>Gerelateerde informatie</aside>
  <section id="faq">
    <h2>Veelgestelde vragen</h2>
  </section>
</main>
<footer>Voettekst</footer>

Belangrijke semantische elementen: header, nav, main, section, article, aside, footer, figure, figcaption.

Block vs inline, nesten en valideren

  • Block-elementen (bv. div, section, p, h1) nemen volledige breedte en staan onder elkaar.
  • Inline-elementen (bv. a, span, img, strong, em) lopen mee in de tekst.
  • Nesten: elementen mogen in elkaar, maar hou je aan de regels (bv. geen div direct in ul zonder li).
  • Valideren: controleer je HTML op fouten via https://validator.w3.org/.

Document head: essentiële metadata

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Pagina titel</title>
  <meta name="description" content="Korte beschrijving van de pagina">
  <link rel="stylesheet" href="/styles.css">
  <script defer src="/app.js"></script>
</head>
  • charset: gebruik altijd UTF-8.
  • viewport: nodig voor goede weergave op mobiel.
  • description: beknopte beschrijving voor zoekmachines.
  • link/script: koppel CSS en JavaScript (bij voorkeur defer).

Bestands- en padstructuren

  • Relatieve paden: images/foto.jpg verwijst relatief vanaf het huidige bestand.
  • Absolute paden: /images/foto.jpg verwijst vanaf de site-root.
  • Externe URL: https://... voor bronnen buiten je site.

Tabelbasis

Om data in een tabel weer te geven kun je gebruik maken van de <table> tag.

<table>
  <caption>Rooster</caption>
  <thead>
    <tr><th>Dag</th><th>Vak</th></tr>
  </thead>
  <tbody>
    <tr><td>Ma</td><td>Programmeren</td></tr>
    <tr><td>Di</td><td>Web</td></tr>
  </tbody>
</table>

Formulieren: de basis

<form action="/inschrijven" method="post">
  <label for="naam">Naam</label>
  <input id="naam" name="naam" type="text" required>

  <label for="email">E-mail</label>
  <input id="email" name="email" type="email" required>

  <button type="submit">Versturen</button>
</form>

Tips: - Koppel elk input-element aan een label via for/id. - Gebruik passende type-attributen (email, number, date, checkbox, radio, file). - Voeg name toe voor serververwerking; zonder name wordt er niets verzonden. - Gebruik required, min, max, pattern voor basisvalidatie.

Toegankelijkheid (A11y) essentials

  • Tekstalternatieven: alt op afbeeldingen; beschrijvend en beknopt.
  • Koppenhiërarchie: precies één h1 per pagina-inhoudsgebied; logische volgorde.
  • Kleurcontrast: voldoende contrast (check met tooling).
  • Focus: elementen moeten met toetsenbord bereikbaar zijn; gebruik native HTML waar mogelijk.
  • Landinstelling: lang="nl" op html.

Opmaak en comments

  • Inspringing: consistent, 1 tab (4 spaties) is gebruikelijk.
  • Leesbaarheid: korte regels, semantische elementen, betekenisvolle class-namen.
  • Comments: <!-- uitleg of notitie --> geen geheime info in comments zetten.

Veelgemaakte fouten

  • Vergeten eindtags (bv. </li>, </p>).
  • Slechte nesting (bv. a binnen button).
  • Afbeeldingen zonder alt.
  • Meerdere h1 zonder reden of geen koppenstructuur.
  • Layout met tabellen i.p.v. CSS.

Mini-oefeningen

1) Maak een pagina met header, nav, main, section, article en footer. Zet in elke sectie een kop en een korte alinea.

2) Voeg een lijst met drie links toe in de nav en een afbeelding met een goede alt-tekst in main.

3) Maak een simpel formulier met velden: naam (verplicht), e-mail (verplicht, type email) en een verstuurknop. Valideer met de browser.

4) Valideer je pagina via https://validator.w3.org/ en los eventuele fouten op.

Verder lezen

  • MDN Web Docs – HTML: https://developer.mozilla.org/docs/Web/HTML
  • WHATWG HTML Living Standard: https://html.spec.whatwg.org/
  • ismijnsitetoegankelijk.nl: https://ismijnsitetoegankelijk.nl/

Met een solide HTML-structuur leg je de basis voor goede styling met CSS en interactieve functionaliteit met JavaScript. Bouw eerst semantisch en correct; maak het daarna mooi en dynamisch.