Resumen
El Visor HTML sirve para revisar contenido después de la sanitización y comparar lo que se renderiza con el código limpio. Resulta útil cuando necesitas confirmar qué se conservó, qué se eliminó y si el marcado restante sigue siendo coherente a nivel visual y estructural. La herramienta funciona en el navegador y está pensada para inspeccionar marcado pegado directamente. Puedes verificar enlaces, etiquetas de medios, atributos en línea y mensajes de validación antes de llevar el contenido a una página, un campo de CMS, una plantilla o un archivo exportado.
Casos de uso
- Revisión de fragmentos de CMSComprueba un bloque copiado desde un campo de contenido antes de insertarlo en una plantilla o diseño.
- Inspección de HTML importadoVerifica qué elementos sobreviven después de sanitizar marcado procedente de otro sistema o exportación.
- Validación de salida de editorConfirma destinos de enlaces, imágenes y formato generados por un editor antes de guardar.
- Auditoría de envíos de usuariosAnaliza marcado de comentarios, perfiles o publicaciones y revisa qué partes inseguras fueron retiradas.
Como funciona
- 1
Pega el HTML en el área de entrada.
- 2
La herramienta sanitiza el marcado de forma local.
- 3
Revisa la vista previa y el código limpio.
- 4
Inspecciona enlaces, imágenes, atributos y notas de validación.
- 5
Copia el HTML limpio si cumple lo que necesitas.
Ejemplos
Eliminar un script en línea
Entrada: <p>Lee más <script>alert('x')</script><a href='https://example.com/post'>aquí</a></p>
Salida: <p>Lee más <a href="https://example.com/post">aquí</a></p>
Se elimina el elemento script y se mantiene el párrafo y el enlace seguros.
Quitar un atributo peligroso
Entrada: <img src='avatar.png' onerror='alert(1)' alt='Avatar'><span>Perfil</span>
Salida: <img src="avatar.png" alt="Avatar"><span>Perfil</span>
Se eliminan los manejadores de eventos inseguros de la etiqueta de imagen.
Corregir marcado mal anidado
Entrada: <div><strong>Título<p>Cuerpo</strong></p></div>
Salida: <div><strong>Título</strong><p>Cuerpo</p></div>
La vista muestra una estructura limpia para detectar mejor el anidado incorrecto.
FAQ
¿Qué cambia en mi HTML al visualizarlo?
La herramienta elimina partes inseguras o no permitidas durante la sanitización y muestra el marcado limpio resultante, así que la vista puede no coincidir con el original.
¿Por qué desaparecen algunos atributos?
Se quitan atributos que pueden ejecutar scripts, introducir comportamiento o romper la salida permitida. Esto incluye manejadores de eventos y otros valores inseguros.
¿Puedo confiar en la vista previa como resultado final?
Úsala como paso de verificación, no como sustituto de la validación de tu aplicación. Distintos entornos pueden permitir elementos o atributos diferentes.
¿Por qué el HTML roto se ve distinto al pegarlo?
El navegador y el sanitizador normalizan el marcado inválido. Eso puede cambiar el orden de las etiquetas, cerrarlas automáticamente o reubicar texto.