# HTML Viewer

URL: https://discuvr.org/html-viewer/?hl=nl
Last updated: 2026-11-08
MCP tool: `inspect_html`

Plak HTML en bekijk het live in een sandbox op telefoon-, tablet- of desktopbreedte. Opmaken, verkleinen, scripts uitvoeren met console en markupfouten vinden.

Een e-mailsjabloon, een fragment uit een ticket, een geëxporteerd rapport: soms wil je gewoon zien hoe een stuk HTML eruitziet. Plak het en het wordt weergegeven terwijl je typt, in een afgeschermd kader, op de schermbreedte die je kiest. Naast het voorbeeld kun je het opschonen, verkleinen, de scripts uitvoeren met een console en een lijst zien van wat er echt mis is met de markup.

## Wat het doet

- Live voorbeeld terwijl je typt; boven 200.000 tekens pauzeert het tot je op Vernieuwen klikt.
- Voorbeeldformaten voor telefoon, tablet, desktop en volledige breedte, plus volledig scherm.
- Scripts staan standaard uit; zet ze aan en zie console-uitvoer en fouten.
- Rommelige markup verfraaien of minificeren, zonder de inhoud van pre, script of style aan te raken.
- Een inspectierapport: aantallen elementen, de koppenstructuur en concrete problemen.
- Open een lokaal .html-bestand, kopieer het resultaat of download het.

## Hoe het werkt

1. Plak HTML, open een .html-bestand of laad het voorbeeld.
2. Kies een voorbeeldbreedte en bepaal of scripts mogen draaien.
3. Verfraai, minificeer of inspecteer, en kopieer of download dan het resultaat.

## Waarom het voorbeeld in een sandbox draait

Geplakte HTML kan scripts, formulieren en links bevatten die jij niet hebt geschreven. Het voorbeeld draait in een sandbox-iframe met een eigen ondoorzichtige oorsprong, dus niets erin kan de cookies van deze site of je sessie lezen, namens jou iets verzenden of deze pagina wegnavigeren. Scripts blijven uit tot jij ze aanzet.

## Wat de inspectie controleert

Ze leest de markup met een standaard HTML-parser en meldt alleen wat ze zag: tags die geopend en nooit gesloten worden, sluittags zonder openingstag, afbeeldingen zonder alt-tekst, dubbele id's, links die zonder rel="noopener" een nieuw tabblad openen, overgeslagen kopniveaus, bronnen die via http:// laden en, bij een volledige pagina, een ontbrekend doctype, title, lang of viewport-tag.

## Wat de controle bewust laat liggen

Hij meldt fouten, geen stijl. Eindtags die de HTML-standaard laat weglaten, zoals </p>, </li>, </td>, </tr> en </option>, staan nooit in de lijst als niet gesloten, en lege elementen zoals <br>, <img> en <input> hebben geen eindtag nodig. Een lege alt="" telt als alt-tekst, wat juist is voor een decoratieve afbeelding. Een link met target="_blank" is in orde met rel="noopener" of rel="noreferrer". Een gewone http://-link in <a href> telt niet als onveilig; alleen geladen bronnen zoals afbeeldingen, scripts, stylesheets en iframes. Terug omhoog in de kopniveaus (h4 naar h2) is prima; alleen een sprong omlaag die een niveau overslaat (h2 naar h4) wordt gemeld. De controles op doctype, title, lang en viewport draaien alleen als de geplakte tekst een hele pagina is, dus een doctype of een html-, head- of body-tag heeft. Een e-mailblok of CMS-fragment krijgt daar geen punten voor afgetrokken.

## Een HTML-e-mail controleren voor verzending

Bekijk hem eerst op Telefoon-breedte (375 px), omdat veel mensen e-mail op hun telefoon openen, daarna op Tablet (768 px) en Desktop (1280 px). Laat scripts uit: e-mailprogramma's voeren geen JavaScript uit, dus de preview zonder scripts ligt dichter bij wat de lezer ziet. Gebruik absolute afbeeldings-URL's met https://, want de preview en het mailprogramma van de ontvanger zien geen bestanden op je computer. Minificeren haalt gewone opmerkingen weg maar houdt voorwaardelijke opmerkingen die met <!--[if beginnen, zoals <!--[if mso]> ... <![endif]-->. De afsluiter <!--<![endif]--> van het patroon <!--[if !mso]><!--> blijft niet staan, dus minificeer geen sjabloon dat dit patroon gebruikt, anders kan Outlook alles daarna verbergen. De preview is een browserweergave; het klassieke Outlook voor Windows tekent e-mail met de Word-engine, dus stuur jezelf daar een test voor een grote verzending.

## Vragen

**Wordt mijn HTML geüpload of opgeslagen?**

Het voorbeeld, verfraaien en minificeren gebeuren in je browser. Alleen het inspectierapport stuurt de markup naar de server, waar die wordt geparset en in hetzelfde antwoord teruggegeven: niets wordt naar schijf geschreven of gelogd, en gebruiksgegevens bevatten alleen aantallen.

**Waarom draaien mijn scripts niet?**

