De HTML-code van een website weergeven lijkt triviaal: rechtermuisklik, “Bekijk de broncode”, klaar. De werkelijkheid is echter genuanceerder sinds de meeste sites afhankelijk zijn van JavaScript-frameworks zoals React of Vue. De ruwe broncode die door de server wordt teruggestuurd, komt niet altijd overeen met de inhoud die zichtbaar is in de browser. Weten welke methode te gebruiken en in welke context maakt het verschil tussen een nuttige inspectie en een lege lezing.
Bekijk de broncode of inspecteer de DOM: wat elke methode toont
Browsers bieden twee manieren om toegang te krijgen tot de code van een pagina. Ze geven niet dezelfde informatie terug, en het verwarren van de twee vertekent elke analyse.
| Criteria | Bekijk de broncode (Ctrl+U) | Inspecteer het element (F12 / DevTools) |
|---|---|---|
| Toon inhoud | Ruwe HTML-respons verzonden door de server | Actieve DOM na uitvoering van CSS en JavaScript |
| Reflecteert de visuele weergave | Nee, op moderne JS-sites | Ja, in real-time |
| Lokale wijziging mogelijk | Nee | Ja (tijdelijk, aan de browserzijde) |
| Nuttig voor technische SEO-audit | Ja (zicht vanuit “crawler”) | Ja (zicht vanuit “gebruiker”) |
| Sneltoets (Chrome, Firefox) | Ctrl+U (Windows) / Cmd+Option+U (Mac) | F12 of Ctrl+Shift+I |
“Bekijk de broncode” toont wat de server verzendt, niet wat de bezoeker ziet. Op een site gebouwd met een JavaScript-framework kan deze broncode beperkt zijn tot een lege <div id="root"> gevolgd door een groot JS-bestand. De tekst, afbeeldingen en navigatiestructuur verschijnen pas na de uitvoering van het script door de browser.
De DevTools, toegankelijk via F12, tonen de DOM zoals de browser deze heeft opgebouwd. Dit is de versie die overeenkomt met de werkelijke weergave. Wanneer het doel is om een title-tag, een alt-attribuut of een canonieke link te controleren, moet men weten welke van de twee weergaven te raadplegen, afhankelijk van of men de ruwe gegevens of het geïnterpreteerde resultaat zoekt.
Een uitgebreide gids om de HTML-code van een website te vinden gaat dieper in op deze twee benaderingen met concrete gevallen per browser.
JavaScript-sites: waarom de ruwe broncode vaak leeg is
Frontend-frameworks (React, Vue, Angular) genereren de inhoud direct in de browser van de bezoeker. De server stuurt alleen een minimale HTML-shell en een JavaScript-bundel. De initiële HTML bevat geen tekst of bruikbare semantische tags.
Deze architectuur vormt een concreet probleem voor iedereen die de code inspecteert met het oog op een audit of leren. Met Ctrl+U krijgt men een bijna lege pagina. Alleen de DevTools (tabblad “Elements” in Chrome, “Inspector” in Firefox) tonen de volledige DOM na rendering.
Test de pagina als een indexeringsrobot
Om te zien wat een crawler die JavaScript niet uitvoert waarneemt, is het een goede praktijk om JavaScript in de DevTools uit te schakelen voordat de pagina opnieuw wordt geladen. In Chrome kan dit via de instellingen van het tabblad “Sources” of door de command palette te openen (Ctrl+Shift+P) en “Disable JavaScript” in te typen.
Als de pagina wit wordt of alleen het skelet toont, is de site volledig afhankelijk van client-side rendering. Robots die de JS niet renderen zien dan geen indexeerbare inhoud. Deze snelle test voorkomt dat er verkeerde conclusies worden getrokken op basis van alleen de ruwe broncode.
Sneltoetsen per browser om toegang te krijgen tot de HTML-code
De methode varieert iets van de ene browser naar de andere. Hier zijn de meest directe sneltoetsen:
- Chrome en Edge (Windows/Linux): Ctrl+U voor de broncode, F12 voor de DevTools. Op Mac: Cmd+Option+U en Cmd+Option+I respectievelijk.
- Firefox: dezelfde logica met Ctrl+U en F12. De Firefox-inspector toont bovendien een “Regels”-paneel dat de toegepaste CSS-stijlen voor elk element gedetailleerd weergeeft.
- Safari (alleen Mac): het menu Ontwikkelaar moet handmatig worden geactiveerd in de geavanceerde voorkeuren. Vervolgens opent Cmd+Option+U de broncode en Cmd+Option+I opent de webinspector.
Op mobiel (Android) stelt Chrome in staat om de broncode te bekijken door view-source: gevolgd door de URL in de adresbalk in te voeren. Op iOS biedt Safari geen eenvoudige native equivalent; derde partij-apps of JavaScript-bladwijzers (bookmarklets) vullen deze leemte op.
Zoek een specifieke tag in de HTML-broncode
Het weergeven van de volledige code van een pagina heeft alleen zin als men weet waar men naar moet zoeken. De tekstzoekfunctie (Ctrl+F in de broncode of in het tabblad Elements van de DevTools) maakt het mogelijk om binnen enkele seconden een specifieke tag te lokaliseren.
Veelvoorkomende controles bij SEO-audits
De title-tag en de meta-beschrijving bevinden zich in de <head> van de broncode. Door “title” of “meta name” in de zoekbalk in te voeren, isoleert men deze elementen onmiddellijk. Hun aanwezigheid in de ruwe broncode (Ctrl+U) bevestigt dat ze toegankelijk zijn voor zoekmachines zonder JavaScript-uitvoering.
Voor structuur-tags (h1, h2, h3) is de zoekfunctie in de DevTools betrouwbaarder, omdat deze de werkelijke DOM weerspiegelt. Een JavaScript-site kan zijn titels dynamisch injecteren: ze zullen afwezig zijn in de broncode maar aanwezig in de inspector.
- Canonieke tag: zoek
rel="canonical"in de <head> om de opgegeven referentie-URL te controleren. - Alt-attributen van afbeeldingen: zoek
alt=in de code om afbeeldingen zonder tekstuele beschrijving te vinden. - Gestructureerde gegevens: zoek
application/ld+jsonom de schema.org-markering scripts te lokaliseren.
Juridisch kader in Frankrijk: de code raadplegen, ja, maar niet alles kopiëren
Het raadplegen van de HTML-code van een site is legaal. De browser downloadt deze code om de pagina weer te geven, en de gebruiker leest alleen wat al aan hem is verzonden. Systematisch het code of de gegevens die het bevat kopiëren of extraheren valt onder een ander regime.
Volgens de Franse en Europese wetgeving zijn er verschillende beschermingen die de kopie reguleren: auteursrecht op de originele code en inhoud, sui generis-recht op databases, en de AVG wanneer er persoonsgegevens in het spel zijn. Het bekijken van de code van een concurrent om zijn tagstructuur te begrijpen is een gangbare en legitieme praktijk. Het systematisch extraheren van zijn inhoud of het reproduceren van zijn architectuur om deze te dupliceren, kan leiden tot rechtsvervolging.
De grens is duidelijk: de handmatige inspectie van een pagina blijft een alledaagse technische handeling. Geautomatiseerd extraheren en hergebruiken van de code of gegevens vereist een voorafgaande juridische analyse.