Hoe het web werkt: browsers, servers en HTTP

Een webpagina op je scherm is het resultaat van werk op twee plaatsen. Je browser vraagt bronnen op en een server stuurt antwoorden. Die rollen verklaren zowel een eenvoudige persoonlijke website als een pagina die uit verschillende diensten is samengesteld.

Wie vraagt en wie antwoordt

Een client is een apparaat en programma dat iets opvraagt. Chrome, Edge, Firefox en Safari zijn browserclients. Een server is een computer met software die verzoeken aanneemt en opgeslagen bestanden of zelf samengestelde inhoud terugstuurt. Apache en nginx zijn voorbeelden van webserversoftware. Het woord “server” kan de computer of die software aanduiden.

Bij een HTTP-uitwisseling stuurt de client een verzoek waarin staat wat hij wil. De server stuurt een antwoord op dat verzoek. Vergelijk het met eten bestellen aan een toonbank: het bestelbonnetje vraagt om iets en het dienblad is het antwoord. De browser begint de uitwisseling; een gewoon pagina-antwoord reageert op een verzoek.

Client en server zijn rollen, geen vaste soorten machines. Een laptop kan zowel je browser als een testserver uitvoeren. Een website wordt gehost als een bereikbare server de bronnen beschikbaar maakt. Een server die je via localhost bereikt, draait op je eigen computer; dat adres brengt de browser van iemand anders niet naar jouw laptop.

Een pagina is een verzameling bronnen

Een bron is iets wat een adres kan aanduiden: een pagina, stijlblad, script, afbeelding, lettertype, video of stukje gegevens. Het eerste paginaverzoek haalt meestal HTML op. De browser leest die HTML om de andere benodigde bronnen te ontdekken en vraagt ze elk afzonderlijk op.

Een artikel noemt bijvoorbeeld twee stijlbladen, één script en vijf afbeeldingen. Tel ook de HTML mee:

• Eén HTML-bron vormt het begin van de pagina.
• Twee CSS-bronnen leveren de stijlen.
• Eén JavaScript-bron levert gedrag.
• Vijf afbeeldingsbronnen leveren afbeeldingen.

Dat zijn negen bronnen en, bij een lege browsercache, negen HTTP-verzoeken voor die bronnen. Een cache bewaart gedownloade kopieën voor hergebruik. Nog geldige bestanden in de cache kunnen bij een volgend bezoek het aantal verzoeken over het netwerk verminderen.

De bronnen hoeven niet op dezelfde server te staan. De HTML kan van www.example.com komen, afbeeldingen van images.example.net en een video van een andere dienst. Het adres van elke bron vertelt de browser waar hij die moet opvragen. Een geslaagd HTML-verzoek bewijst dus niet dat ook elke afbeelding of elk script is geladen.

Opgeslagen bestanden en gegenereerde antwoorden

In beide gevallen ontvangt de browser bronnen die hij kan lezen of weergeven. Een gegenereerde HTML-pagina is nog steeds HTML wanneer die de browser bereikt. De browser bevat gedownloade kopieën, terwijl de server de oorspronkelijke bestanden van de website bewaart of het programma dat ze samenstelt.

Het web werkt via het internet

Het internet is het wereldwijde netwerk dat gegevens tussen computers transporteert. Het web is een dienst die dat netwerk gebruikt: gekoppelde bronnen die via URL's worden aangeduid en via HTTP worden uitgewisseld. Ook e-mail, onlinegames en videobellen gebruiken het internet. Het web is één toepassing van het netwerk, niet de naam voor elke activiteit erop.

Als je bij een webadres op Enter drukt, beginnen verschillende taken. Elke taak heeft een eigen doel, dus een fout in de ene fase laat andere aanwijzingen achter dan een fout in een andere fase.

Lees het adres en vind de server

Neem https://www.example.com/news.html. De browser leest https als het schema, www.example.com als de host en /news.html als het opgevraagde pad. Tekst zoals “weer morgen” wordt normaal gesproken als zoekopdracht behandeld en naar de standaardzoekmachine gestuurd.

De browser heeft een IP-adres nodig, een numeriek netwerkadres zoals 203.0.113.10 of het IPv6-voorbeeld 2001:db8::1. DNS, het Domain Name System, vindt adressen die bij domeinnamen horen. De browser en het besturingssysteem kunnen een recent DNS-antwoord uit een cache hergebruiken, zodat niet voor elk paginabezoek een nieuwe opzoeking nodig is.

Maak verbinding en beveilig de uitwisseling

De browser maakt verbinding met de server. Voor HTTPS stelt hij een versleutelde verbinding in met TLS. De server biedt een certificaat aan waarmee de browser zijn identiteit voor het gevraagde domein kan controleren. Versleuteling beschermt de berichten tegen lezen of wijzigen door anderen op het netwerk. Een indicator voor een beveiligde verbinding geeft die bescherming aan; ook een oplichtingssite kan een geldig certificaat hebben.

Gegevens reizen over het netwerk in kleine stukken die pakketten heten, via apparaten die routers worden genoemd, en worden op de bestemming weer samengevoegd. De browser en het besturingssysteem regelen dat transport, terwijl de browser met de HTTP-berichten werkt.

Verzoek, ontvangst en opbouw

1. De browser stuurt een HTTP-verzoek voor /news.html.
2. De server antwoordt met een statuscode, headers die het antwoord beschrijven en meestal berichtinhoud met de HTML.
3. De browser leest de HTML en vraagt de genoemde stijlbladen, scripts, afbeeldingen en andere bronnen op.
4. Hij bouwt de pagina op, past stijlen toe, voert scripts uit en tekent inhoud op het scherm.

