Lim inn, formater og sammenlign to HTML-dokumenter side om side. Tag-bevisst syntaksutheving og live well-formedness-sjekker er innebygd.
Et gratis verktøy i nettleseren for å sammenligne to HTML-dokumenter. Lim inn den gamle versjonen av en landingsside til venstre, den nye til høyre, og endringene lyser opp tagg for tagg og attributt for attributt. Ingenting lastes opp.
Selve diffen jobber på tegnnivå. Format-knappen i hver rute reformaterer HTML-en din med konsekvent innrykk, slik Prettier eller HTML Tidy ville gjort. Syntaksutheving følger WHATWG HTML Living Standard, så void-elementer, booleske attributter og entity-referanser gjengis riktig mens du leser diffen.
Hvis du noen gang har sendt en copy-rettelse til en markedsføringsside og brukt en time på å finne ut hvorfor et klassenavn på hero-seksjonen også endret seg, er dette verktøyet som drar det frem på sekunder. For ren prosa er tekst-diffen vår det rette valget. HTMLs strenge fetter XML har en egen XML-diff. Og fordi Markdown ofte kompileres til HTML i static-site-builds, er Markdown-diffen en nyttig nabo.
Dette er en diff på tekstnivå med HTML-bevisst syntaksutheving, ikke en DOM-diff. Sammenligningen kjører på tegnnivå, deretter flytter et semantisk etterbehandlingstrinn uthevingene slik at de lander på taggnavn, attributtverdier og synlig tekst i stedet for tilfeldig tegnsetting. Innsettinger vises i grønt i den høyre ruten, slettinger i rødt til venstre.
HTML har flere parsing-særegenheter enn folk husker, og de fleste teller bare når du sammenligner to filer som tekst. Ifølge parsing-algoritmen er attributtrekkefølgen ikke signifikant, attributt-anførselstegn kan være enkle, doble eller fraværende for noen verdier, og tagg- og attributtnavn er ikke versalsensitive. En tekst-diff flagger likevel hver omrokkering og versalbytte. Den praktiske løsningen er å formatere begge sider med samme verktøy (Prettier med parser: "html" fungerer bra), slik at rutene er normaliserte før du leser diffen.
Dette verktøyet parser ikke dokumentet til et DOM-tre og sammenligner ikke noder. Det betyr at to filer som gjengis identisk i en nettleser, for eksempel én med <img src="a.png"> og én med <img src='a.png' />, likevel vises som forskjellige her. Hvis du trenger en ekte strukturell sammenligning, parse begge sider med DOMParser og gå gjennom trærne selv, eller kjør begge gjennom Tidy først. For 95% av code review-tilfellene (en copy-rettelse, et attributtbytte, et lagt til aria-label) er tekst-diffen raskere og klarere.
To tekstruter, én diff. Ingen registrering, ingen opplasting, ingen tur til serveren.
Lim inn den gamle HTML-en til venstre, den nye HTML-en til høyre. Eller klikk Last opp på en av sidene for å laste en .html-, .htm- eller .eml-fil direkte. Eksempel-knappen fyller begge ruter med et lite landingsside-utdrag hvis du vil se verktøyet i aksjon først.
Klikk Format i hver rute for å pretty-print med konsekvent innrykk. Det normaliserer mellomrom og linjeskift slik at diffen fokuserer på reelle innholdsendringer, ikke formateringsstøy fra en Windows-CRLF-fil mot en Unix-LF-fil. Valideringsmerket blir grønt når dokumentet parses rent.
Slettinger vises med rød utheving til venstre, innsettinger med grønn utheving til høyre. Endringstellerne i hver overskrift forteller deg hvor mange forskjellige redigeringer diffen fant på tvers av taggnavn, attributtverdier og synlig tekst. Scroll i en rute, og den andre følger med synkront.
En CMS-malendring går ut, og en nedstrøms forbruker rapporterer ødelagt hero-markup. Curl den rendrede HTML-en før og etter deployen, lim inn begge i diffen, og den skyldige wrapper-<div> eller klassebyttet er åpenbart. Nyttig ved WordPress-temaoppgraderinger, Hugo- og Jekyll-layoutendringer og enhver server-rendret utdata der kildemalen ikke er direkte lesbar.
Email-HTML er nådeløs. Outlook bruker fortsatt Words rendringsmotor, så en byttet <table>-nesting eller et omdøpt inline style-attributt kan ødelegge layouten. Diff variant A mot variant B før du sender kampanjen, kjør deretter begge gjennom Litmus eller Email on Acid. Å fange en manglende cellpadding="0" i diffen er billigere enn å fange den i tusen innbokser.
En PR legger til aria-label-, role- og aria-describedby-attributter på halve komponentbasen. Tekst-diffen gjør det trivielt å bekrefte at hvert interaktivt element fikk det riktige attributtet, at ingen role="presentation" ble satt på en ekte knapp, og at ingen fokuserbart element mistet sitt accessible name. Par det med axe DevTools eller Lighthouse for selve auditen.
En copywriter sender hjemmesiden tilbake med reviderte overskrifter og en ny CTA. Lim inn den live HTML-en mot den foreslåtte HTML-en, og diffen forteller deg nøyaktig hvilke <h1>, <p> og knappetekster som endret seg, pluss eventuelle class- eller href-redigeringer som fulgte med. Raskere enn et Word-dokument med endringssporing, og det overlever turen tilbake til kodebasen intakt.
Etter en DOMPurify- eller sanitize-html-versjonsoppgradering regresjonstester du sanitizeren med kjent onde payloads og differ utdataen mot en tidligere god baseline. En sanitizer som plutselig bevarer <svg onload="..."> eller javascript:-URLer i href-attributter er nøyaktig den typen regresjon du vil fange i CI før den går live. Diffen får ett-tegn-endringer (en manglende escape) til å hoppe frem.
Et kort jukseark for parsing-detaljene dette verktøyet 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 avsluttende skråstreken <br /> er tillatt i HTML5, men gjengis som no-op; parseren ignorerer den. |
| Attributtrekkefølge | Ikke signifikant ifølge HTML-spec. <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 å holde rekkefølgen stabil. |
| Attributt-quoting | Doble anførselstegn, enkle eller ingen i det hele tatt for verdier uten mellomrom eller spesialtegn. id=hero, id='hero' og id="hero" er ekvivalente. De fleste stilguider krever doble anførselstegn for konsekvens. |
| Booleske attributter | Det er tilstedeværelsen som teller. <input disabled>, <input disabled=""> og <input disabled="disabled"> deaktiverer alle inputet. Specen anbefaler den nakne formen; XHTML krevde den utførlige formen. |
| Versalsensitivitet | Tagg- og attributtnavn er ikke versalsensitive i HTML (<DIV> tilsvarer <div>). Attributtverdier er versalsensitive (id="Hero" skiller seg fra id="hero"). Konvensjonen siden HTML5 er små bokstaver i tagger og attributter. |
| Tegnentiteter | Fem innebygde: & < > " '. Pluss navngitte entiteter som og numeriske referanser som é for aksentuerte bokstaver. CDATA-seksjoner er bare gyldige i foreign content (SVG, MathML), ikke i vanlig HTML. |
| DOCTYPE | HTML5 bruker kortformen <!DOCTYPE html>. Eldre XHTML 1.0-doctyper parses fortsatt, men utløser no-quirks-modus på samme måte. En manglende eller misformet DOCTYPE kaster siden inn i quirks-modus, noe som endrer box model-atferd. |
| Mellomrom | Rekker av mellomrom, tabs og linjeskift kollapser til ett enkelt mellomrom ved rendering, unntatt inne i <pre>, <textarea> og elementer med CSS white-space: pre. Kildeteksten bevares, så en tekst-diff ser hver byte. |
Under panseret er det den samme algoritmen på tegnnivå, men editoren bruker HTML-modus-utheving slik at tagger, attributter og entiteter gjengis med kjent syntaksfarging mens du leser diffen. Format-knappen bruker en HTML-bevisst pretty-printer, ikke en generisk tekstreformatering, noe som holder element-nesting intakt. For prosa uten markup er tekst-diffen vår grei nok; for enhver fil der tagg-grenser betyr noe, er denne visningen lettere å skanne.
Ikke for en nettleser. HTML Living Standard sier at attributtrekkefølgen på en starttag ikke er signifikant, så <a href="/x" class="btn"> og <a class="btn" href="/x"> gjengis identisk. En tekst-diff flagger likevel byttet fordi den ser de rå tegnene. Løsningen er å formatere begge sider med samme verktøy (Prettier og html-validate sorterer fornuftig), slik at attributtrekkefølgen er stabil før sammenligning.
HTML kollapser de fleste rekker av mellomrom til ett enkelt mellomrom ved rendering, så to filer som ser identiske ut i en nettleser kan ha vidt forskjellig kildetekst. Inne i <pre> og <textarea> bevares mellomrom. Diffen er på tekstnivå, så hvert mellomrom, hver tab og hvert linjeskift teller. Formater begge sider først for å normalisere innrykk; bare de meningsfulle endringene forblir uthevet.
Dette verktøyet gjør en tekst-diff, ikke en DOM-diff, så den mest pålitelige måten å ignorere formateringsstøy er å formatere begge sider med samme pretty-printer (Prettier, HTML Tidy eller htmlhint --format) før innliming. Det normaliserer innrykk, attributt-quoting og avsluttende mellomrom. For en ekte sammenligning på trenivå parser du hver side med DOMParser og går gjennom nodene; for code review og copy-edit-arbeid er formater-så-diff-flyten raskere og fanger de samme bugene.
Innholdet i <script> og <style> diffes som ren tekst, tegn for tegn. Det betyr at en énlinjes CSS-endring inne i en <style>-blokk eller en omdøpt funksjon inne i en inline <script> dukker opp nøyaktig der du forventer det. For større skriptblokker, vurder å trekke dem ut til .js-filer og diffe dem separat. HTML-modusen i editoren uthever fortsatt script- og style-grenser, slik at den omkringliggende markupen forblir lesbar.
Filer leses som UTF-8, som er standarden for HTML5 og det <meta charset="UTF-8">-taggen erklærer. Navngitte entiteter som &, <, > og diffes som sin bokstavelige kildetekst, ikke den dekodede formen, så et bytte fra til et ekte mellomromstegn vises som en endring. Hvis to filer gjengis identisk i nettleseren, men diffen lyser opp i begynnelsen, mistenk en UTF-8 byte order mark på en av dem.
HTML-en din forlater aldri nettleseren din. Formattereren, validatoren og diffen kjører alle på maskinen din, lokalt. Ingen analytics på inputen din, ingen logger, ingen "hjelpsom" cloud-rundtur. Syntaksutheving følger WHATWG HTML Living Standard, og den eldre W3C HTML 5.2-anbefalingen er en nyttig kryssreferanse. Element-nivå referansedokumentasjon er på MDN, og tilgjengelighetsmønstre kommer fra ARIA Authoring Practices Guide. Bakgrunnslesing om selve formatet på Wikipedia.