Scripts staan standaard uit omdat geplakte code niet te vertrouwen is. Vink "Scripts uitvoeren" aan en het voorbeeld laadt opnieuw met JavaScript aan, nog steeds in de sandbox, en de console-uitvoer verschijnt onder het voorbeeld.

**Waarom laden relatieve afbeeldingen of stylesheets niet?**

Het voorbeeld wordt opgebouwd uit de geplakte tekst, niet vanaf je computer of je server, dus een relatief pad als images/logo.png wordt op deze site gezocht en niet gevonden. Gebruik absolute URL's, of voeg een <base href="...">-tag toe die wijst naar waar de bestanden echt staan.

**Verandert verfraaien hoe de pagina eruitziet?**

Het springt alleen opnieuw in tussen tags en laat de inhoud van pre, textarea, script en style ongemoeid. Witruimte tussen inline-elementen kan soms iets verschuiven, dus controleer het voorbeeld na het opmaken.

**Hoe groot mag een document zijn?**

Het inspectierapport accepteert tot 1.000.000 tekens en toont hooguit 200 problemen. Het live voorbeeld pauzeert boven 200.000 tekens zodat typen soepel blijft; klik op Vernieuwen of druk op Ctrl+Enter om het bij te werken.

**Kan ik een voorbeeld bekijken van een HTML-e-mailsjabloon?**

Ja. Plak de HTML van de e-mail of open het .html-bestand, zet de breedte op Telefoon (375 px) en Desktop (1280 px) om beide lay-outs te zien en klik op Inspecteren om afbeeldingen zonder alt-tekst en bronnen via onversleuteld http:// te vinden. Het voorbeeld gebruikt de engine van je browser, terwijl elk e-mailprogramma een eigen engine heeft en veel ervan een deel van de CSS negeren. Het toont dus ongeveer wat webmail in de browser laat zien, niet precies wat elke inbox laat zien. E-mailprogramma's voeren geen JavaScript uit, dus laat Scripts uitvoeren uit. Stuur voor de echte verzending een testmail naar de programma's die je lezers gebruiken.

**Is het veilig om een HTML-bestand te openen dat iemand me stuurde?**

Veiliger dan het direct openen. Bestand openen laadt het in de editor in je browser, en er gaat niets naar de server tenzij je op Inspecteren klikt. De voorbeeldweergave is een afgeschermd frame met scripts en het verzenden van formulieren uit, dus de pagina kan geen code uitvoeren, geen formulier versturen en niet bij de cookies van deze site. Afbeeldingen en stylesheets met een volledig http(s)-adres laden wel, dus de afzender kan zien dat het bestand is geopend. Lees eerst de broncode, laat Scripts uitvoeren uit en typ nooit een wachtwoord in een pagina die je is toegestuurd.

**Waarom worden letters met accenten � als ik een bestand open?**

Bestand openen leest het bestand altijd als UTF-8 en negeert een <meta charset>-tag erin. Een pagina die is opgeslagen als Windows-1252 of ISO-8859-1, gebruikelijk bij oudere Windows-editors en exports, bewaart tekens als é, ë en ü als bytes die geen geldige UTF-8 zijn, dus elk ervan verschijnt als het vervangingsteken �. Open het bestand in je editor, sla het opnieuw op als UTF-8 (Kladblok: Opslaan als, Codering UTF-8; VS Code: klik op de codering in de statusbalk en daarna op Save with Encoding) en open het hier opnieuw. Of open het bestand in je browser, bekijk de bron en plak die hier, want de browser heeft het al gedecodeerd met de charset van de pagina zelf.

**Waarom doet een formulier of een link die een nieuw tabblad opent niets in de preview?**

De sandbox staat nooit het verzenden van formulieren of pop-ups toe, ook niet met Scripts uitvoeren aan, dus op Verzenden drukken verstuurt niets en links met target="_blank" of window.open()-aanroepen worden geblokkeerd. Zo kan een geplakte pagina geen gegevens versturen of andere sites openen. Gewone links openen in het previewkader, en sites die niet in een kader willen worden getoond, verschijnen daar leeg of geweigerd. Controleer een formulier door action, method en velden in de bron te lezen; Inspecteren toont ook elke target="_blank"-link zonder rel="noopener". Test het echte verzenden op je eigen ontwikkelserver.

## Meer in Ontwikkelaarstools

- [IP-Subnetcalculator](https://discuvr.org/ip-subnet-calculator/?hl=nl)
- [Coderen / Decoderen](https://discuvr.org/encode-decode/?hl=nl)
- [Unix-tijdstempelconverter](https://discuvr.org/timestamp-converter/?hl=nl)
- [Systeemdiagrammaker](https://discuvr.org/system-diagram/?hl=nl)

## Vaak gebruikt met

- [Tekst vergelijken](https://discuvr.org/text-diff/?hl=nl)
- [Websitebeveiligingsscan](https://discuvr.org/security-scan/?hl=nl)

---

Part of Discuvr (https://discuvr.org/): Discuvr is a collection of free, focused tools for day-to-day professional work - office and data utilities, legal and compliance helpers, privacy and security checks, and developer formatters. Every tool has its own page, and most can also be called from ChatGPT or Claude over MCP.