Pega HTML y vélo renderizado en tiempo real, en cualquier ancho de pantalla; luego organízalo, redúcelo o comprueba si tiene problemas.
Ancho
HTML
Vista previa
Presiona Inspeccionar para ver el recuento de elementos, la estructura de encabezados y una lista de problemas en el marcado.
Problemas
Estructura de encabezados
Etiquetas más usadas
La salida de la consola de la vista previa aparece aquí cuando se permite ejecutar scripts.
Acerca de Visor HTML
Una plantilla de correo, un fragmento de un ticket, un informe exportado: a veces solo necesitas ver cómo se ve un trozo de HTML. Pégalo y se renderiza mientras escribes, dentro de un marco aislado, con el ancho de pantalla que elijas. Junto a la vista previa puedes ordenarlo, reducirlo, ejecutar sus scripts con una consola y ver una lista de lo que realmente está mal en el marcado.
Qué hace
Vista previa en tiempo real mientras escribes; por encima de 200.000 caracteres se pausa hasta que pulses Actualizar.
Tamaños de vista previa de móvil, tableta, escritorio y ancho completo, además de pantalla completa.
Los scripts están desactivados por defecto; actívalos y verás la salida de la consola y los errores.
Embellece marcado desordenado o minifícalo, sin tocar el contenido de pre, script o style.
Un informe de inspección: recuento de elementos, el esquema de encabezados y problemas concretos.
Abre un archivo .html local, copia el resultado o descárgalo.
Cómo funciona
1Pega HTML, abre un archivo .html o carga el ejemplo.
2Elige un ancho de vista previa y decide si los scripts pueden ejecutarse.
3Embellece, minifica o inspecciona, y luego copia o descarga el resultado.
Por qué la vista previa está aislada
El HTML pegado puede contener scripts, formularios y enlaces que no escribiste. La vista previa se ejecuta en un iframe sandbox con su propio origen opaco, así que nada de lo que contiene puede leer las cookies de este sitio ni tu sesión, enviar datos en tu nombre ni hacer que esta página navegue a otro lugar. Los scripts siguen desactivados hasta que los actives.
Qué revisa la inspección
Lee el marcado con un analizador HTML estándar e informa solo de lo que vio: etiquetas abiertas y nunca cerradas, etiquetas de cierre sin etiqueta de apertura, imágenes sin texto alternativo, ids duplicados, enlaces que abren una pestaña nueva sin rel="noopener", niveles de encabezado que se saltan, recursos cargados por http:// y, en una página completa, la falta de doctype, title, lang o etiqueta viewport.
Lo que la inspección deja pasar a propósito
Informa de errores, no de estilo. Las etiquetas de cierre que el estándar HTML permite omitir, como </p>, </li>, </td>, </tr> y </option>, nunca aparecen como sin cerrar, y los elementos vacíos como <br>, <img> e <input> no necesitan cierre. Un alt="" vacío cuenta como texto alternativo, lo correcto para una imagen decorativa. Un enlace con target="_blank" pasa con rel="noopener" o rel="noreferrer". Un enlace http:// normal en <a href> no cuenta como inseguro; solo los recursos que se cargan, como imágenes, scripts, hojas de estilo e iframes. Volver a subir de nivel de encabezado (de h4 a h2) está bien; solo se informa de un salto hacia abajo que se salta un nivel (de h2 a h4). Las comprobaciones de doctype, title, lang y viewport solo se hacen cuando lo pegado es una página completa, es decir, tiene doctype o una etiqueta html, head o body, así que un bloque de correo o un fragmento de CMS no se penaliza por ellas.
Revisar un correo HTML antes de enviarlo
Míralo primero con el ancho Teléfono (375 px), porque mucha gente abre el correo en el móvil, y luego en Tableta (768 px) y Escritorio (1280 px). Deja los scripts desactivados: las aplicaciones de correo no ejecutan JavaScript, así que la vista sin scripts se parece más a lo que verá el lector. Usa URL de imagen absolutas con https://, porque ni la vista previa ni la aplicación de correo del destinatario pueden ver archivos de tu ordenador. Minificar elimina los comentarios normales pero conserva los comentarios condicionales que empiezan por <!--[if, como <!--[if mso]> ... <![endif]-->. No conserva el cierre <!--<![endif]--> del patrón <!--[if !mso]><!-->, así que no minifiques una plantilla que lo use o Outlook puede ocultar todo lo que venga después. La vista previa es la de un navegador; el Outlook clásico para Windows dibuja el correo con el motor de Word, así que envíate una prueba allí antes de un envío grande.
Preguntas
¿Se sube o se guarda mi HTML?
La vista previa, el embellecido y la minificación ocurren en tu navegador. Solo el informe de inspección envía el marcado al servidor, donde se analiza y se responde en la misma respuesta: nada se escribe en disco ni se registra, y los registros de uso guardan solo recuentos.
¿Por qué no se ejecutan mis scripts?
Los scripts están desactivados por defecto porque el código pegado no es de confianza. Marca "Ejecutar scripts" y la vista previa se recarga con JavaScript activado, todavía dentro del sandbox, y la salida de la consola aparece debajo de la vista previa.
¿Por qué no cargan las imágenes o hojas de estilo relativas?
La vista previa se construye a partir del texto pegado, no desde tu ordenador ni tu servidor, así que una ruta relativa como images/logo.png se busca en este sitio y no se encuentra. Usa URL absolutas o añade una etiqueta <base href="..."> que apunte a donde están realmente los archivos.
¿Embellecer cambia el aspecto de la página?
Solo vuelve a sangrar entre etiquetas y deja intacto el contenido de pre, textarea, script y style. El espacio entre elementos en línea puede desplazarse ligeramente en ocasiones, así que revisa la vista previa después de formatear.
¿Qué tamaño de documento admite?
El informe de inspección acepta hasta 1.000.000 de caracteres y enumera como máximo 200 problemas. La vista previa en tiempo real se pausa por encima de 200.000 caracteres para que escribir siga siendo fluido; pulsa Actualizar o Ctrl+Enter para refrescarla.
¿Puedo previsualizar una plantilla de correo HTML?
Sí. Pega el HTML del correo o abre el archivo .html, cambia el ancho a Teléfono (375 px) y Escritorio (1280 px) para ver ambos diseños y pulsa Inspeccionar para encontrar imágenes sin texto alternativo y recursos cargados por http:// sin cifrar. La vista previa usa el motor de tu navegador, mientras que cada cliente de correo usa el suyo y muchos descartan parte del CSS, así que muestra aproximadamente lo que vería un webmail en el navegador, no exactamente lo que verá cada bandeja de entrada. Los clientes de correo no ejecutan JavaScript, así que deja Ejecutar scripts desactivado. Antes del envío real, mándate una prueba a los clientes que usan tus lectores.
¿Es seguro abrir un archivo HTML que me enviaron?
Más seguro que abrirlo directamente. Abrir archivo lo carga en el editor dentro de tu navegador, y no se envía nada al servidor salvo que pulses Inspeccionar. La vista previa es un marco aislado con los scripts y el envío de formularios desactivados, así que la página no puede ejecutar código, enviar un formulario ni acceder a las cookies de este sitio. Las imágenes y hojas de estilo con una dirección http(s) completa sí se cargan, así que el remitente puede saber que se abrió. Lee primero el código, deja Ejecutar scripts desactivado y nunca escribas una contraseña en una página que te enviaron.
¿Por qué las letras con tilde se convierten en � al abrir un archivo?
Abrir archivo siempre lee el archivo como UTF-8 e ignora la etiqueta <meta charset> que contenga. Una página guardada en Windows-1252 o ISO-8859-1, habitual en editores y exportaciones antiguas de Windows, guarda letras como é, ñ o ü con bytes que no son UTF-8 válido, así que cada una aparece como el carácter de reemplazo �. Abre el archivo en tu editor, guárdalo de nuevo como UTF-8 (Bloc de notas: Guardar como, Codificación UTF-8; VS Code: haz clic en la codificación de la barra de estado y luego en Guardar con codificación) y vuelve a abrirlo aquí. O abre el archivo en tu navegador, mira su código fuente y pégalo aquí: el navegador ya lo decodificó con el charset de la propia página.
¿Por qué un formulario o un enlace que abre una pestaña nueva no hace nada en la vista previa?
El entorno aislado nunca permite enviar formularios ni abrir ventanas emergentes, ni siquiera con Ejecutar scripts activado, así que pulsar Enviar no envía nada y se bloquean los enlaces con target="_blank" y las llamadas a window.open(). Así una página pegada no puede mandar datos ni abrir otros sitios. Los enlaces normales se abren dentro del marco de la vista previa, y los sitios que no permiten mostrarse en un marco aparecen vacíos o rechazados. Para revisar un formulario, lee su action, su method y sus campos en el código; Inspeccionar también lista cada enlace target="_blank" sin rel="noopener". Prueba el envío real en tu propio servidor de desarrollo.