Indsæt, formater og sammenlign to HTML-dokumenter side om side. Tag-bevidst syntax highlighting og live well-formedness-tjek er indbygget.
Et gratis værktøj i browseren til at sammenligne to HTML-dokumenter. Indsæt den gamle version af en landing page til venstre, den nye til højre, og ændringerne lyser op tag for tag og attribut for attribut. Intet uploades.
Selve diffen arbejder på tegnniveau. Format-knappen i hver rude omformaterer din HTML med konsekvent indrykning, ligesom Prettier eller HTML Tidy ville gøre. Syntax highlighting følger WHATWG HTML Living Standard, så void-elementer, booleske attributter og entity-referencer alle gengives korrekt mens du læser diffen.
Hvis du nogensinde har shippet en copy-rettelse til en marketingside og brugt en time på at finde ud af hvorfor et klassenavn på hero-sektionen også var ændret, er dette værktøjet der trækker det frem på sekunder. For ren prosa er vores tekst-diff det rigtige valg. HTMLs strikse fætter XML har en dedikeret XML-diff. Og fordi Markdown ofte kompileres til HTML i static-site-builds, er Markdown-diffen en nyttig nabo.
Dette er en diff på tekstniveau med HTML-bevidst syntax highlighting, ikke en DOM-diff. Sammenligningen kører på tegnniveau, derefter flytter et semantisk efterbehandlingstrin markeringerne så de lander på tag-navne, attributværdier og synlig tekst i stedet for tilfældig tegnsætning. Indsættelser vises i grønt i højre rude, sletninger i rødt til venstre.
HTML har flere parsing-særheder end folk husker, og de fleste tæller kun når man sammenligner to filer som tekst. Ifølge parsing-algoritmen er attributrækkefølgen ikke signifikant, attribut-citationstegn kan være enkelte, dobbelte eller fraværende for nogle værdier, og tag- og attributnavne er ikke versalfølsomme. En tekst-diff flagger alligevel hver omrokering og versalskift. Den praktiske workaround er at formatere begge sider med samme værktøj (Prettier med parser: "html" fungerer godt), så ruderne er normaliseret før du læser diffen.
Dette værktøj parser ikke dokumentet til et DOM-træ og sammenligner ikke noder. Det betyder at to filer der gengives identisk i en browser, fx en med <img src="a.png"> og en med <img src='a.png' />, alligevel vises som forskellige her. Hvis du har brug for en ægte strukturel sammenligning, parse begge sider med DOMParser og gennemgå træerne selv, eller kør begge gennem Tidy først. For 95% af code review-tilfældene (en copy-rettelse, en attribut-bytning, en tilføjet aria-label) er tekst-diffen hurtigere og klarere.
To tekstruder, én diff. Ingen tilmelding, ingen upload, ingen tur til serveren.
Indsæt den gamle HTML til venstre, den nye HTML til højre. Eller klik Upload på en af siderne for at indlæse en .html-, .htm- eller .eml-fil direkte. Eksempel-knappen fylder begge ruder med et lille landing page-uddrag, hvis du vil se værktøjet i aktion først.
Klik Format i hver rude for at pretty-print med konsekvent indrykning. Det normaliserer mellemrum og linjeskift, så diffen fokuserer på rigtige indholdsændringer, ikke formateringsstøj fra en Windows-CRLF-fil mod en Unix-LF-fil. Valideringsmærket bliver grønt når dokumentet parser rent.
Sletninger vises med rød markering til venstre, indsættelser med grøn markering til højre. Ændringstællerne i hver header fortæller dig hvor mange forskellige redigeringer diffen fandt på tværs af tag-navne, attributværdier og synlig tekst. Scroll i en rude og den anden følger med synkront.
En CMS-skabelonændring går ud, og en downstream-forbruger rapporterer ødelagt hero-markup. Curl den renderede HTML før og efter deployen, indsæt begge i diffen, og den skyldige wrapper-<div> eller klassebytning er åbenlys. Nyttigt ved WordPress-tema-opgraderinger, Hugo- og Jekyll-layoutredigeringer og enhver server-renderet output hvor kildeskabelonen ikke er direkte læsbar.
Email-HTML er nådesløs. Outlook bruger stadig Words renderingsmotor, så en byttet <table>-indlejring eller et omdøbt inline style-attribut kan smadre layoutet. Diff variant A mod variant B før du sender kampagnen, kør derefter begge gennem Litmus eller Email on Acid. At fange et manglende cellpadding="0" i diffen er billigere end at fange det i tusind indbakker.
En PR tilføjer aria-label-, role- og aria-describedby-attributter på halvdelen af komponenterne. Tekst-diffen gør det trivielt at bekræfte at hvert interaktivt element fik den rigtige attribut, at ingen role="presentation" blev sat på en rigtig knap, og at intet fokuserbart element mistede sit accessible name. Par det med axe DevTools eller Lighthouse til selve auditeringen.
En copywriter sender forsiden tilbage med reviderede overskrifter og en ny CTA. Indsæt den live HTML mod den foreslåede HTML, og diffen fortæller dig præcis hvilke <h1>, <p> og knaptekster der ændrede sig, plus eventuelle class- eller href-redigeringer der fulgte med. Hurtigere end et Word-dokument med ændringssporing, og det overlever rejsen tilbage til kodebasen intakt.
Efter et DOMPurify- eller sanitize-html-versionsbump regressionstester du sanitizeren med kendt onde payloads og differ outputtet mod en tidligere god baseline. En sanitizer der pludselig bevarer <svg onload="..."> eller javascript:-URLer i href-attributter er præcis den slags regression du vil fange i CI før den går i luften. Diffen får et-tegns-ændringer (en manglende escape) til at springe i øjnene.
En kort huskeseddel til de parsing-detaljer dette værktøj oftest bringer frem. Alt forankret i WHATWG HTML Living Standard.
| Topic | What this tool does |
|---|---|
| Void-elementer | <img>, <br>, <input>, <meta>, <link>, <hr> og venner har ingen sluttag. Den XHTML-stil afsluttende skråstreg <br /> er tilladt i HTML5, men gengives som no-op; parseren ignorerer den. |
| Attributrækkefølge | Ikke signifikant ifølge HTML-specen. <a href="/x" class="btn"> og <a class="btn" href="/x"> er identiske for en parser. En tekst-diff flagger byttet; formater begge sider for at holde rækkefølgen stabil. |
| Attribut-quoting | Dobbelte citationstegn, enkelte eller slet ingen for værdier uden mellemrum eller specialtegn. id=hero, id='hero' og id="hero" er ækvivalente. De fleste stilguider kræver dobbelte citationstegn for konsekvens. |
| Booleske attributter | Det er tilstedeværelsen der tæller. <input disabled>, <input disabled=""> og <input disabled="disabled"> deaktiverer alle inputtet. Specen anbefaler den nøgne form; XHTML krævede den udførlige form. |
| Versalfølsomhed | Tag- og attributnavne er ikke versalfølsomme i HTML (<DIV> svarer til <div>). Attributværdier er versalfølsomme (id="Hero" adskiller sig fra id="hero"). Konventionen siden HTML5 er små bogstaver i tags og attributter. |
| Tegnentiteter | Fem indbyggede: & < > " '. Plus navngivne entiteter som og numeriske referencer som é for accentuerede bogstaver. CDATA-sektioner er kun gyldige i foreign content (SVG, MathML), ikke i almindelig HTML. |
| DOCTYPE | HTML5 bruger kortformen <!DOCTYPE html>. Ældre XHTML 1.0-doctyper parses stadig, men udløser no-quirks-tilstand på samme måde. En manglende eller malformet DOCTYPE smider siden i quirks-tilstand, hvilket ændrer box model-adfærd. |
| Mellemrum | Rækker af mellemrum, tabs og linjeskift kollapser til ét enkelt mellemrum ved rendering, undtagen inde i <pre>, <textarea> og elementer med CSS white-space: pre. Kildeteksten bevares, så en tekst-diff ser hver byte. |
Under motorhjelmen er det den samme algoritme på tegnniveau, men editoren bruger HTML-tilstandshighlighting, så tags, attributter og entiteter gengives med velkendt syntaksfarvning mens du læser diffen. Format-knappen bruger en HTML-bevidst pretty-printer, ikke en generisk tekstomformatering, hvilket holder element-indlejring intakt. For prosa uden markup er vores tekst-diff fin nok; for enhver fil hvor tag-grænser betyder noget, er denne visning lettere at scanne.
Ikke for en browser. HTML Living Standard siger at attributrækkefølgen på et starttag ikke er signifikant, så <a href="/x" class="btn"> og <a class="btn" href="/x"> gengives identisk. En tekst-diff flagger alligevel byttet fordi den ser de rå tegn. Løsningen er at formatere begge sider med samme værktøj (Prettier og html-validate sorterer fornuftigt), så attributrækkefølgen er stabil før sammenligning.
HTML kollapser de fleste rækker af mellemrum til ét enkelt mellemrum ved rendering, så to filer der ser identiske ud i en browser kan have vidt forskellig kildetekst. Inde i <pre> og <textarea> bevares mellemrum. Diffen er på tekstniveau, så hvert mellemrum, tab og linjeskift tæller. Formater begge sider først for at normalisere indrykning; kun de meningsfulde ændringer forbliver markeret.
Dette værktøj laver en tekst-diff, ikke en DOM-diff, så den mest pålidelige måde at ignorere formateringsstøj er at formatere begge sider med samme pretty-printer (Prettier, HTML Tidy eller htmlhint --format) før indsættelse. Det normaliserer indrykning, attribut-quoting og afsluttende mellemrum. For en ægte sammenligning på træniveau parser du hver side med DOMParser og gennemgår noderne; for code review og copy-edit-arbejde er formater-så-diff-flowet hurtigere og fanger de samme bugs.
Indholdet af <script> og <style> diffes som ren tekst, tegn for tegn. Det betyder at en énlinjes CSS-ændring inde i en <style>-blok eller en omdøbt funktion inde i en inline <script> dukker op præcis hvor du forventer det. For større script-blokke overvej at trække dem ud i .js-filer og diffe dem separat. HTML-tilstanden i editoren markerer stadig script- og style-grænser, så den omkringliggende markup forbliver læsbar.
Filer læses som UTF-8, hvilket er standarden for HTML5 og det <meta charset="UTF-8">-tagget erklærer. Navngivne entiteter som &, <, > og diffes som deres bogstavelige kildetekst, ikke den afkodede form, så et bytte fra til et rigtigt mellemrumstegn vises som en ændring. Hvis to filer gengives identisk i browseren, men diffen lyser i begyndelsen, mistænk en UTF-8 byte order mark på en af dem.
Din HTML forlader aldrig din browser. Formattereren, validatoren og diffen kører alle på din maskine, lokalt. Ingen analytics på dit input, ingen logs, ingen "hjælpsom" cloud-tur frem og tilbage. Syntax highlighting følger WHATWG HTML Living Standard, og den ældre W3C HTML 5.2-anbefaling er en nyttig krydsreference. Element-niveau referencedokumentation er på MDN, og tilgængelighedsmønstre kommer fra ARIA Authoring Practices Guide. Baggrundslæsning om selve formatet på Wikipedia.