Breadcrumbs

HTML Compare Concepts

HTML Compare Concepts

This topic covers the key comparison behaviours and features of HTML Compare, explaining how each works so you can choose the right configuration for your use case.

Comparison Modes

Word-by-word Comparison (Default)

HTML Compare performs word-by-word comparison by default. Each word in the HTML text content is compared individually, so the output highlights only the specific words that changed rather than marking entire paragraphs as added or deleted. This produces precise, readable redlines even when only a small part of a paragraph changed.

Character-by-character Comparison

Character-by-character mode provides changes at character level rather than word level. This is useful for identifying spelling mistakes, individual character insertions, or grammatical corrections where the change is smaller than a word. Enable it via the characterByCharacter configuration element.

Special HTML Table Comparison

HTML Compare has specialised processing for tables conforming to the W3C HTML table specification.
The goal is to keep tables in the comparison output valid so they render correctly in browsers and editors. Supported table changes include:

  • Cell content changes.

  • Row and column additions and deletions.

  • Row and column spanning changes.

Table processing behaviour is controlled by the tableConfiguration element in the configuration file, including validation level (relaxed or strict), column keying mode (auto or position), and handling for invalid tables (propagateUp, fail, or compareAsXml).

Ignoring document structure

This feature allows comparison by content rather than by structure. It ignores structural alignment for formatting elements such as <b>, <i>, <em>, <strong>, and can be extended to block-level elements such as <div> and <span>. Controlled via formattingConfiguration in the configuration file.

MathML comparison

HTML Compare includes special processing for embedded MathML, producing valid, renderable comparison output when the MathML is itself valid and renderable. Three granularity modes are available:

  • adjacent — repeats A and B MathML inputs side by side.

  • detailed-adjacent — repeats inputs side by side with individual changes highlighted.

  • inline — reports differences within the MathML without duplicating inputs.

Inline SVG comparison

This feature performs XML-based comparison of inline SVG elements, identifying changes between two SVG files embedded in the HTML. SVG comparison can be configured with granularity modes (adjacent or detailed-adjacent), Z-index change representation, numeric tolerance (to ignore
sub-pixel differences), and fallback behaviour for significantly different SVGs.

CSS and JavaScript Handling

Conflicting CSS and JavaScript between two HTML documents is resolved by selecting the CSS and JavaScript from the second (B) document and applying them to the final output. Changes to CSS and JavaScript themselves are not compared.

Markup Styles

The HTML Compare output uses markup styles to indicate which content comes from document A (deleted/original) and which from document B (added/new). Default styles use red for A content and green for B content, configurable via inputAMarkupStyle and inputBMarkupStyle inhtmlConfiguration.