Formateador HTML
Embellece HTML con Prettier: sangría coherente, un elemento por línea y también formato para el CSS y JavaScript incrustados. Elige 2 o 4 espacios o tabulaciones.
Se ejecuta completamente en tu navegador. Tus datos nunca se suben.
Herramientas Relacionadas
Ver Todas¿Qué es Formateador HTML?
El Formateador HTML reescribe el HTML con una sangría limpia y coherente usando Prettier, el formateador que usan la mayoría de los proyectos front-end. Los bloques <style> y <script> en línea también se formatean como CSS y JavaScript.
Cómo usar Formateador HTML
- Pega tu HTML en el cuadro de entrada o haz clic en Cargar ejemplo.
- Elige la Sangría.
- Haz clic en Formatear (la salida también se actualiza mientras escribes).
- Copia o descarga el resultado.
Ejemplo
<div><p>Hi<b>x</b></p><img src=a.png alt=""></div>
<div> <p>Hi<b>x</b></p> <img src="a.png" alt="" /> </div>
Cuándo usar Formateador HTML
Úsalo para ordenar HTML exportado de un CMS, plantillas de correo o marcado generado antes de editarlo o revisarlo. Es un formateador, no un validador: para etiquetas sin cerrar o ids duplicados usa el Validador HTML. Los documentos muy grandes pueden tardar un poco porque Prettier se ejecuta en tu navegador.
Cómo funciona Formateador HTML
El código se formatea con Prettier 3 (versión standalone) y sus plugins de HTML, CSS y Babel, que se cargan bajo demanda. Prettier convierte el marcado en un árbol y luego lo imprime de modo que las líneas quepan en 80 columnas, poniendo comillas a los atributos y añadiendo /> a los elementos vacíos. Los elementos en línea sensibles a los espacios se mantienen juntos para que la página renderizada no cambie. Los errores de sintaxis se reportan con la línea y columna de Prettier.
Casos de Uso Comunes
- Hacer legible HTML minificado o en una sola línea
- Normalizar plantillas antes de una revisión de código
- Formatear fragmentos de HTML para documentación
- Limpiar marcado copiado de un editor WYSIWYG
Nota de Seguridad
Todo se ejecuta localmente en tu navegador; el código que pegas no se sube a ningún servidor.
Preguntas Frecuentes
¿Qué reglas de estilo se usan?
Las predeterminadas de Prettier: ancho de impresión de 80 caracteres, atributos con comillas dobles y la sangría que elijas.
¿El formato cambiará cómo se ve la página?
Prettier respeta la sensibilidad a los espacios de los elementos en línea, así que el renderizado debería quedar igual.
¿Corrige HTML no válido?
No. Formatea lo que analizaría un navegador; usa el Validador HTML para encontrar errores estructurales.