Twee mensen kunnen naar dezelfde webpagina kijken en er twee verschillende dingen in zien. De eerste leest de tekst en bekijkt de afbeeldingen die de browser weergeeft. De tweede leest de onderliggende HTML-code, die bepaalt waar elk element staat, hoe de koppen zijn opgebouwd en welke stylesheets worden aangeroepen. Als je weet hoe je deze code kunt bekijken, ga je aan de slag als die tweede persoon: iemand die de werkelijke structuur van een website kan lezen.
Initiële broncode en gerenderde DOM: wat elke weergave laat zien
Voordat je een tool kiest, is het belangrijk om één onderscheid helder te maken. Met de sneltoets Ctrl+U (of Cmd+Option+U op Mac) open je de ruwe broncode: de HTML die de server verstuurt. Het tabblad Elementen in de ontwikkelaarstools toont de huidige DOM, die na het laden mogelijk door JavaScript is aangepast.
Op een statische website zijn de twee weergaven vrijwel identiek. Bij een moderne webapplicatie die de inhoud in de browser opbouwt, kan de initiële broncode bijna leeg lijken, terwijl de DOM vol staat met inhoud die op het scherm zichtbaar is.
| Criterium | Broncode (Ctrl+U) | Gerenderde DOM (tabblad Elementen) |
|---|---|---|
| Weergegeven inhoud | HTML zoals ontvangen van de server | HTML na uitvoering van JavaScript |
| Realtime wijzigingen | Nee, dit is een statische momentopname | Ja, weerspiegelt elke dynamische wijziging |
| Zichtbare CSS-stijlen | Alleen de links naar stylesheets | Berekende stijlen voor elk geselecteerd element |
| SEO-toepassing | De title-, meta description- en canonical-tags controleren | Inhoud opsporen die door scripts is ingevoegd |
| Belangrijkste sneltoets | Ctrl+U (Windows/Linux), Cmd+Option+U (Mac) | F12 of Ctrl+Maj+I, daarna het tabblad Elementen |
Door deze twee weergaven van dezelfde pagina te vergelijken, kun je ontdekken wat JavaScript na het laden toevoegt of verandert. Zelfs beginners kunnen deze analysemethode binnen enkele minuten onder de knie krijgen.
Als je meer wilt weten over de HTML-code van een website, is dit onderscheid tussen ruwe broncode en DOM het betrouwbaarste uitgangspunt.
Een specifiek element inspecteren met de DevTools van de browser
In plaats van honderden regels code door te nemen, kun je met de inspector een zichtbaar element aanwijzen (zoals een kop, knop of afbeelding) en direct naar het bijbehorende HTML-fragment gaan. Klik met de rechtermuisknop op het element en kies vervolgens ‘Inspecteren’. Het paneel wordt geopend en de bijbehorende coderegel is gemarkeerd.
Wat het paneel Elementen precies laat zien
Het paneel toont de DOM-boom. Je kunt elke node uitklappen om de onderliggende elementen te bekijken. Rechts geeft het deelvenster Stijlen de CSS-regels weer die op het geselecteerde element van toepassing zijn, in volgorde van prioriteit.
- Structurele HTML-tags (h1, h2, nav, footer) worden in hun werkelijke hiërarchie weergegeven. Zo kun je controleren of een website een consistente koppenstructuur heeft
- Attributen zoals alt bij een afbeelding of href bij een link zijn te bekijken zonder de volledige broncode te doorzoeken
- Tijdelijke wijzigingen zijn mogelijk: dubbelklik op tekst in de DOM om deze te bewerken. Zo kun je een visuele wijziging testen zonder het oorspronkelijke bestand aan te passen
Alle wijzigingen die je in de inspector aanbrengt, verdwijnen zodra je de pagina opnieuw laadt. Je loopt dus geen risico de echte website aan te passen. Deze experimenteerruimte is vooral handig om te begrijpen hoe een CSS-regel de lay-out beïnvloedt.
Browsers en verschillende manieren om de inspector te openen
Chrome, Firefox en Edge werken voor de inspector vrijwel hetzelfde. In Safari moet je eerst het menu Ontwikkeling inschakelen via de geavanceerde voorkeuren. Daarna kun je elementen inspecteren.
Firefox legt in de interface meer nadruk op realtime stijlwijzigingen en heeft een ingebouwde CSS-rastereditor. In Chrome kun je via het tabblad Netwerk HTTP-verzoeken gedetailleerd volgen. Dat is handig om te achterhalen waar de bronnen vandaan komen die de pagina laadt.
SEO rechtstreeks controleren in de HTML-broncode
Een van de meest praktische toepassingen van het lezen van broncode is zoekmachineoptimalisatie. Je hoeft geen extensie van een andere partij te installeren: open de broncode met Ctrl+U en zoek met Ctrl+F naar een specifieke tag voor een direct antwoord.
De title-tag en meta description staan in de head-sectie van de broncode. Zoek op ‘title’ of ‘meta name=”description”’ om ze te vinden. Dit is de snelste manier om te controleren of deze tags aanwezig zijn en of de inhoud overeenkomt met wat je voor ogen hebt.
Op dezelfde manier kun je nog drie veelvoorkomende controles uitvoeren:
- De canonical-tag (zoek op ‘rel=”canonical”’) om te zien of de pagina bij zoekmachines een voorkeurs-URL opgeeft
- De Hn-tags (zoek op ‘<h1’, ‘<h2’, ‘<h3’) om de koppenhiërarchie te controleren zonder externe tools
- De aanwezigheid van een analytisch tracking-script (zoek op ‘gtag’ of ‘analytics’) om te bevestigen dat de meetcode correct is geïnstalleerd
Deze zoekmethode in de broncode werkt in elke browser en vereist geen geavanceerde technische kennis. Met Ctrl+U en Ctrl+F kun je de meeste snelle SEO-audits uitvoeren.
Dynamische pagina’s en door JavaScript gegenereerde inhoud
Een pagina die in de initiële broncode leeg lijkt, hoeft niet inhoudsloos te zijn. Moderne JavaScript-frameworks bouwen de interface op in de browser: de server stuurt een minimale HTML-structuur en het script vult de rest na het laden in.
Bij dit soort pagina’s geeft de ruwe broncode niet weer wat de bezoeker ziet. Alleen het tabblad Elementen in de DevTools toont de inhoud die daadwerkelijk in de DOM staat. Dit verschil heeft directe gevolgen voor SEO: Google kan JavaScript uitvoeren om inhoud te indexeren, maar met de URL-inspectietools van Google kun je controleren wat er daadwerkelijk is opgehaald en gerenderd.
Het tabblad Netwerk in de DevTools vormt een aanvulling op deze analyse. Het toont elk verzoek dat de pagina verstuurt (CSS-bestanden, JS-scripts en API-aanroepen). Door op bestandstype te filteren, kun je snel achterhalen welke bronnen verantwoordelijk zijn voor de weergegeven inhoud.
Door de broncode, de gerenderde DOM en de netwerkverzoeken te vergelijken, krijg je een compleet beeld van hoe een pagina werkt. Door deze drie informatielagen naast elkaar te leggen, maak je van een snelle blik een volwaardige technische diagnose.
