Porovnávání HTML kódu - jak na to bez stresu

HTML je základ všeho na webu. A když děláš frontend, pořád něco porovnáváš - šablony, templaty, vygenerovaný output. Hlavně když něco nefunguje a nevíš proč.

Kdy to potřebuju

• Email templates - upravuješ, testuješ napříč klienty
• Komponenty - React, Vue, Angular - refaktoruješ
• CMS output - debuguješ co vygeneroval WordPress
• Static site buildy - ověřuješ že output je správný

Co je na HTML diffu otravné

HTML má svoje specifika:

• Whitespace - přidáš mezeru a diff se zblázní
• Inline styles vs class - vizuálně stejné, kód jiný
• Pořadí atributů - class="foo" id="bar" vs id="bar" class="foo" - funguje stejně
• Self-closing tagy - <br> vs <br /> - opět stejné
• Komentáře - někdy chceš ignorovat, někdy ne

Co používám

Pro rychlé porovnání:

1. Formátuju oba kusy HTML (VS Code Prettier)
2. Hodím do Code Diff s HTML syntaxí
3. Koukám co se změnilo

Pro vážnější věci:

• Browser DevTools - inspektuješ DOM přímo
• HTMLHint/Beautifier - normalizuješ před diffem
• IDE pluginy - VS Code má slušný diff

Email templates - speciální peklo

Email HTML je kapitola sama pro sebe. Každý klient renderuje jinak, Outlook je... no, Outlook.

Co dělám:

• Porovnávám rendered output, ne jen zdroják
• Testuji v různých klientech (Outlook, Gmail, Apple Mail)
• Používám Litmus nebo Email on Acid pro visual regression
• Verzuji templates v Gitu

Tip: když něco nefunguje v Outlooku, obvykle to vyřeší tabulky místo divů. Jo, je to rok 2025 a pořád používáme tabulky pro layout v emailech.

Komponenty ve frameworkách

S React/Vue/Angular je to trochu jiné:

• JSX/template syntax má svoje pravidla
• Sleduju props a state změny
• Používám snapshot testy (Jest)

Snapshot testy jsou super - když se změní HTML output, test spadne a ukáže ti diff.

SEO dopad

Změny v HTML můžou ovlivnit SEO:

• Title tagy a meta descriptions
• Heading hierarchy (h1, h2, h3...)
• Schema.org markup
• Odkazy a navigace
• ARIA atributy (accessibility)

Vždycky si po větších změnách projedu Lighthouse.

Automatizace

Co máme v CI:

• Snapshot testy - zachytí nechtěné HTML změny
• Visual regression (BackstopJS/Percy) - změny ve stylech
• Accessibility testy (aXe) - WCAG compliance
• Performance - velikost HTML, loading time

---

HTML diff je denní chleba frontenďáka. Kombinuju textový diff s visual testingem - textový ukáže CO se změnilo, visual JAK to vypadá.

Potřebuješ rychle porovnat dva HTML snippety? Hoď je do Code Diff s HTML zvýrazněním.