Verschillende verzoeken om bronnen kunnen elkaar overlappen. De browser kan tekst tonen voordat elke afbeelding is gedownload; de pagina wordt geleidelijk opgebouwd.

Stel dat de HTML van een kleine pagina op https://example.org/ alleen style.css en logo.png noemt, beide op dezelfde host. Zonder relevante vermeldingen in de cache heeft één host een DNS-opzoeking nodig en zijn voor de drie bronnen drie HTTP-verzoeken nodig. Bij een later bezoek voorkomt een DNS-antwoord in de cache die opzoeking. Nog geldige kopieën van bronnen kunnen opnieuw worden gebruikt en oudere kopieën kunnen bij de server worden gecontroleerd. Een antwoord 304 Not Modified betekent dat een opgeslagen kopie nog actueel is en dat de inhoud van het bestand niet opnieuw hoeft te worden verstuurd.

Zoek een fout aan de hand van aanwijzingen

Een DNS-fout heeft geen HTTP-statuscode omdat er geen HTTP-antwoord is aangekomen. Een 404 is anders: de server heeft geantwoord. Chrome kan een naamfout zoals DNS_PROBE_FINISHED_NXDOMAIN tonen, maar de tekst is een browsermelding, geen antwoord van de server.

Een URL, of Uniform Resource Locator, duidt één bron aan. De domeinnaam is maar één onderdeel van dat adres. Het volledige patroon is scheme://host:port/path?query#fragment, al laten veel adressen optionele onderdelen weg.

Ontleed een adres

Lees dit adres in onderdelen:

https://shop.example.com:8443/products/shoes.html?color=blue&size=42#reviews

De leestekens scheiden de onderdelen: : volgt op het schema, ? begint de query en # begint het fragment. De scheidingstekens maken geen deel uit van de waarden van de query of het fragment.

Schema, host en poort

Het URL-schema bepaalt hoe het adres wordt behandeld. http gebruikt onversleuteld HTTP; https gebruikt versleuteld HTTP. mailto:info@example.com vraagt een e-mailprogramma om een bericht op te stellen, terwijl file:/// naar een lokaal bestand verwijst.

De poort selecteert een dienst op de host. Als die wordt weggelaten, gebruikt HTTP poort 80 en HTTPS poort 443. Zo duiden https://example.com/ en https://example.com:443/ dezelfde bestemming en hetzelfde pad aan. Lokale testservers gebruiken vaak poorten 3000, 5500 of 8080; http://localhost:5500/ vermeldt de poort omdat die niet de standaardpoort van HTTP is.

Bij het schema en de host maken hoofdletters geen verschil. De host www.example.com is een andere naam dan example.com; beide bereiken een website alleen als de eigenaar ze zo heeft ingesteld.

Pad, query en fragment

Op een eenvoudige statische website volgt een pad de mappen en bestanden van de server. Op andere websites bepaalt serversoftware wat een pad oplevert, dus hoeft een pad geen bestand op de schijf aan te duiden. Een mapadres dat eindigt op / levert vaak een standaardpagina zoals index.html op.

Een querystring voert invoer mee na ?. In /search?q=web+basics&page=2 scheidt & twee velden: de zoekwoorden en het paginanummer. Deze velden gaan als onderdeel van het verzoekdoel naar de server.

Een fragment blijft in de browser. Het achtervoegsel #reviews scrolt meestal naar een element met id="reviews". De browser vraagt het pad en de query zonder het fragment op. Als je alleen #top in #reviews verandert, vraagt de browser de server niet om een ander bestand.

Behoud de precieze tekens

Webpaden gebruiken schuine strepen /. Een spatie kan als %20 worden procentgecodeerd. Formuliercodering gebruikt + voor een spatie en %40 voor @; een gewoon URL-pad of een gewone query mag een letterlijke @ bevatten. Formuliercodering en de algemene schrijfwijze van URL's volgen dus niet precies dezelfde regels.

Paden kunnen hoofdlettergevoelig zijn, ook al zijn hosts dat niet. /Images/Logo.png kan verschillen van /images/logo.png. Als je de host correct overneemt maar de hoofdletters in een pad verandert, kun je dus nog steeds de verkeerde bron opvragen.

Een domeinnaam geeft mensen een leesbare naam om in plaats van een numeriek IP-adres te gebruiken. De onderdelen tussen de punten laten ook zien hoe de naam is opgebouwd. Het is belangrijk die onderdelen correct te lezen wanneer twee adressen vergelijkbare woorden bevatten.

Begin aan de rechterkant

Elk onderdeel tussen punten is een label. In blog.example.org is het meest rechtse label, org, het topleveldomein, of TLD. Het geregistreerde domein is example.org en blog is een subdomein dat via dat domein wordt beheerd.

Generieke TLD's zijn onder meer .com, .org, .net, .dev en .shop. Landcode-TLD's hebben twee letters, zoals .nl, .de, .jp, .br en .ca. Voor sommige gelden toelatingseisen: .gov is beperkt tot geverifieerde Amerikaanse overheidsorganisaties. Voor nieuwe institutionele registraties onder .edu komen doorgaans daarvoor in aanmerking komende, institutioneel geaccrediteerde Amerikaanse instellingen voor vervolgonderwijs in aanmerking; sommige organisaties komen op grond van ander beleid in aanmerking en voor oudere registraties kunnen uitzonderingen gelden. ICANN coördineert de toplevelnamen van het domeinnaamsysteem.

