Wat een webpagina is

Elke pagina die je opent, begint als een gewoon tekstbestand. Klik met de rechtermuisknop op bijna elke pagina, kies Paginabron weergeven, en je kunt de HTML lezen die de server heeft gestuurd.

Een pagina is een tekstbestand

Als je een adres in een browser typt, vraagt de browser een server om een bestand en krijgt gewone tekst terug. Die tekst is geschreven in HTML, de HyperText Markup Language. De browser leest hem van boven naar beneden, bepaalt welke delen koppen, alinea's, links en afbeeldingen zijn en tekent dan de pagina die je ziet. Je kunt dit op bijna elke site controleren: klik met de rechtermuisknop op de pagina en kies Paginabron weergeven. Achter de kleuren en de opmaak zit een lang, leesbaar tekstbestand.

HTML is een opmaaktaal, geen programmeertaal. Het heeft geen lussen en doet geen berekeningen. Het zet labels op inhoud: deze regel is de hoofdkop, deze drie regels zijn een lijst, deze zin verwijst naar een andere pagina. Twee andere talen reizen er meestal mee. CSS bepaalt hoe dingen eruitzien (kleuren, lettertypen, ruimte, opmaak) en JavaScript laat de pagina reageren op klikken en typen. Deze cursus behandelt de eerste laag. De CSS-cursus behandelt de tweede.

Het skelet dat elke pagina deelt

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Corner Bakery</title>
  </head>
  <body>
    <h1>Corner Bakery</h1>
    <p>Fresh bread every morning from 7 am.</p>
  </body>
</html>

De eerste regel, <!DOCTYPE html>, is een overblijfsel uit het vroege web. Hij heeft tegenwoordig nog maar één taak: de browser vertellen de standaardmodus te gebruiken in plaats van een oude compatibiliteitsmodus die de fouten van browsers uit de jaren 1990 nabootst, dus laat hem altijd staan. Daarna komt het element <html>, dat het hele document omsluit. Het attribuut lang geeft de taal van de pagina aan. Schermlezers gebruiken het om de juiste uitspraak te kiezen, en vertaalhulpmiddelen gebruiken het om te weten wat ze vertalen.

In <html> zitten twee delen. De <head> bevat informatie over de pagina die niet in de pagina zelf wordt getekend. <meta charset="utf-8"> zegt welke tekencodering het bestand gebruikt; UTF-8 kan de letters van elk schriftsysteem opslaan, ook Koreaans, zodat tekst niet in vreemde symbolen verandert. De <title> is de naam die op het browsertabblad, in bladwijzers en in zoekresultaten staat, en het is het eerste wat een schermlezer meldt als de pagina opent. De <body> bevat alles wat op het scherm verschijnt.

Van tekst naar een boom

De browser bewaart je HTML niet als één lange tekenreeks. Hij zet hem om in een boom van objecten, het DOM, het Document Object Model. Elk element wordt een knoop, en elementen die binnen een ander element staan, worden zijn kinderen. In de figuur hieronder is title een kind van head, en zijn h1 en p kinderen van body. CSS-selectors en JavaScript werken allebei op deze boom, en dat is één reden waarom zorgvuldig nesten ertoe doet.

Browsers zijn toegeeflijk. Vergeet je een afsluitende tag, dan volgt de parser herstelregels uit de HTML-standaard en bouwt hij toch een boom, maar de herstelde boom is misschien niet de boom die je bedoelde. Wie de structuur gewoon goed leert schrijven, bespaart zich later veel verwarrend zoekwerk.

Wie de regels schrijft

Tim Berners-Lee schreef in maart 1989 het eerste voorstel voor het World Wide Web terwijl hij bij CERN werkte, en eind 1990 draaiden daar de eerste webserver en browser. HTML is sindsdien enorm gegroeid. Tegenwoordig wordt het gedefinieerd door de HTML Living Standard, die wordt onderhouden door de WHATWG, een groep die door browsermakers is opgezet. In 2019 spraken het W3C en de WHATWG af aan deze ene versie te werken. Living betekent dat het document geen versienummers heeft en voortdurend wordt bijgewerkt, dus de naam HTML5 die je nog in boeken ziet, is maar een losse aanduiding.

De editor hieronder werkt als een kleine browser. Typ links en het resultaat verschijnt even later rechts. Afspelen tekent het resultaat meteen opnieuw. Als je denkt dat je klaar bent, druk dan op Controleren: de pagina voert een paar tests uit op je HTML en vertelt welke nog mislukken. Opnieuw beginnen brengt de startcode terug.