# HTML Diff

Compare two HTML snippets by their visible text, ignoring tag and attribute noise.

## Run it

- **CLI:** `gizza tool html-diff '<p class="a">the quick brown fox</p>' 'right=<div><span>the slow brown fox</span></div>'`
- **Web:** https://gizza.ai/tools/html-diff/
- **Agents:** machine-readable descriptor (parameters JSON Schema) at https://gizza.ai/tools/html-diff/tool.json

## Inputs

- `left` — Original HTML _(field)_
- `right` — Updated HTML _(field)_
- `granularity` — Granularity _(field)_
- `format` — Output format _(field)_
- `ignore_case` — Ignore case _(field)_
- `ignore_whitespace` — Ignore whitespace _(field)_
- `context` — Context lines _(field)_

## Output

- Diff (text)

## Query parameters

Open the tool pre-filled and auto-run via URL:

- `left` — Original HTML
- `right` — Updated HTML
- `granularity` — Granularity
- `format` — Output format
- `ignore_case` — Ignore case
- `ignore_whitespace` — Ignore whitespace
- `context` — Context lines

Example: `https://gizza.ai/tools/html-diff/?left=%3Cp%20class%3D%22a%22%3Ethe%20quick%20brown%20fox%3C%2Fp%3E&right=%3Cdiv%3E%3Cspan%3Ethe%20slow%20brown%20fox%3C%2Fspan%3E%3C%2Fdiv%3E&granularity=line&format=unified&ignore_case=true&ignore_whitespace=true&context=3`

---

## About this tool

The **HTML diff** compares two snippets by the text a reader would see, not by markup. It strips tags, attributes, classes, ids, styles, and other HTML noise, then diffs the visible text at line or word granularity.

Use it when a CMS, email editor, markdown renderer, sanitizer, or template system rewrites markup but you only care whether the rendered copy changed. A class rename, wrapper `<div>`, or inline style update disappears; changed words and visible lines remain.

Choose **line** granularity for patch-style output with context lines, or **word** granularity for prose-style inline markers. Use **JSON** when another script needs structured operations and counts. The ignore-case and ignore-whitespace options affect matching only; output keeps the original visible tokens.

## Worked example

Original HTML:

`<p class="lead">The quick brown fox.</p>`

Updated HTML:

`<div><span style="color:red">The slow brown fox.</span></div>`

With **word** granularity and **unified** output, the visible-text comparison ignores the wrapper, class, and style changes and reports the prose edit as `The [-quick-] {+slow+} brown fox.`.

## FAQ

<details>
<summary>Does this compare raw HTML source?</summary>

No. It intentionally ignores tag and attribute noise by converting each HTML snippet to visible text first. If you need to compare the actual markup tree, use a source/AST-oriented diff tool instead.

</details>

<details>
<summary>What output formats are available?</summary>

`unified` returns a patch-style diff for line granularity and a `wdiff`-style inline word diff for word granularity. `json` returns counts plus token operations for scripts or review bots.

</details>

<details>
<summary>When should I use word granularity?</summary>

Use word granularity for paragraphs, email copy, SEO snippets, and other prose where a full line replacement would hide the exact changed word. It marks removed words as `[-old-]` and added words as `{+new+}`.

</details>

<details>
<summary>What do ignore case and ignore whitespace change?</summary>

They affect matching only. If enabled, tokens that differ only by case or spacing are treated as equal, which helps suppress formatting churn. The output still echoes the original visible text where it appears.

</details>

## Related tools

- [Colorize Text with Regex Rules](https://gizza.ai/tools/text-colorizer/): Highlight log or command output with user-defined regex color rules, then export ANSI terminal escapes or self-contained HTML.
- [Text Diff](https://gizza.ai/tools/text-diff/): Compare two text blocks and highlight added, removed, and changed lines.
- [CSV Cell Diff](https://gizza.ai/tools/csv-cell-diff/): Compare two CSVs column-by-column and highlight every individual cell that changed, plus added and removed rows and columns.
- [Compare Two Lists](https://gizza.ai/tools/list-set-diff/): Compare two lists as sets and see which items are only in A, only in B, or shared — with counts. Ignore case, trim, dedupe, and leading zeros. Runs in your browser.
- [DynamoDB JSON Converter](https://gizza.ai/tools/dynamodb-json-converter/): Convert between DynamoDB typed AttributeValue JSON and plain JSON in both directions, with auto-detect and pretty or compact output.