Een geregistreerde naam bestaat niet altijd uit alleen de laatste twee labels. Onder .co.uk is de geregistreerde naam in news.example.co.uk bijvoorbeeld example.co.uk. Lees eerst de publieke uitgang en bepaal daarna welke naam daaronder is geregistreerd.

Bekende woorden kunnen in de naam van iemand anders staan

Vergelijk deze hosts:

In de tweede host zijn de woorden example.com labels links van example.net. Ze geven de eigenaar van example.com geen zeggenschap over het adres. Bepaal eerst wat de host is voordat je die vanaf rechts leest; een bekende naam in een pad is evenmin de host.

www is een gewoon subdomeinlabel. Een website-eigenaar kan het gebruiken, weglaten of tussen namen omleiden. De aanwezigheid ervan is niet verplicht op het web.

Registratie en hosting staan los van elkaar

Een registrar verzorgt domeinregistraties voor klanten. Een registry beheert de registraties voor een TLD. Een domein registreren geeft je het recht die naam voor een bepaalde periode te gebruiken, meestal één of meer jaren. Je verlengt de registratie om dat recht te behouden; een verlopen naam kan uiteindelijk voor iemand anders beschikbaar komen.

De eigenaar stelt vervolgens DNS-records in om de naam aan het adres van een hostingserver te koppelen. Het domein is niet hetzelfde als de bestanden van de website. Dezelfde naam kan naar een andere server verwijzen en één server kan meerdere domeinen bedienen. DNS-antwoorden in de cache verklaren waarom het minuten of uren kan duren voordat een gewijzigd adres overal zichtbaar is.

Naamregels en lokale namen

Gewone hostlabels gebruiken letters, cijfers en koppeltekens, zonder koppelteken aan het begin of einde. Elk label mag maximaal 63 tekens hebben en een gewone volledige naam maximaal 253 tekens. Hoofdletters maken in namen geen verschil. Geïnternationaliseerde domeinnamen ondersteunen andere schrijfsystemen; hun gecodeerde ASCII-labels beginnen met xn--.

De speciale naam localhost betekent de computer die het verzoek doet. De loopbackadressen zijn onder meer 127.0.0.1 en ::1. Als een cursist http://localhost:3000/ opent, zoekt de browser naar een dienst op de eigen computer van die cursist.

Een link kan een volledig adres bevatten of aanwijzingen om vanaf de huidige pagina een bron te vinden. Om te voorspellen waar de link naartoe gaat, begin je bij het adres van de pagina en volg je het pad onderdeel voor onderdeel.

Kies het beginpunt

Een absolute URL duidt zijn eigen host aan en werkt vanaf elke pagina. Die is handig voor een andere website. Een relatieve URL laat het begin weg en wordt aangevuld op basis van het adres van de pagina. Voor bestanden binnen een website helpt dit om de map als geheel van een laptop naar een server te verplaatsen.

Werk een mappenboom door

Stel dat een website deze bestanden bevat:

my-site/
  index.html
  about.html
  images/logo.png
  styles/main.css
  blog/first-post.html

Vanuit index.html blijft about.html in dezelfde map. images/logo.png gaat de submap images in en styles/main.css gaat styles in.

Vanuit blog/first-post.html is de beginmap blog. Gebruik ../images/logo.png om het logo te bereiken: ga eerst omhoog naar de websitemap en daarna images in. De link images/logo.png zou in plaats daarvan binnen blog/images zoeken, waar in deze boom geen logo staat. Gebruik ../index.html om vanuit dat bericht de startpagina te bereiken.

Volg adressen in geneste mappen

Op https://example.com/blog/2026/post.html:

• photo.jpg wordt https://example.com/blog/2026/photo.jpg.
• ../index.html wordt https://example.com/blog/index.html.
• /about.html wordt https://example.com/about.html.
• #comments blijft op dit document en duidt het element comments aan.

Een / aan het begin vervangt het huidige pad vanaf de hoofdmap van de website. Die betekent niet “één map omhoog”. Door ../ te herhalen ga je meerdere mapniveaus omhoog: ../../about.html gaat vanuit het geneste bericht omhoog door 2026 en blog voordat het about.html vindt.

Bekijk links in de juiste omgeving

Een pad vanaf de hoofdmap werkt met een HTTP-server, ook een lokale server. Op een file:///-pagina verwijst / naar de hoofdmap van het bestandssysteem van de computer, niet naar je projectmap. Gebruik een lokale server om dit soort links te testen.

Een pad zoals C:\Users\sam\site\logo.png of file:///Users/sam/site/logo.png duidt een locatie op één computer aan. Andere bezoekers hebben die map niet. Link met een webpad dat binnen de structuur van de website blijft.

Laat namen precies overeenkomen

Gebruik namen met kleine letters, koppeltekens in plaats van spaties en de juiste extensies: naar contact-form.html kun je gemakkelijker betrouwbaar linken dan naar Contact Form.HTML. Windows en macOS negeren vaak het verschil tussen hoofdletters en kleine letters in bestandsnamen, terwijl veel webservers dat onderscheid wel maken. Een lokale link naar Logo.png kan online mislukken als de werkelijke naam logo.png is.

Een startpagina met de naam index.html is een veelgebruikte serverstandaard. Als je een map zoals /blog/ opvraagt, wordt meestal de bijbehorende index.html aangeboden wanneer die server met deze standaard is ingesteld.

HTTP, het Hypertext Transfer Protocol, bepaalt hoe webclients bronnen opvragen en hoe servers antwoorden. HTTPS vervoert die berichten over een versleutelde verbinding. Als je een verzoek leest, zie je wat de browser de server heeft gevraagd te doen.

Lees het bericht op volgorde

