Pega, formatea y compara dos documentos HTML lado a lado. Resaltado de sintaxis consciente de etiquetas y comprobaciones de buena formación en vivo incluidos.
Una herramienta gratuita en el navegador para comparar dos documentos HTML. Pega la versión antigua de una landing page a la izquierda, la nueva a la derecha, y los cambios se iluminan etiqueta por etiqueta y atributo por atributo. Nada se sube.
El diff es a nivel de carácter. El botón Format de cada panel reformatea tu HTML con sangría consistente, igual que harían Prettier o HTML Tidy. El resaltado de sintaxis sigue el WHATWG HTML Living Standard, así que los elementos void, los atributos booleanos y las referencias a entidades se muestran correctamente mientras lees el diff.
Si alguna vez has enviado una corrección de copy a una página de marketing y has perdido una hora averiguando por qué también cambió un nombre de clase en la sección hero, esta es la herramienta que lo saca a la luz en segundos. Para prosa simple, nuestro diff de texto es la opción correcta. El primo estricto de HTML, XML, tiene un diff XML dedicado. Y como Markdown a menudo compila a HTML en builds de sitios estáticos, el diff de Markdown es un vecino útil.
Esto es un diff a nivel de texto con resaltado de sintaxis consciente de HTML, no un diff de DOM. La comparación corre a nivel de carácter, y luego una pasada de post-procesamiento semántico desplaza los resaltados para que aterricen sobre nombres de etiqueta, valores de atributo y texto visible en lugar de puntuación arbitraria. Las inserciones aparecen en verde en el panel derecho, las eliminaciones en rojo a la izquierda.
HTML tiene más rarezas de parseo de las que la gente recuerda, y la mayoría solo importan cuando comparas dos archivos como texto. Según el algoritmo de parseo, el orden de los atributos no es significativo, las comillas de los atributos pueden ser simples, dobles o ausentes para algunos valores, y los nombres de etiqueta y atributo no distinguen mayúsculas. Un diff de texto sigue señalando cada reordenamiento y cambio de mayúsculas. La solución práctica es formatear ambos lados con la misma herramienta (Prettier con parser: "html" funciona bien) para que los paneles queden normalizados antes de leer el diff.
Esta herramienta no parsea el documento en un árbol DOM y compara nodos. Eso significa que dos archivos que se renderizan de forma idéntica en el navegador, por ejemplo uno con <img src="a.png"> y otro con <img src='a.png' />, aparecerán igualmente como diferentes aquí. Si necesitas una comparación verdaderamente estructural, parsea ambos lados con DOMParser y recorre los árboles tú mismo, o pasa ambos por Tidy primero. Para el 95% de los casos de revisión de código (una corrección de copy, un cambio de atributo, añadir un aria-label), el diff de texto es más rápido y más claro.
Dos paneles de texto, un diff. Sin registro, sin subida, sin viaje al servidor.
Pega el HTML antiguo a la izquierda, el nuevo a la derecha. O pulsa Subir en cualquiera de los lados para cargar directamente un archivo .html, .htm o .eml. El botón Ejemplo rellena ambos paneles con un pequeño fragmento de landing page si quieres ver primero la herramienta en acción.
Pulsa Format en cada panel para imprimir con sangría consistente. Esto normaliza espacios y saltos de línea para que el diff se centre en cambios de contenido reales, no en ruido de formato de un archivo Windows con CRLF frente a uno Unix con LF. El indicador de validación se pone verde cuando el documento parsea limpiamente.
Las eliminaciones aparecen con resaltado rojo a la izquierda, las inserciones con resaltado verde a la derecha. Los contadores de cambios en cada cabecera te dicen cuántas ediciones distintas encontró el diff entre nombres de etiqueta, valores de atributo y texto visible. Haz scroll en cualquiera de los paneles y el otro le sigue en sincronía.
Sale un cambio de plantilla del CMS y un consumidor downstream reporta marcado roto en el hero. Curl al HTML renderizado antes y después del deploy, pega ambos en el diff y el <div> wrapper culpable o el cambio de clase se hace evidente. Útil para upgrades de temas WordPress, ediciones de layout en Hugo y Jekyll, y cualquier salida renderizada en servidor donde la plantilla original no es directamente legible.
El HTML de email no perdona. Outlook todavía usa el motor de renderizado de Word, así que un anidamiento de <table> intercambiado o un atributo style inline renombrado puede romper el layout. Diff de la variante A contra la variante B antes de lanzar la campaña, luego pásalas por Litmus o Email on Acid. Cazar un cellpadding="0" que falta en el diff sale más barato que cazarlo en mil bandejas de entrada.
Una PR añade atributos aria-label, role y aria-describedby en la mitad de los componentes. El diff de texto hace trivial confirmar que cada elemento interactivo ganó el atributo correcto, que ningún role="presentation" se aplicó a un botón real, y que ningún elemento focuseable perdió su nombre accesible. Combínalo con axe DevTools o Lighthouse para la auditoría real.
Una copywriter devuelve la home con titulares revisados y un nuevo CTA. Pega el HTML en producción contra el HTML propuesto y el diff te dice exactamente qué <h1>, <p> y texto de botón cambió, además de cualquier edición de class o href que se coló. Más rápido que un Word con control de cambios y sobrevive intacto al viaje de vuelta al codebase.
Tras un bump de versión de DOMPurify o sanitize-html, haz tests de regresión del sanitizador con payloads conocidos como malos y haz diff de la salida contra una baseline buena previa. Un sanitizador que de pronto preserva <svg onload="..."> o URLs javascript: en atributos href es exactamente el tipo de regresión que quieres cazar en CI antes de que llegue a producción. El diff hace que cambios de un único carácter (un escape que falta) salten a la vista.
Una breve chuleta de los detalles de parseo que esta herramienta saca a la luz con más frecuencia. Todo está fundamentado en el WHATWG HTML Living Standard.
| Topic | What this tool does |
|---|---|
| Elementos void | <img>, <br>, <input>, <meta>, <link>, <hr> y compañía no tienen etiqueta de cierre. La barra final estilo XHTML <br /> está permitida en HTML5 pero se renderiza como un no-op; el parser la ignora. |
| Orden de atributos | No es significativo según la spec HTML. <a href="/x" class="btn"> y <a class="btn" href="/x"> son idénticos para un parser. Un diff de texto señala el cambio; formatea ambos lados para mantener el orden estable. |
| Comillas de atributos | Comillas dobles, comillas simples o sin comillas para valores sin espacios o caracteres especiales. id=hero, id='hero' e id="hero" son equivalentes. La mayoría de las guías de estilo requieren comillas dobles por consistencia. |
| Atributos booleanos | Lo que importa es la presencia. <input disabled>, <input disabled=""> e <input disabled="disabled"> deshabilitan todos el input. La spec recomienda la forma desnuda; XHTML requería la forma verbosa. |
| Sensibilidad a mayúsculas | Los nombres de etiqueta y atributo no distinguen mayúsculas en HTML (<DIV> es igual a <div>). Los valores de atributo sí distinguen mayúsculas (id="Hero" difiere de id="hero"). La convención desde HTML5 es etiquetas y atributos en minúsculas. |
| Entidades de carácter | Cinco predefinidas: & < > " '. Más entidades nombradas como y referencias numéricas como é para letras acentuadas. Las secciones CDATA solo son válidas en contenido foráneo (SVG, MathML), no en HTML normal. |
| DOCTYPE | HTML5 usa la forma corta <!DOCTYPE html>. Los doctypes XHTML 1.0 más antiguos siguen parseándose pero disparan el modo no-quirks de la misma forma. Un DOCTYPE ausente o malformado lleva la página a modo quirks, que cambia el comportamiento del modelo de caja. |
| Espacios en blanco | Las secuencias de espacios, tabs y saltos de línea se colapsan en un único espacio al renderizar, excepto dentro de <pre>, <textarea> y elementos con CSS white-space: pre. El texto fuente se conserva, así que un diff de texto ve cada byte. |
Por debajo es el mismo algoritmo a nivel de carácter, pero el editor usa el resaltado de modo HTML para que etiquetas, atributos y entidades se muestren con la coloración de sintaxis familiar mientras lees el diff. El botón Format usa un pretty-printer consciente de HTML, no un reformateo de texto genérico, lo que mantiene intacto el anidamiento de elementos. Para prosa sin marcado, nuestro diff de texto basta; para cualquier archivo donde importan los límites de las etiquetas, esta vista es más fácil de escanear.
No para un navegador. El HTML Living Standard dice que el orden de los atributos en una etiqueta de apertura no es significativo, así que <a href="/x" class="btn"> y <a class="btn" href="/x"> se renderizan idéntico. Un diff de texto seguirá señalando el cambio porque ve los caracteres crudos. La solución es formatear ambos lados con la misma herramienta (Prettier y html-validate ordenan razonablemente) para que el orden de atributos sea estable antes de comparar.
HTML colapsa la mayoría de las secuencias de espacios en un único espacio al renderizar, así que dos archivos que parecen idénticos en un navegador pueden tener un texto fuente muy diferente. Dentro de <pre> y <textarea>, los espacios se conservan. El diff es a nivel de texto, así que cada espacio, tab y salto de línea cuenta. Formatea ambos lados primero para normalizar la sangría; solo quedarán resaltados los cambios significativos.
Esta herramienta hace un diff de texto, no un diff de DOM, así que la forma más fiable de ignorar el ruido de formato es formatear ambos lados con el mismo pretty-printer (Prettier, HTML Tidy o htmlhint --format) antes de pegar. Eso normaliza sangría, comillas de atributos y espacios al final. Para una comparación a nivel de árbol real, parsea cada lado con DOMParser y recorre los nodos; para revisión de código y trabajo de copy-edit, el flujo formatear-luego-diff es más rápido y caza los mismos bugs.
El contenido de <script> y <style> se diffea como texto plano, carácter por carácter. Eso significa que un cambio de una línea en CSS dentro de un bloque <style> o una función renombrada dentro de un <script> inline aparecerá exactamente donde lo esperas. Para bloques de script más grandes, considera extraerlos a archivos .js y diffearlos por separado. El modo HTML del editor sigue resaltando los límites de script y style para que el marcado alrededor siga siendo legible.
Los archivos se leen como UTF-8, que es el predeterminado para HTML5 y lo que declara la etiqueta <meta charset="UTF-8">. Las entidades nombradas como &, <, > y se diffean como su texto fuente literal, no su forma decodificada, así que un cambio de a un carácter de espacio real aparecerá como un cambio. Si dos archivos se renderizan idéntico en el navegador pero el diff se enciende al inicio, sospecha de un byte order mark UTF-8 en uno de ellos.
Tu HTML nunca sale de tu navegador. El formateador, el validador y el diff se ejecutan en tu máquina, en local. Sin analítica de tu input, sin logs, sin viaje al cloud "para ayudar". El resaltado de sintaxis sigue el WHATWG HTML Living Standard, y la recomendación más antigua W3C HTML 5.2 es una referencia cruzada útil. La documentación de referencia a nivel de elemento está en MDN, y los patrones de accesibilidad vienen de la ARIA Authoring Practices Guide. Lectura de fondo sobre el formato en sí en Wikipedia.