Visor HTML online con vista previa en vivo
Pega código HTML o abre un archivo .html y ve la página mientras escribes. Añade CSS y JavaScript en sus pestañas, comprueba el diseño en ancho de móvil, tablet y portátil, lee los mensajes y errores de la consola y obtén una lista de fallos como etiquetas sin cerrar, id repetidos o imágenes sin texto alternativo. Ordena el código, minifícalo, descárgalo o compártelo con un enlace. La vista previa se ejecuta aislada del resto de la web.
Gratis · Sin registro
Cómo usarla
- Pega el HTML en el cuadro, abre un archivo .html o carga un ejemplo.
- Si tienes CSS o JavaScript, añádelos en sus pestañas.
- Mira la vista previa, cambia a ancho de móvil o tableta y revisa la consola.
- Corrige lo que aparezca en la revisión y descarga, copia o comparte el resultado.
Por qué usar esta herramienta
Vista previa en vivo
La página cambia mientras escribes, con HTML, CSS y JavaScript en pestañas separadas.
Ancho de móvil y tableta
Mira la página a 375, 768 o 1280 píxeles para probar el diseño adaptable.
Consola
Los console.log, avisos y errores de JavaScript aparecen bajo la vista previa.
Revisión del código
Detecta etiquetas sin cerrar, id repetidos, imágenes sin alt, falta de title y más, con número de línea.
Ordenar y minificar
Sangría limpia para leer el código, o sin espacios ni comentarios para que pese menos.
Entorno aislado
El código se ejecuta en un marco sin acceso a esta web y no se sube a ningún servidor.
Cómo ver el código HTML de una página
Cualquier navegador abre un archivo .html, pero solo muestra el resultado. Aquí ves el código y la página a la vez, puedes cambiar algo y ver el efecto al instante, y detectar fallos que el navegador oculta. Abre el archivo con Abrir archivo o pega el código fuente que copias con Ctrl+U.
Probar una firma de correo en HTML
Las firmas para Gmail u Outlook y las plantillas de boletines se hacen con tablas y estilos en línea. Pega el código para ver cómo queda, compruébalo en ancho de móvil y usa la revisión para encontrar imágenes sin texto alternativo, que es lo que se ve cuando el correo bloquea las imágenes. Al minificar se conservan los comentarios condicionales de Outlook.
La vista previa usa un motor de navegador moderno, así que Outlook de escritorio puede mostrar alguna diferencia.
Para aprender HTML en clase
En asignaturas como Tecnología o TIC de la ESO y el Bachillerato, la vista en vivo enseña qué hace cada etiqueta y cada regla CSS. Carga el ejemplo de página sencilla, cambia un color o un título y mira el resultado. La revisión explica con palabras sencillas los errores típicos de quien empieza.
Qué revisa el comprobador
- Etiquetas sin cerrar o cerradas en el orden equivocado.
- Valores de id repetidos y atributos duplicados.
- Imágenes sin alt y enlaces a otra pestaña sin noopener.
- Falta de doctype, lang, charset, viewport y title en páginas completas.
- Saltos en los niveles de título y más de un h1.
- Etiquetas obsoletas como center, font o marquee.
Preguntas frecuentes
¿Es seguro pegar HTML copiado de otro sitio?
Sí. La vista previa funciona en un marco aislado que no puede leer las cookies ni los datos de esta web. También puedes desactivar Ejecutar JavaScript.
¿Se sube mi código a algún servidor?
No. Todo ocurre en tu navegador. El enlace para compartir lleva el código dentro del propio enlace, sin guardarlo en un servidor.
¿Por qué no salen las imágenes de mi ordenador?
Las rutas relativas como img/logo.png apuntan a archivos de tu equipo que la vista previa no puede leer. Usa direcciones completas https:// o pega el CSS en su pestaña.
¿Puedo ver cómo queda en el móvil?
Sí. Elige Móvil para verla a 375 píxeles, o Tableta y Portátil. Añade la meta viewport para que la página se adapte.
¿Abre archivos .htm o .xhtml?
Sí. Los archivos HTML, HTM, XHTML y SVG se abren en la pestaña HTML; los .css y .js en la suya.
¿Funciona con PHP o con React?
Muestra HTML, CSS y JavaScript normales. PHP necesita un servidor y el código de React debe compilarse antes o cargarse desde una CDN.
Cómo ver y revisar código HTML
Herramientas relacionadas
¿Necesitas crear algo?
Cuéntanos qué quieres construir.
Cuéntanos qué necesitas crear, desde una web sencilla hasta una app completa, una solución de IA, una automatización o un sistema a medida.