Hier staat een verzoek in de tekstvorm van HTTP/1.1:

GET /products/shoes.html?color=blue HTTP/1.1
Host: shop.example.com
Accept: text/html
Accept-Language: en-US,en;q=0.9

De eerste regel bevat de methode, het verzoekdoel en de HTTP-versie. GET vraagt om een bron op te halen. Het verzoekdoel bevat het pad en de query, maar geen fragment. De host staat in de Host-header, waarmee één server onderscheid kan maken tussen de websites die hij bedient.

Een HTTP-header is een benoemd veld zoals Accept: text/html dat informatie over het verzoek of de inhoud ervan bevat. Een lege regel sluit de headers af. Sommige verzoeken bevatten daarna een berichtinhoud, de gegevens die worden verstuurd. Dit GET-voorbeeld heeft geen berichtinhoud.

HTTP/2 en HTTP/3 coderen berichten anders, maar behouden methoden, verzoekdoelen, headers en berichtinhoud. De ontwikkelaarstools tonen ze in leesbare vorm, zodat deze berichtonderdelen in verschillende versies bruikbaar blijven.

Kies een methode voor de handeling

Als je een gewone link volgt of een HTTP-adres intypt, ontstaat een GET-verzoek. Een HTML-formulier gebruikt standaard GET en POST wanneer het method="post" vermeldt.

Bij een GET-formulier komen velden in de query van de URL terecht. Dat past bij een zoekopdracht waarvan je de resultaten wilt bewaren als bladwijzer of wilt delen. POST plaatst ingediende velden in de berichtinhoud van het verzoek en past bij handelingen zoals een account aanmaken of een reactie plaatsen.

POST versleutelt op zichzelf niets. Bij gewoon HTTP kunnen zowel querygegevens als gegevens in de berichtinhoud tijdens het transport worden gelezen. HTTPS beschermt beide. Wachtwoorden horen in de berichtinhoud van een POST over HTTPS, omdat URL's ook in de browsergeschiedenis verschijnen en in logboeken kunnen worden opgeslagen.

Lees een formulierinzending

POST /signup HTTP/1.1
Host: www.example.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 38

name=Ana+Silva&email=ana%40example.com

Het verzoekdoel is /signup. Content-Type geeft de formuliercodering van de berichtinhoud aan. De berichtinhoud bevat de naam “Ana Silva” en het e-mailadres “ana@example.com”: + wordt gedecodeerd als een spatie en %40 als @. Hier zijn dat 38 bytes, overeenkomstig Content-Length.

Verzoeken lezen, herhalen en herkennen

Een veilige methode is bedoeld om te lezen zonder de toestand van de server te veranderen; GET, HEAD en OPTIONS zijn veilig. Een idempotente methode heeft bij herhaling hetzelfde beoogde effect. Veilige methoden, PUT en DELETE zijn idempotent. Voor POST is dat niet gegarandeerd: het herhalen van een inzending kan een tweede reactie of bestelling aanmaken.

Andere verzoekheaders zijn onder meer User-Agent voor clientinformatie, Accept voor aanvaardbare formaten en Accept-Language voor taalvoorkeuren. Cookie stuurt opgeslagen cookiewaarden terug. Referer, met de historische spelling, kan de verwijzende pagina aanduiden; browsers kunnen die header afhankelijk van het beleid weglaten of beperken.

Het antwoord is de reactie van de server op één verzoek. De code vertelt wat het resultaat is, de headers beschrijven het antwoord en de berichtinhoud bevat de teruggestuurde inhoud wanneer berichtinhoud is toegestaan.

Onderscheid de onderdelen

Een antwoord in de tekstvorm van HTTP/1.1 kan zo beginnen:

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 1534
Cache-Control: max-age=600

<!DOCTYPE html>
<html lang="en">
...

De statusregel geeft de versie, code 200 en de voor mensen leesbare redenzin OK. Programma's gebruiken het getal. HTTP/2 en HTTP/3 sturen die redenzin niet mee. Na de headers en een lege regel begint de berichtinhoud met de HTML.

Content-Length geeft een aantal bytes aan, geen aantal tekens of zichtbare paginagrootte. Bij een antwoord met een afbeelding en Content-Length: 24576 heeft de berichtinhoud 24.576 bytes: 24,576 kB, of ongeveer 24,6 kB bij 1 kB = 1.000 bytes.

Herken de berichtinhoud aan het mediatype

Het mediatype, ook MIME-type genoemd, wordt in Content-Type meegestuurd.

De header vertelt de browser hoe hij de berichtinhoud moet behandelen; een bestandsextensie alleen is niet genoeg. Als een URL voor een stijlblad een HTML-foutpagina met Content-Type: text/html teruggeeft, wijst de browser die als CSS af. Dit verklaart vaak een pagina met tekst maar zonder de bedoelde opmaak.

Berichtinhoud kan uit tekst of binaire bytes bestaan. Een antwoord op HEAD heeft geen berichtinhoud, ook niet als de headers de bron beschrijven die een GET zou teruggeven. Ook 204 No Content en 304 Not Modified hebben geen berichtinhoud.

Neem identiteit mee tussen afzonderlijke verzoeken

HTTP is toestandsloos: een uitwisseling onthoudt niet automatisch een eerdere uitwisseling. Een cookie levert informatie die verzoeken aan een lopende sessie koppelt.

1. De server antwoordt met Set-Cookie: session=abc123.
2. De browser slaat de cookie op.
3. Bij latere verzoeken waarop de cookie van toepassing is, stuurt hij Cookie: session=abc123 mee.
4. De server kan die waarde gebruiken om de sessie op te zoeken, zoals de aanmelding of winkelwagen van de cursist.

