¿Qué es el Formateador HTML?

El Formateador HTML es una herramienta en el navegador que embellece o minifica marcado HTML con Prettier, formatea CSS y JavaScript en línea y previsualiza el resultado en un iframe aislado.

¿Cómo embellezco HTML minificado?

Pega tu HTML minificado en el cuadro de entrada y elige Embellecer. El Formateador HTML vuelve a aplicar sangría al marcado y reformatea cualquier bloque y en línea para mejorar la legibilidad.

¿El Formateador HTML formatea CSS y JavaScript en línea?

Sí. Prettier formatea los bloques y automáticamente como parte del embellecido de la página.

¿Puedo minificar HTML además de embellecerlo?

Sí. Cambia al modo Minificar para quitar espacios y producir el marcado equivalente más pequeño para producción.

¿Puedo elegir tabulaciones en lugar de espacios?

Sí. Activa la opción Tabs en el Formateador HTML para aplicar sangría con tabulaciones, o déjala desactivada para usar espacios.

¿Mi HTML se sube a algún lugar cuando lo formateo?

No. Todo el formateo y el renderizado de la vista previa ocurren localmente en tu navegador, así tu marcado nunca sale de tu dispositivo.

Formateador de HTML

Embellece o minifica HTML, formatea CSS/JS en línea y previsualiza el resultado.

Tu HTML se embellece, minifica y previsualiza por completo en tu navegador: nada se sube a un servidor.

¿También limpias hojas de estilo? Prueba el Formateador CSS.

Acerca de Formateador de HTML

Este formateador html embellece o minifica marcado en bruto y formatea automáticamente cualquier CSS y JavaScript en línea usando Prettier. Pega salida desordenada de plantillas, páginas extraídas o marcado escrito a mano y obtén HTML limpio y con sangría consistente en un solo paso, o cambia al modo de minificar para quitar espacios y reducir el documento para producción. Una vista previa aislada te deja renderizar el marcado de forma segura con el scripting desactivado, así los scripts incrustados nunca se ejecutan. Como embellecedor html, está pensado para desarrolladores front-end, ingenieros de QA y cualquiera que necesite formatear html online sin cambiar de contexto. Todo se ejecuta localmente en tu navegador, así tus datos nunca salen de tu dispositivo y no hay rastreo. Elige tabulaciones o espacios para la sangría según el estilo de tu proyecto.

Características

Embellece HTML con una sangría legible y consistente
Minifica HTML para quitar espacios y reducir la salida
Formatea bloques <style> y <script> en línea con Prettier
La vista previa aislada renderiza el marcado con el scripting desactivado
Alterna entre tabulaciones y espacios para la sangría
Maneja páginas completas o fragmentos parciales de marcado
Copia la salida formateada o minificada con un clic
Se ejecuta por completo en tu navegador y sin rastreo

Cómo usar Formateador de HTML

Pega tu HTML en el cuadro de entrada.
Elige Embellecer para formatear, Minificar para comprimir o Vista previa para renderizarlo.
Activa o desactiva Tabs para fijar tu estilo de sangría.
Copia el HTML formateado o minificado desde el panel de salida.

Ejemplo

Entrada

<div   class="card"><h1>Hi</h1><p>Hello   world</p></div>

Salida

<div class="card">
  <h1>Hi</h1>
  <p>Hello world</p>
</div>

El modo embellecer vuelve a aplicar sangría al marcado y normaliza los espacios.

Errores comunes y solución de problemas

Los scripts incrustados no se ejecutan en la vista previa. — Esto es intencional: la vista previa es un iframe aislado con el scripting desactivado para que las páginas se rendericen de forma segura. Prueba el código interactivo en tu propio entorno.
El CSS o JS en línea no se reformatea. — Asegúrate de que el código esté dentro de etiquetas <style> o <script> correctas; Prettier solo formatea los bloques en línea reconocidos durante el embellecido.
Las etiquetas mal formadas o sin cerrar producen una sangría inesperada. — Cierra las etiquetas desemparejadas en tu fuente: el formateador reorganiza una estructura válida pero no puede adivinar el anidamiento previsto.
La salida minificada es difícil de leer. — Vuelve al modo Embellecer; minificar está pensado para el tamaño de producción, no para la legibilidad.

Preguntas frecuentes

¿Qué es el Formateador HTML?: El Formateador HTML es una herramienta en el navegador que embellece o minifica marcado HTML con Prettier, formatea CSS y JavaScript en línea y previsualiza el resultado en un iframe aislado.
¿Cómo embellezco HTML minificado?: Pega tu HTML minificado en el cuadro de entrada y elige Embellecer. El Formateador HTML vuelve a aplicar sangría al marcado y reformatea cualquier bloque <style> y <script> en línea para mejorar la legibilidad.
¿El Formateador HTML formatea CSS y JavaScript en línea?: Sí. Prettier formatea los bloques <style> y <script> automáticamente como parte del embellecido de la página.
¿Puedo minificar HTML además de embellecerlo?: Sí. Cambia al modo Minificar para quitar espacios y producir el marcado equivalente más pequeño para producción.
¿Puedo elegir tabulaciones en lugar de espacios?: Sí. Activa la opción Tabs en el Formateador HTML para aplicar sangría con tabulaciones, o déjala desactivada para usar espacios.
¿Mi HTML se sube a algún lugar cuando lo formateo?: No. Todo el formateo y el renderizado de la vista previa ocurren localmente en tu navegador, así tu marcado nunca sale de tu dispositivo.

Herramientas relacionadas

Formateador de CSS / SCSS — Embellece o minifica CSS/SCSS/LESS, ordena propiedades y quita duplicados.
Formateador de JS / TS — Embellece o minifica JavaScript, TypeScript y JSX/TSX con opciones de Prettier.
Formateador de XML — Embellece, minifica y valida XML, y convierte XML ↔ JSON.
Escapar / Desescapar HTML — Escapa y desescapa caracteres especiales y entidades HTML.
Vista previa de Markdown — Renderiza Markdown a HTML con vista previa en vivo.
Optimizador de SVG — Minifica SVG: elimina comentarios, metadatos y restos del editor, y colapsa espacios.
Formateador de JSON — Embellece, minimiza y valida JSON con la ubicación de los errores.
Formateador de SQL — Formatea SQL para MySQL, PostgreSQL, SQL Server, SQLite, BigQuery y Oracle.