Plak, formatteer en vergelijk twee HTML-documenten naast elkaar. Tag-bewuste syntax highlighting en live well-formedness-controles ingebouwd.
Een gratis tool in de browser om twee HTML-documenten te vergelijken. Plak de oude versie van een landingspagina links, de nieuwe rechts, en de wijzigingen lichten op tag voor tag en attribuut voor attribuut. Niets wordt geüpload.
De diff zelf werkt op tekenniveau. De Format-knop op elk paneel formatteert je HTML opnieuw met consistente inspringing, zoals Prettier of HTML Tidy zouden doen. Syntax highlighting volgt de WHATWG HTML Living Standard, dus void-elementen, booleaanse attributen en entity-verwijzingen worden correct weergegeven terwijl je de diff leest.
Als je ooit een copy-aanpassing hebt uitgerold naar een marketingpagina en een uur kwijt was om uit te zoeken waarom een classnaam op de hero-sectie ook was veranderd, dan is dit de tool die het in seconden zichtbaar maakt. Voor gewone tekst is onze tekst diff de juiste keuze. HTMLs strenge neef XML heeft een aparte XML diff. En omdat Markdown in static-site-builds vaak naar HTML compileert, is de Markdown diff een nuttige buur.
Dit is een diff op tekstniveau met HTML-bewuste syntax highlighting, geen DOM-diff. De vergelijking draait op tekenniveau, daarna verschuift een semantische naverwerkingsstap de markeringen zodat ze op tag-namen, attribuutwaarden en zichtbare tekst belanden in plaats van op willekeurige leestekens. Toevoegingen verschijnen groen in het rechterpaneel, verwijderingen rood links.
HTML heeft meer parsing-eigenaardigheden dan mensen zich herinneren, en de meeste tellen pas wanneer je twee bestanden als tekst vergelijkt. Volgens het parsing-algoritme is de attribuutvolgorde niet significant, kunnen attribuut-aanhalingstekens enkel, dubbel of voor sommige waarden afwezig zijn, en zijn tag- en attribuutnamen hoofdletterongevoelig. Een tekst-diff markeert toch elke herschikking en hoofdletterwisseling. De praktische workaround is beide kanten met dezelfde tool te formatteren (Prettier met parser: "html" werkt goed), zodat de panelen genormaliseerd zijn voordat je de diff leest.
Deze tool parseert het document niet in een DOM-boom om knopen te vergelijken. Dat betekent dat twee bestanden die identiek renderen in een browser, bijvoorbeeld één met <img src="a.png"> en één met <img src='a.png' />, hier toch als verschillend verschijnen. Als je een echte structurele vergelijking nodig hebt, parseer dan beide kanten met DOMParser en loop de bomen zelf door, of haal beide eerst door Tidy. Voor 95% van de code-reviewgevallen (een copy-aanpassing, een attribuut-wissel, een toegevoegd aria-label) is de tekst-diff sneller en duidelijker.
Twee tekstpanelen, één diff. Geen registratie, geen upload, geen heen-en-weer naar de server.
Plak de oude HTML links, de nieuwe HTML rechts. Of klik aan beide kanten op Uploaden om direct een .html-, .htm- of .eml-bestand te laden. De Voorbeeld-knop vult beide panelen met een klein landingspagina-fragment als je de tool eerst in actie wilt zien.
Klik op Format in elk paneel om met consistente inspringing pretty-print te formatteren. Dat normaliseert witruimte en regelafbrekingen zodat de diff zich richt op echte inhoudswijzigingen, niet op formatteringsruis tussen een Windows CRLF-bestand en een Unix LF-bestand. De validatiebadge wordt groen wanneer het document schoon parseert.
Verwijderingen verschijnen met rode markering links, toevoegingen met groene markering rechts. De wijzigingstellers in elke header vertellen je hoeveel afzonderlijke bewerkingen de diff vond over tag-namen, attribuutwaarden en zichtbare tekst. Scroll in een paneel en het andere volgt synchroon.
Een CMS-templatewijziging gaat live en een downstream consument meldt kapotte hero-markup. Curl de gerenderde HTML voor en na de deploy, plak beide in de diff, en de schuldige wrapper-<div> of class-wissel is direct duidelijk. Nuttig voor WordPress-thema-upgrades, Hugo- en Jekyll-layoutbewerkingen en elke server-rendered uitvoer waar de bron-template niet rechtstreeks leesbaar is.
Email-HTML vergeeft niets. Outlook gebruikt nog steeds de Word-renderingengine, dus een verwisselde <table>-nesting of een hernoemd inline style-attribuut kan de layout aan diggelen slaan. Diff variant A tegen variant B voor je de campagne verstuurt en haal beide daarna door Litmus of Email on Acid. Een ontbrekende cellpadding="0" in de diff vangen is goedkoper dan hem in duizend inboxen vangen.
Een PR voegt aria-label-, role- en aria-describedby-attributen toe op de helft van de componenten. De tekst-diff maakt het triviaal om te bevestigen dat elk interactief element het juiste attribuut kreeg, dat geen role="presentation" op een echte knop is gezet en dat geen focusbaar element zijn toegankelijke naam verloor. Combineer dit met axe DevTools of Lighthouse voor de eigenlijke audit.
Een copywriter stuurt de homepage terug met herziene koppen en een nieuwe CTA. Plak de live HTML tegen de voorgestelde HTML en de diff vertelt je precies welke <h1>, <p> en knoptekst veranderde, plus eventuele class- of href-bewerkingen die meeliftten. Sneller dan een Word-document met wijzigingen bijhouden en het overleeft de retourreis naar de codebase intact.
Na een DOMPurify- of sanitize-html-versie-bump regressietest je de sanitizer met bekend slechte payloads en diff je de uitvoer tegen een eerdere goede baseline. Een sanitizer die plotseling <svg onload="..."> of javascript:-URLs in href-attributen behoudt, is precies het soort regressie dat je in CI wilt vangen voor het live gaat. De diff laat enkele-tekenwijzigingen (een ontbrekende escape) opspringen.
Een korte spiekbrief voor de parsing-details die deze tool het vaakst aan het licht brengt. Alles is gegrond in de WHATWG HTML Living Standard.
| Topic | What this tool does |
|---|---|
| Void-elementen | <img>, <br>, <input>, <meta>, <link>, <hr> en consorten hebben geen sluit-tag. De XHTML-stijl trailing slash <br /> is in HTML5 toegestaan maar rendert als no-op; de parser negeert hem. |
| Attribuutvolgorde | Niet significant volgens de HTML-spec. <a href="/x" class="btn"> en <a class="btn" href="/x"> zijn identiek voor een parser. Een tekst-diff markeert de wissel; formatteer beide kanten om de volgorde stabiel te houden. |
| Attribuut-quoting | Dubbele aanhalingstekens, enkele of helemaal geen voor waarden zonder spaties of speciale tekens. id=hero, id='hero' en id="hero" zijn equivalent. De meeste stijlgidsen vereisen dubbele aanhalingstekens voor consistentie. |
| Booleaanse attributen | Aanwezigheid is wat telt. <input disabled>, <input disabled=""> en <input disabled="disabled"> deactiveren de input allemaal. De spec beveelt de kale vorm aan; XHTML vereiste de uitgebreide vorm. |
| Hoofdlettergevoeligheid | Tag- en attribuutnamen zijn hoofdletterongevoelig in HTML (<DIV> is gelijk aan <div>). Attribuutwaarden zijn hoofdlettergevoelig (id="Hero" verschilt van id="hero"). De conventie sinds HTML5 is kleine letters voor tags en attributen. |
| Tekenentiteiten | Vijf ingebouwde: & < > " '. Plus benoemde entiteiten zoals en numerieke verwijzingen zoals é voor letters met accenten. CDATA-secties zijn alleen geldig in foreign content (SVG, MathML), niet in gewone HTML. |
| DOCTYPE | HTML5 gebruikt de korte vorm <!DOCTYPE html>. Oudere XHTML 1.0-doctypes worden nog gewoon geparseerd, maar triggeren op dezelfde manier de no-quirks-modus. Een ontbrekende of misvormde DOCTYPE laat de pagina in quirks-modus vallen, wat het box-model-gedrag verandert. |
| Witruimte | Reeksen spaties, tabs en regelafbrekingen klappen bij rendering samen tot één spatie, behalve binnen <pre>, <textarea> en elementen met CSS white-space: pre. De brontekst blijft behouden, dus een tekst-diff ziet elke byte. |
Onder de motorkap is het hetzelfde algoritme op tekenniveau, maar de editor gebruikt HTML-modus highlighting zodat tags, attributen en entiteiten met de vertrouwde syntaxiskleuring renderen terwijl je de diff leest. De Format-knop gebruikt een HTML-bewuste pretty-printer, geen generieke tekstherformattering, waardoor element-nesting intact blijft. Voor proza zonder markup is onze tekst-diff prima; voor elk bestand waar tag-grenzen ertoe doen, is deze weergave makkelijker te scannen.
Niet voor een browser. De HTML Living Standard zegt dat attribuutvolgorde op een open-tag niet significant is, dus <a href="/x" class="btn"> en <a class="btn" href="/x"> renderen identiek. Een tekst-diff markeert de wissel toch omdat hij de ruwe tekens ziet. De oplossing is beide kanten met dezelfde tool te formatteren (Prettier en html-validate sorteren verstandig), zodat de attribuutvolgorde stabiel is voor je vergelijkt.
HTML reduceert de meeste reeksen witruimte tot één spatie bij het renderen, dus twee bestanden die identiek lijken in een browser kunnen totaal andere brontekst hebben. Binnen <pre> en <textarea> blijft witruimte behouden. De diff is op tekstniveau, dus elke spatie, tab en regelafbreking telt. Formatteer eerst beide kanten om de inspringing te normaliseren; alleen de betekenisvolle wijzigingen blijven gemarkeerd.
Deze tool doet een tekst-diff, geen DOM-diff, dus de meest betrouwbare manier om formatteringsruis te negeren is beide kanten met dezelfde pretty-printer (Prettier, HTML Tidy of htmlhint --format) te formatteren voor je plakt. Dat normaliseert inspringing, attribuut-quoting en achterhangende witruimte. Voor een echte vergelijking op boomniveau parseer je elke kant met DOMParser en loop je de knopen door; voor code-review en copy-edit-werk is de formatteer-dan-diff-workflow sneller en vangt hij dezelfde bugs.
De inhoud van <script> en <style> wordt als platte tekst gediffd, teken voor teken. Dat betekent dat een eenregelige CSS-wijziging in een <style>-blok of een hernoemde functie in een inline <script> precies daar verschijnt waar je het verwacht. Voor grotere scriptblokken kun je overwegen ze naar .js-bestanden te halen en apart te diffen. De HTML-modus in de editor markeert nog steeds script- en style-grenzen zodat de omringende markup leesbaar blijft.
Bestanden worden gelezen als UTF-8, wat het standaard is voor HTML5 en wat de <meta charset="UTF-8">-tag declareert. Benoemde entiteiten zoals &, <, > en worden gediffd als hun letterlijke brontekst, niet de gedecodeerde vorm, dus een wissel van naar een echt spatieteken verschijnt als wijziging. Als twee bestanden identiek renderen in de browser maar de diff aan het begin oplicht, vermoed dan een UTF-8 byte order mark op één van beide.
Je HTML verlaat nooit je browser. De formatter, validator en diff draaien allemaal op je machine, lokaal. Geen analytics op je invoer, geen logs, geen "behulpzame" cloud-retourreis. Syntax highlighting volgt de WHATWG HTML Living Standard, en de oudere W3C HTML 5.2-aanbeveling is een nuttige kruisverwijzing. Element-niveau referentiedocumentatie staat op MDN, en toegankelijkheidspatronen komen uit de ARIA Authoring Practices Guide. Achtergrondlectuur over het formaat zelf op Wikipedia.