Het toepassingsbereik van de cookie en de browserregels bepalen met welke verzoeken de cookie wordt meegestuurd.

Hergebruik inhoud zonder opnieuw te downloaden

Met Cache-Control: max-age=600 mag de browser een opgeslagen antwoord 600 seconden, ofwel 10 minuten, als nog geldig behandelen. In die periode kan hij de kopie hergebruiken zonder contact met de server op te nemen. Nadat de kopie is verlopen, kan de browser vragen of die is gewijzigd. Een 304 betekent dat de berichtinhoud in de cache opnieuw kan worden gebruikt; een 200 kan een vervangende versie leveren.

Als opgeslagen CSS-wijzigingen niet verschijnen, controleer dan of de browser een kopie heeft hergebruikt. Geforceerd opnieuw laden, meestal met Ctrl+Shift+R op Windows/Linux of Cmd+Shift+R op macOS, of de optie Cache uitschakelen in de ontwikkelaarstools helpt om nieuwe bronnen op te halen. Dat selectievakje geldt zolang de ontwikkelaarstools open zijn.

Andere nuttige antwoordheaders zijn onder meer Location voor de bestemming van een omleiding, Date voor de datum van het antwoord en Server voor informatie over de serversoftware, als die wordt meegestuurd.

Een statuscode is het resultaat van drie cijfers in een HTTP-antwoord. Het getal beschrijft één verzoek, dus één pagina kan tegelijk geslaagde HTML, een ontbrekende afbeelding en een omgeleid script hebben.

Begin met het eerste cijfer

200 OK is het gebruikelijke antwoord op een geslaagde GET. 201 Created meldt dat een nieuwe bron is aangemaakt, vaak na POST. 204 No Content meldt succes zonder berichtinhoud in het antwoord.

Volg een omleiding zonder die met een fout te verwarren

301 Moved Permanently en 308 Permanent Redirect geven een nieuwe permanente locatie. 302 Found en 307 Temporary Redirect geven een tijdelijke locatie. De Location-header van het antwoord duidt het volgende adres aan.

Een verzoek aan http://example.com/ kan bijvoorbeeld 301 met Location: https://example.com/ teruggeven. De browser stuurt vervolgens een nieuw verzoek naar het HTTPS-adres, dat 200 teruggeeft. Dat zijn twee uitwisselingen, geen enkel antwoord met twee codes.

307 en 308 behouden de methode wanneer de browser het verzoek herhaalt. Na 301 of 302 mag een browser POST in GET veranderen. 304 Not Modified is een ander soort 3xx-resultaat: het bevestigt dat een kopie in de cache nog geldig is en stuurt geen vervangende berichtinhoud.

Koppel de code aan de volgende nuttige controle

Een 503 kan Retry-After bevatten om aan te geven wanneer je het opnieuw kunt proberen. Het verschil tussen 401 en 403 is bijzonder nuttig: ontbrekende of ongeldige authenticatie verschilt van geweigerde toestemming. Een 4xx-code wijst naar de kant van het verzoek voor onderzoek, maar een website kan nog steeds een niet-werkende link of een configuratieprobleem hebben dat de fout veroorzaakt.

Onderzoek de specifieke bron

Stel dat HTML en CSS 200 teruggeven, terwijl images/Logo.PNG 404 teruggeeft. Het werkelijke bestand op de server is images/logo.png. Door de hoofdletters en kleine letters in de link te corrigeren, verwijst die naar het opgeslagen bestand. Een server heeft het mislukte verzoek beantwoord; niet de hele website was onbereikbaar.

Bij een 5xx-antwoord zit de fout in de verwerking aan de serverzijde. Als je de website van iemand anders bekijkt, kun je het later opnieuw proberen of de fout melden. Een ontwikkelaar die verantwoordelijk is voor die server, onderzoekt de code of de achterliggende dienst.

Lees het antwoord, niet alleen het scherm

Een foutmelding in HTML bepaalt de status niet. Een website kan 200 teruggeven met een melding “niet gevonden”; dat heet een soft 404. Omgekeerd kan een echte 404 een verzorgde HTML-foutpagina bevatten. Gebruik het netwerkpaneel om de werkelijke code te lezen.

Als DNS of de verbinding faalt, bestaat er mogelijk helemaal geen HTTP-antwoord. Een door de browser gegenereerde fout heeft dan geen serverstatus om te inspecteren. Een afzonderlijke 404 voor /favicon.ico, het kleine tabbladpictogram dat browsers kunnen opvragen, laat de pagina-inhoud vaak gewoon werken.

Een pagina combineert inhoud, vormgeving en gedrag. Als je deze taken herkent, kun je kiezen welk bestand je moet inspecteren wanneer je iets wilt veranderen.

HTML beschrijft wat de inhoud is

HTML, HyperText Markup Language, geeft inhoud structuur en betekenis: koppen, alinea's, lijsten, links, afbeeldingen, tabellen en formulieren. Het is een opmaaktaal. HTML beschrijft elementen in plaats van berekeningen uit te voeren of lussen te doorlopen.

In <a href="about.html">About us</a> is de openingstag <a href="about.html">. Het attribuut href geeft de bestemming aan. “About us” is de inhoud en </a> sluit het element. Attributen horen binnen de openingstag.

Sommige elementen zijn lege elementen en hebben geen inhoud of sluitingstag. Zo levert <img src="logo.png" alt="Company logo"> een afbeeldingsadres en een tekstalternatief. <br>, <link> en <meta> zijn andere lege elementen.

