Klistra in, formatera och jämför två HTML-dokument sida vid sida. Tagg-medveten syntax highlighting och kontroller för well-formedness i realtid är inbyggda.
Ett gratis verktyg i webbläsaren för att jämföra två HTML-dokument. Klistra in den gamla versionen av en landing page till vänster, den nya till höger, så lyser ändringarna upp tagg för tagg och attribut för attribut. Inget laddas upp.
Själva diffen ligger på teckennivå. Format-knappen i varje ruta omformaterar din HTML med konsekvent indrag, så som Prettier eller HTML Tidy skulle göra. Syntax highlighting följer WHATWG HTML Living Standard, så void-element, booleska attribut och entity-referenser renderas korrekt medan du läser diffen.
Om du någonsin har skickat ut en copy-rättelse till en marknadssida och förlorat en timme på att lista ut varför ett klassnamn på hero-sektionen också ändrades, är detta verktyget som drar fram det på sekunder. För vanlig prosa är vår text-diff rätt val. HTMLs strikta kusin XML har en egen XML-diff. Och eftersom Markdown ofta kompileras till HTML i static-site-builds är Markdown-diffen en användbar granne.
Det här är en diff på textnivå med HTML-medveten syntax highlighting, inte en DOM-diff. Jämförelsen körs på teckennivå, sedan flyttar ett semantiskt efterbearbetningssteg markeringarna så att de hamnar på taggnamn, attributvärden och synlig text i stället för slumpmässig interpunktion. Insättningar visas i grönt i den högra rutan, raderingar i rött till vänster.
HTML har fler parsing-egenheter än folk minns, och de flesta räknas bara när du jämför två filer som text. Enligt parsing-algoritmen är attributordningen inte signifikant, attributcitattecken kan vara enkla, dubbla eller helt frånvarande för vissa värden, och tagg- och attributnamn är skiftlägesokänsliga. En text-diff flaggar ändå varje omkastning och skiftlägesbyte. Den praktiska lösningen är att formatera båda sidorna med samma verktyg (Prettier med parser: "html" fungerar bra), så att rutorna är normaliserade innan du läser diffen.
Det här verktyget parsar inte dokumentet till ett DOM-träd och jämför noder. Det innebär att två filer som renderas identiskt i en webbläsare, till exempel en med <img src="a.png"> och en med <img src='a.png' />, ändå dyker upp som olika här. Om du behöver en riktig strukturell jämförelse, parsa båda sidorna med DOMParser och gå igenom träden själv, eller kör båda genom Tidy först. För 95% av code review-fallen (en copy-rättelse, ett attributbyte, ett tillagt aria-label) är text-diffen snabbare och tydligare.
Två textrutor, en diff. Ingen registrering, ingen uppladdning, ingen tur till servern.
Klistra in den gamla HTML till vänster, den nya HTML till höger. Eller klicka på Ladda upp på endera sidan för att direkt läsa in en .html-, .htm- eller .eml-fil. Exempel-knappen fyller båda rutorna med ett litet landing page-utdrag om du vill se verktyget i aktion först.
Klicka på Format i varje ruta för att pretty-print med konsekvent indrag. Det normaliserar blanksteg och radbrytningar så att diffen fokuserar på riktiga innehållsändringar, inte formateringsbrus mellan en Windows-CRLF-fil och en Unix-LF-fil. Valideringsmärket blir grönt när dokumentet parsas rent.
Raderingar visas med röd markering till vänster, insättningar med grön markering till höger. Ändringsräknarna i varje rubrik talar om hur många distinkta redigeringar diffen hittade i taggnamn, attributvärden och synlig text. Scrolla i en ruta så följer den andra med i samma takt.
En CMS-mallsändring går ut och en nedströmskonsument rapporterar trasig hero-markup. Curla den renderade HTML före och efter deployen, klistra in båda i diffen, så blir den skyldiga wrapper-<div>:en eller klassbytet uppenbart. Användbart för WordPress-temauppgraderingar, Hugo- och Jekyll-layoutredigeringar och vilken serverrenderad utdata som helst där källmallen inte är direkt läsbar.
Email-HTML är obarmhärtig. Outlook använder fortfarande Words renderingsmotor, så en utbytt <table>-nästling eller ett omdöpt inline style-attribut kan slå sönder layouten. Diffa variant A mot variant B innan du skickar kampanjen, kör sedan båda genom Litmus eller Email on Acid. Att fånga ett saknat cellpadding="0" i diffen är billigare än att fånga det i tusen inkorgar.
En PR lägger till aria-label-, role- och aria-describedby-attribut på halva komponentbasen. Text-diffen gör det trivialt att bekräfta att varje interaktivt element fick rätt attribut, att ingen role="presentation" applicerades på en riktig knapp, och att inget fokuserbart element förlorade sitt accessible name. Para ihop det med axe DevTools eller Lighthouse för själva granskningen.
En copywriter skickar tillbaka startsidan med reviderade rubriker och en ny CTA. Klistra in live-HTML mot den föreslagna HTML, och diffen säger exakt vilka <h1>, <p> och knapptexter som ändrades, plus eventuella class- eller href-redigeringar som följde med. Snabbare än ett Word-dokument med ändringsspårning och överlever rundresan tillbaka in i kodbasen intakt.
Efter ett DOMPurify- eller sanitize-html-versionshöjning regressionstestar du sanitizern med kända onda payloads och diffar utdatan mot en tidigare bra baseline. En sanitizer som plötsligt bevarar <svg onload="..."> eller javascript:-URLer i href-attribut är precis den sortens regression du vill fånga i CI innan den går ut. Diffen får ett-tecken-ändringar (en saknad escape) att hoppa fram.
Ett kort fusklapp för parsing-detaljerna det här verktyget oftast lyfter fram. Allt grundat i WHATWG HTML Living Standard.
| Topic | What this tool does |
|---|---|
| Void-element | <img>, <br>, <input>, <meta>, <link>, <hr> och kompani har ingen sluttagg. XHTML-stilens slutslash <br /> är tillåten i HTML5 men renderas som no-op; parsern ignorerar den. |
| Attributordning | Inte signifikant enligt HTML-specen. <a href="/x" class="btn"> och <a class="btn" href="/x"> är identiska för en parser. En text-diff flaggar bytet; formatera båda sidorna för att hålla ordningen stabil. |
| Attribut-quoting | Dubbla citattecken, enkla eller inga alls för värden utan blanksteg eller specialtecken. id=hero, id='hero' och id="hero" är ekvivalenta. De flesta stilguider kräver dubbla citattecken för konsekvens. |
| Booleska attribut | Närvaron är vad som räknas. <input disabled>, <input disabled=""> och <input disabled="disabled"> inaktiverar alla input. Specen rekommenderar den nakna formen; XHTML krävde den utförliga formen. |
| Skiftlägeskänslighet | Tagg- och attributnamn är skiftlägesokänsliga i HTML (<DIV> är lika med <div>). Attributvärden är skiftlägeskänsliga (id="Hero" skiljer sig från id="hero"). Konventionen sedan HTML5 är gemener för taggar och attribut. |
| Tecken-entiteter | Fem inbyggda: & < > " '. Plus namngivna entiteter som och numeriska referenser som é för bokstäver med accenter. CDATA-sektioner är endast giltiga i foreign content (SVG, MathML), inte i vanlig HTML. |
| DOCTYPE | HTML5 använder kortformen <!DOCTYPE html>. Äldre XHTML 1.0-doctyper parsas fortfarande men triggar no-quirks-läget på samma sätt. En saknad eller felaktig DOCTYPE släpper sidan i quirks-läge, vilket ändrar box model-beteende. |
| Blanksteg | Sviter av blanksteg, tabbar och radbrytningar kollapsar till ett enda mellanslag vid rendering, utom inuti <pre>, <textarea> och element med CSS white-space: pre. Källtexten bevaras, så en text-diff ser varje byte. |
Under huven är det samma algoritm på teckennivå, men editorn använder HTML-läges-highlighting så att taggar, attribut och entiteter renderas med bekant syntaxfärgning medan du läser diffen. Format-knappen använder en HTML-medveten pretty-printer, inte en generisk textomformatering, vilket håller element-nästling intakt. För prosa utan markup räcker vår text-diff; för varje fil där tagg-gränser spelar roll är denna vy lättare att skanna.
Inte för en webbläsare. HTML Living Standard säger att attributordningen på en starttag inte är signifikant, så <a href="/x" class="btn"> och <a class="btn" href="/x"> renderas identiskt. En text-diff flaggar ändå bytet eftersom den ser de råa tecknen. Lösningen är att formatera båda sidorna med samma verktyg (Prettier och html-validate sorterar förnuftigt), så att attributordningen är stabil före jämförelsen.
HTML kollapsar de flesta sviter av blanksteg till ett enda mellanslag vid rendering, så två filer som ser identiska ut i en webbläsare kan ha helt olika källtext. Inuti <pre> och <textarea> bevaras blanksteg. Diffen är på textnivå, så varje blanksteg, tab och radbrytning räknas. Formatera båda sidorna först för att normalisera indrag; bara de meningsfulla ändringarna förblir markerade.
Detta verktyg gör en text-diff, inte en DOM-diff, så det mest pålitliga sättet att ignorera formateringsbrus är att formatera båda sidorna med samma pretty-printer (Prettier, HTML Tidy eller htmlhint --format) före inklistring. Det normaliserar indrag, attribut-quoting och eftersläpande blanksteg. För en riktig jämförelse på trädnivå parsar du varje sida med DOMParser och går igenom noderna; för code review och copy-edit-arbete är formatera-sedan-diffa-flödet snabbare och fångar samma buggar.
Innehållet i <script> och <style> diffas som ren text, tecken för tecken. Det betyder att en enradig CSS-ändring inuti ett <style>-block eller en omdöpt funktion inuti en inline <script> dyker upp precis där du förväntar dig. För större skriptblock, överväg att bryta ut dem till .js-filer och diffa dem separat. HTML-läget i editorn markerar fortfarande script- och style-gränser så att den omgivande markupen förblir läsbar.
Filer läses som UTF-8, vilket är standard för HTML5 och vad <meta charset="UTF-8">-taggen deklarerar. Namngivna entiteter som &, <, > och diffas som sin bokstavliga källtext, inte den avkodade formen, så ett byte från till ett riktigt blankstegstecken visas som en ändring. Om två filer renderas identiskt i webbläsaren men diffen tänds i början, misstänk en UTF-8 byte order mark på en av dem.
Din HTML lämnar aldrig din webbläsare. Formatteraren, valideraren och diffen körs alla på din maskin, lokalt. Ingen analytics på din input, inga loggar, ingen "hjälpsam" cloud-rundresa. Syntax highlighting följer WHATWG HTML Living Standard, och den äldre W3C HTML 5.2-rekommendationen är en användbar korsreferens. Element-nivå-referensdokumentation finns på MDN, och tillgänglighetsmönster kommer från ARIA Authoring Practices Guide. Bakgrundsläsning om själva formatet på Wikipedia.