Editor HTML
Escribe HTML y consulta una vista previa adaptable en tu navegador.
¿Qué es un editor HTML en línea?
Un editor HTML en línea es una vista dividida: el código fuente a un lado y la página renderizada al otro. Escribes el marcado, el navegador lo vuelve a analizar y la vista previa se actualiza, sin guardar, subir ni compilar nada por medio.
Es la forma más rápida de comprobar un fragmento antes de llevarlo a un proyecto real: si una tabla anida bien, si a un formulario le falta una etiqueta o si un diseño aguanta una ventana de 390 px.
Cómo escribir y previsualizar HTML
- Escribe o pega tu marcado en el panel de código HTML.
- Deja Ejecución automática activada para refrescar la vista previa mientras escribes, o desactívala y pulsa Ejecutar cuando quieras un render limpio.
- Cambia entre los anchos de escritorio, tableta y móvil para ver cómo se reacomoda el diseño.
- Lee el panel de comprobación HTML: lista los errores de análisis con su línea y cada elemento que nunca recibió etiqueta de cierre.
- Usa Formatear para volver a sangrar con js-beautify y luego Copiar o Descargar .html para llevarte el archivo.
Ejemplos de edición HTML
Elemento sin cerrar
<div> <p>Hello </div>
Comprobación HTML: <p> nunca se cierra (línea 2)
Falta el doctype
<html><body>Hi</body></html>
Comprobación HTML: falta la declaración <!DOCTYPE html>
Atributo duplicado
<img src="a.png" src="b.png" alt="x">
Comprobación HTML: el mismo atributo aparece dos veces en un elemento
Editor HTML del navegador frente a un entorno local
| Criterio | Este editor | Servidor de desarrollo local |
|---|---|---|
| Instalación | Abres la página y escribes | Instalar Node, un empaquetador y un editor |
| Ciclo de respuesta | La vista previa se refresca en unos 400 ms | Depende del servidor y del hot reload |
| Validación | Errores de análisis HTML5 y etiquetas sin cerrar | Lo que tenga configurado el linter del proyecto |
| Privacidad | El código se queda en la pestaña | El código se queda en tu máquina |
| Mejor para | Fragmentos, docencia, comprobaciones rápidas | Proyectos completos con recursos y rutas |
Preguntas frecuentes del editor HTML
¿Se sube a algún sitio el HTML que pego?
No. El análisis, el formato y el render ocurren en la pestaña del navegador. El iframe de vista previa se construye a partir de una cadena, no de una petición al servidor.
¿Se ejecuta el JavaScript de la vista previa?
Sí, los scripts se ejecutan dentro del marco de vista previa. El marco está en sandbox con allow-scripts pero sin allow-same-origin, así que el código no puede leer esta página ni su almacenamiento.
¿Por qué el comprobador no marca mi etiqueta <p> sin cerrar?
El analizador HTML5 cierra automáticamente párrafos, elementos de lista y celdas de tabla, así que eso no es un error. El panel de comprobación lista los elementos que nunca recibieron una etiqueta de cierre explícita en tu código.
¿Puedo poner CSS y JavaScript en el mismo editor?
Sí. Los bloques <style> y <script> en línea funcionan en la vista previa. Si quieres un panel de CSS con su propio editor, usa el laboratorio de CSS.
¿Qué cambia el botón Formatear?
Solo el espacio y la sangría, con js-beautify y sangría de dos espacios. Los atributos, su orden y el contenido quedan intactos.
¿Puedo descargar lo que escribí?
Sí. Descargar .html guarda el código actual como index.html para abrirlo en local o meterlo en un proyecto.