Kies elementen om hun betekenis. Gebruik een kop omdat de tekst een sectie inleidt; gebruik CSS als je grotere tekst of extra tussenruimte wilt. Meerdere <br>-elementen zijn een slechte vervanging voor regels voor tussenruimte.

CSS regelt hoe inhoud eruitziet

CSS, Cascading Style Sheets, bepaalt kleur, lettertype, tussenruimte, lay-out en aanpassing aan verschillende schermbreedtes. Lees deze regel:

h1 {
  color: navy;
  font-size: 2rem;
}

De selector, h1, duidt de vorm te geven elementen aan. Elke declaratie koppelt een eigenschap aan een waarde. color: navy; stelt de eigenschap color in op navy. De dubbele punt scheidt eigenschap en waarde; de puntkomma sluit de declaratie af.

JavaScript reageert op handelingen

JavaScript is een programmeertaal. JavaScript reageert op klikken en typen, verandert de actuele pagina, controleert formulierinvoer en vraagt meer gegevens op zonder de hele pagina opnieuw te laden. Het is een andere taal dan Java.

Voor een themaknop kan een script de knop vinden, op klikken wachten en een CSS-klasse aan- of uitzetten:

document.querySelector("button").addEventListener("click", () => {
  document.body.classList.toggle("dark");
});

Het script verandert of de body de klasse dark heeft; CSS bepaalt het uiterlijk van die klasse. Een statische informatiepagina kan met alleen HTML en CSS werken.

Verbind de bestanden in HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My first page</title>
    <link rel="stylesheet" href="styles/main.css">
    <script src="scripts/app.js" defer></script>
  </head>
  <body>
    <h1>Hello, web</h1>
    <p>This text is structured by HTML and styled by CSS.</p>
    <button>Switch theme</button>
  </body>
</html>

De <head> bevat informatie over de pagina en links naar bestanden. De <body> bevat de weergegeven inhoud. De browser vraagt styles/main.css en scripts/app.js afzonderlijk van de HTML op. Alle drie zijn plattetekstbestanden die je in een code-editor kunt openen.

Scheiding van verantwoordelijkheden houdt inhoud in HTML, uiterlijk in CSS en gedrag in JavaScript. Eén stijlblad kan veel pagina's vormgeven. Een betekenisvolle kop en een gewone link werken nog steeds als de opmaak of een script niet werkt, terwijl functies die van JavaScript afhankelijk zijn hun script nodig hebben om te werken.

De browser toont HTML niet als een afbeelding van een tekstbestand. Hij zet het bestand om in objecten, bepaalt hun stijlen en posities en tekent het resultaat. JavaScript kan die objecten daarna veranderen.

Bouw een boom uit HTML

De DOM, of Document Object Model, is de actuele boom van elementen en tekst in de browser. Bekijk:

<body><h1>News</h1><p>Hi <a href="/">home</a></p></body>

De body heeft twee kindelementen, h1 en p. De kop bevat “News”. De alinea bevat de tekst “Hi ” en een a-element, dat “home” bevat. De link staat binnen de alinea, niet rechtstreeks binnen de body.

Tijdens het lezen van HTML ontdekt de browser bronnen in elementen zoals <link>, <script> en <img>. Hij vraagt die bronnen op en leest de CSS om de uiteindelijke stijlen van elk element te berekenen. De lay-outberekening bepaalt afmetingen en posities. Bij het tekenen worden de pixels getekend. Deze taken kunnen opnieuw plaatsvinden wanneer inhoud of stijlen veranderen.

Laat scripts uitvoeren wanneer hun elementen bestaan

Een klassiek extern script zonder defer of async onderbreekt het parsen van HTML terwijl het wordt gedownload en uitgevoerd. Als het in de head staat en een knop verderop in de body probeert te vinden, is die knop nog niet opgebouwd. document.querySelector("button") geeft null terug, dus een aanroep van addEventListener op het resultaat levert een fout op.

Voeg defer toe om een script te downloaden terwijl het parsen van HTML doorgaat en het uit te voeren zodra dat parsen is voltooid. Als je een gewoon script vlak voor </body> zet, kunnen eerdere elementen ook eerst worden opgebouwd. async garandeert niet dat een latere knop bestaat; de download kan vroeg klaar zijn.

De bron-HTML en de actuele DOM kunnen verschillen

Paginabron bekijken toont de afgeleverde HTML. Het elementenpaneel, in Firefox Inspector genoemd, toont de actuele DOM. JavaScript kan inhoud hebben toegevoegd, tekst hebben veranderd of elementen hebben verwijderd. De browser kan ook onjuist opgebouwde HTML hebben hersteld, bijvoorbeeld door een element te sluiten.

Als een kop na een klik verandert, toont het elementenpaneel de gewijzigde tekst. De paginabron toont nog steeds de oorspronkelijk ontvangen HTML. Een wijziging in de DOM kan leiden tot bijgewerkte stijlen, een nieuwe lay-outberekening en opnieuw tekenen zonder een nieuw HTML-document op te halen.

Verschillende fouten hebben verschillende gevolgen

Browsers herstellen HTML volgens vastgelegde regels en slaan CSS-declaraties over die ze niet begrijpen. Een JavaScript-syntaxisfout, zoals een onvoltooide expressie, voorkomt dat het scriptbestand of codeblok start. Een niet-opgevangen uitvoeringsfout beëindigt de huidige uitvoering, waardoor latere regels tijdens die uitvoering worden overgeslagen. Andere scripts en al geregistreerde gebeurtenishandlers kunnen blijven werken. Dit verklaart een pagina waarvan de inhoud en opmaak zichtbaar blijven terwijl één functie faalt.

