Editor HTML y CSS

Cómo usar el editor HTML

Usa este editor para pequeños diseños estáticos, tablas o pruebas de CSS. El texto tenue de los campos HTML y CSS es un ejemplo; la primera vista previa muestra su resultado. Al enfocar un campo de ejemplo, queda vacío para escribir. Si lo dejas vacío, reaparece el ejemplo tenue sin recuperar un resultado anterior ni activar la exportación.

Introduce tu propio marcado y estilos. Puedes pegar un fragmento o un documento HTML completo. El editor reconstruye un documento estático con elementos admitidos y no conserva los metadatos. Después de empezar a editar, solo se usa tu entrada real: el ejemplo tenue de otro campo vacío no se mezcla con tu trabajo. Tu texto se conserva al cambiar de campo.

Qué muestra la vista previa

La vista es una página aislada. Muestra el HTML compatible y tu CSS sin aplicar estilos al propio editor. Puedes revisar texto, títulos, listas, tablas, controles de formulario y diseños CSS. Si el contenido es más grande que el área disponible, puedes desplazarte dentro de ella. Su anchura sigue al panel: no simula un dispositivo de tamaño fijo.

Se excluyen o bloquean JavaScript, eventos, páginas incrustadas, SVG, reproductores y recursos externos. Los enlaces no navegan y los formularios no se envían. No se cargan imágenes, fuentes, hojas de estilo ni importaciones CSS remotas. Se admiten imágenes PNG, JPEG, GIF y WebP incrustadas en base64. Un aviso indica los elementos o atributos eliminados; la política del documento bloquea las referencias externas dentro del CSS. El texto original permanece en los editores para revisarlo.

Dos ejemplos pequeños

Introduce el HTML y CSS siguientes: aparecerá «Hello» como título verde oscuro. Cambia el texto entre las etiquetas para modificar las palabras, o el color en CSS para cambiar su aspecto.

Para una lista, usa <ul><li>Plan</li><li>Review</li></ul> y li { margin-bottom: 8px; }. Verás dos viñetas con separación después de cada elemento. Así puedes comprobar un bloque pequeño antes de llevarlo a tu proyecto.

HTML: <h1>Hello</h1>
CSS:  h1 { color: #166534; }

Copiar y descargar

Copiar HTML y Bajar HTML utilizan el mismo documento estático actual de la vista. El archivo page.html reúne el marcado compatible y el CSS en UTF-8 e incluye una política restrictiva de contenido. Ábrelo en un navegador o editor de texto. Es un borrador estático autónomo, no una web alojada ni una aplicación con scripts funcionales.

Vaciar elimina tu HTML, CSS y resultado, con confirmación si has introducido código. Los campos vacíos vuelven a mostrar ejemplos tenues, que no son contenido guardado. La escritura usa la edición normal del navegador. La página avisa antes de salir tras cambios, pero no guarda borradores automáticamente. Descarga el HTML estático para conservar el resultado admitido.

Límites y soluciones

El límite conjunto es de 100.000 caracteres, 3.000 nodos HTML y 64 niveles anidados. Si lo superas, se conserva la entrada y se desactivan vista y exportación hasta reducirla. Una entrada vacía no produce un archivo.

El navegador suele reparar etiquetas sin cerrar e ignorar declaraciones CSS inválidas. Esta herramienta no valida estándares: ver un resultado no demuestra que el código sea válido, accesible o apto para producción. Revisa selectores, sintaxis y dependencias remotas bloqueadas. Para un diagnóstico completo, usa las herramientas de desarrollo de tu propio proyecto.

Preguntas frecuentes