Browserengines implementeren gemeenschappelijke standaarden: Blink in Chrome en Edge, Gecko in Firefox en WebKit in Safari. Kleine verschillen in de implementatie maken het nuttig om in meer dan één browser te testen. Browsers bouwen ook een toegankelijkheidsboom op uit de structuur van de pagina, zodat schermlezers betekenisvolle elementen en relaties kunnen presenteren.

Een webproject begint als bestanden in een map. Een code-editor helpt je die bestanden te schrijven en met een browser kun je het resultaat bekijken. Als de editor en browser naar dezelfde kopie van het project verwijzen, voorkom je veel verwarrende resultaten.

Kies een code-editor voor platte tekst

Een code-editor slaat plattetekstbestanden op en biedt syntaxisaccentuering, automatisch aanvullen, aanwijzingen bij fouten, een bestandsboom en andere programmeerhulpmiddelen. Tekstverwerkers slaan documentopmaak op en kunnen rechte aanhalingstekens vervangen door gekrulde aanhalingstekens. Daarom zijn ze ongeschikt voor broncode.

Visual Studio Code is een gratis optie voor Windows, macOS en Linux. Andere editors zijn onder meer Sublime Text, Zed en WebStorm. Een online oefenomgeving zoals CodePen is geschikt voor korte experimenten; de vaardigheden voor bestanden en paden kun je in verschillende hulpmiddelen gebruiken.

Maak en open een project

Voor een eerste project in VS Code:

1. Download en installeer de editor vanaf de officiële website, https://code.visualstudio.com/.
2. Maak een map zoals web-projects/my-first-site.
3. Kies Bestand → Map openen en open my-first-site, zodat de bestandsboom het hele project toont.
4. Maak index.html. Typ in de HTML-modus ! en kies de suggestie van Emmet voor een HTML-basisstructuur.
5. Sla op met Ctrl+S op Windows/Linux of Cmd+S op macOS.

Gebruik een mapstructuur die past bij de rollen van je bestanden:

my-first-site/
  index.html
  styles/main.css
  scripts/app.js
  images/logo.png

Gebruik namen met kleine letters en koppeltekens, zonder spaties. Houd de extensies zichtbaar zodat index.html niet ongemerkt index.html.txt wordt. Sla tekst op als UTF-8 en neem <meta charset="utf-8"> op in de HTML-head, zodat tekst zoals namen met accenten correct wordt geïnterpreteerd.

Kies een manier om de pagina te bekijken

Een lokale webserver biedt een map op je eigen computer aan. Die kan http://localhost:5500/ of http://127.0.0.1:3000/ gebruiken; gebruik het adres dat je voorbeeldhulpmiddel geeft. Paden vanaf de hoofdmap hebben een server nodig om bij de hoofdmap van je website te beginnen. Functies zoals JavaScript-modules of gegevens ophalen hebben ook een voorbeeldweergave via HTTP nodig, omdat browsers het gebruik ervan op lokale bestandspagina's beperken.

In VS Code kan de extensie Live Preview van Microsoft of een extensie Live Server een server starten en de voorbeeldweergave na het opslaan vernieuwen. Controleer de uitgever voordat je extensies installeert, omdat extensies code op je computer uitvoeren. Opmaken bij opslaan, regelterugloop en automatisch opslaan kunnen het bewerken gemakkelijker maken; een opmaakprogramma zoals Prettier houdt de opmaak consistent.

Volg de cyclus van bewerken en controleren

Bewerk, sla op, laad opnieuw of laat de voorbeeldweergave vernieuwen, inspecteer het resultaat en verbeter het bestand. Als de browser nog steeds oude inhoud toont, controleer dan de indicator voor niet-opgeslagen wijzigingen in de editor en vergelijk het pad van de voorbeeldweergave met het project dat je hebt geopend. Mogelijk heb je twee mappen met dezelfde paginanaam. Controleer ook de exacte bestandsnaam en extensie; een extensie voor tekstbestanden kan ervoor zorgen dat de browser een bestand niet als HTML-pagina behandelt.

De ontwikkelaarstools van de browser laten de pagina zien die je daadwerkelijk gebruikt. Gebruik ze om een stijl te testen, een fout te lezen of de actuele pagina te vergelijken met het bestand in je editor.

Open de tools en kies een paneel

Klik met de rechtermuisknop op een deel van een pagina op een desktopcomputer en kies Inspecteren. Veelgebruikte sneltoetsen zijn F12 of Ctrl+Shift+I op Windows/Linux en Cmd+Option+I op macOS. In Safari moeten eerst de ontwikkelaarsfuncties worden ingeschakeld via Instellingen → Geavanceerd; de tekst van de optie verschilt per Safari-versie.

Zoek een stijl die voorrang krijgt

Inspecteer een kop. Als je de knoop selecteert, wordt de bijbehorende box op de pagina gemarkeerd, inclusief inhoud, binnenruimte, rand en marge. Het stijlenpaneel toont regels en hun bronlocaties, zoals main.css:12. Een doorgestreepte declaratie heeft daar geen effect: mogelijk overschrijft een andere regel die, of is de declaratie ongeldig. Ongeldige declaraties kunnen ook een waarschuwingsindicator hebben.

Open Berekend om de uiteindelijke waarden te zien. Als twee regels verschillende tekstkleuren opgeven, toont de berekende kleur het resultaat. Je kunt tijdelijk een waarde wijzigen, een declaratie uitschakelen of tekst en attributen bewerken om een idee te testen.

Gewone rechtstreekse wijzigingen hebben invloed op de DOM of stijlen in je tabblad. Bij opnieuw laden worden ze vervangen door de geladen bestanden. Om een verbetering te bewaren, maak je dezelfde wijziging in het bronbestand, sla je op en laad je opnieuw. Als je een weergegeven prijs in het elementenpaneel wijzigt, verandert de lokale weergave; de op de server opgeslagen prijs verandert niet.

Lees een consolefout als aanwijzing

Een fout bevat een bericht en meestal een bestand en regel. Bijvoorbeeld:

Uncaught TypeError: Cannot read properties of null
(reading 'addEventListener') at app.js:3

Lees app.js:3 als de bronlocatie die je moet inspecteren. De code probeerde een ontbrekend object te gebruiken. Als een selector naar een knop zocht, controleer dan of de spelling overeenkomt met een element en of het element bestond toen het script werd uitgevoerd. De melding alleen bepaalt niet welke van die oorzaken geldt.

De console toont ook mislukte pogingen om bronnen te laden, zoals een GET die eindigt op 404, en berichten die door console.log() worden afgedrukt. Een scriptfout kan verklaren waarom een knop niet werkt, ook als het bestand met succes is gedownload.

Probeer een kleine expressie en een smal scherm

De console kan JavaScript evalueren. Als je 2 + 3 typt, krijg je 5; document.title geeft de huidige titel terug. De toekenning document.body.style.background = "lightyellow" verandert de achtergrond van de pagina in het tabblad. Plak geen code van iemand die je niet vertrouwt in de console; die code wordt uitgevoerd met toegang tot de pagina en kan een account misbruiken.

Gebruik het pictogram met telefoon en tablet voor de responsieve modus. Kies een smalle breedte zoals 375 CSS-pixels om te zien hoe de lay-out past. Dit simuleert een viewport, niet elk gedrag van een echte telefoon; een controle op een echt apparaat levert extra informatie die je door het formaat te wijzigen niet krijgt.

Het netwerkpaneel toont de afzonderlijke uitwisselingen achter een pagina. Het kan laten zien waarom één afbeelding ontbreekt, waarom opmaak is mislukt of waarom bij opnieuw laden minder gegevens zijn overgedragen dan verwacht.

Registreer voordat je opnieuw laadt

Open de ontwikkelaarstools, kies Netwerk, zorg dat de registratie actief is en laad de pagina opnieuw. Het paneel kan verzoeken die zijn voltooid voordat het werd geopend niet reconstrueren. Als de lijst leeg is, controleer dan de registratie en filters en laad opnieuw.

Rijen tonen de naam of URL, methode, status, het type, de grootte en de tijd van elk verzoek. Het watervaldiagram toont wanneer verzoeken begonnen en hoe hun tijden overlappen. Het helpt je om het laden van een pagina te zien als meerdere opvragingen van bronnen in plaats van als één ondeelbare handeling.

Open een rij voor alle aanwijzingen

Selecteer een verzoek. Headers toont de opgevraagde URL en methode, de antwoordstatus en de verzoek- en antwoordheaders. Voorbeeld toont een bruikbare weergave van ondersteunde antwoordinhoud. Antwoord toont de teruggestuurde inhoud directer, terwijl Timing de bestede tijd uitsplitst naar fasen van het verzoek.

Vergelijk bij een ontbrekende afbeelding het volledige opgevraagde adres met de werkelijke locatie van de afbeelding. Een bestandsnaam alleen kan een verkeerde bovenliggende map verhullen.

Onderzoek een voorbeeld van het laden

Vijf verzoeken hebben in totaal 31,8 kB overgedragen. Het verzoek om Hero.jpg is mislukt. De kleine HTML-berichtinhoud is de foutpagina van de server, wat het mediatype text/html bij een afbeeldingsverzoek verklaart. Als het werkelijke bestand images/hero.jpg is, verander dan src="images/Hero.jpg" in src="images/hero.jpg" en laad opnieuw om de oplossing te testen.

Filter op Img om je op afbeeldingen te richten, op CSS voor stijlbladen of op een naam om een bepaalde bron te vinden. Als een stijlblad niet werkt, inspecteer dan zowel de status als Content-Type. Zelfs een 200 maakt van een HTML-antwoord geen bruikbare CSS.

Houd omleidingen en cacheantwoorden zichtbaar

Schakel logboek behouden, in Firefox Persist Logs genoemd, in voordat je navigatie volgt die je wilt onderzoeken. Een omleiding van HTTP naar HTTPS kan dan een rij met 301 en de Location-header tonen, gevolgd door een nieuw verzoek met 200.

Een rij met “(memory cache)” of “(disk cache)” betekent dat de browser opgeslagen inhoud heeft hergebruikt. Bij een 304 was er nog steeds een antwoord van de server, maar kwamen alleen headers terug. Dat bespaart een herhaalde overdracht van de berichtinhoud. De kolommen Grootte en Overgedragen beantwoorden daardoor andere vragen dan alleen de grootte van het bestand.

Gebruik Cache uitschakelen zolang de ontwikkelaarstools open zijn om te vergelijken met nieuwe opvragingen. Door netwerkvertraging te simuleren kun je zien welke inhoud bij een tragere verbinding het eerst verschijnt. De namen van snelheidsinstellingen verschillen per browserversie.

Een mislukte rij zonder antwoordstatus kan wijzen op een DNS- of verbindingsfout; Chrome kan net::ERR_NAME_NOT_RESOLVED tonen. Buiten de browser verstuurt curl -I https://example.com een HEAD en drukt het programma de status en headers af om snel een antwoord te controleren.