Embellece marcado HTML desordenado
Este formateador de HTML convierte marcado minificado o enredado en HTML limpio y correctamente indentado en tiempo real, directamente en tu navegador. Pega una página en una sola línea o un lío de etiquetas anidadas y el resultado embellecido aparece al instante en el panel de la derecha, con una sangría consistente y una colocación ordenada de los atributos.
Casos de uso comunes
Desminificar páginas
Ordenar el marcado
Revisar y aprender
Cómo formatear HTML
Pega tu marcado
Escribe o pega HTML en el panel de Entrada, a la izquierda. También puedes Subir un archivo .html o hacer clic en Ejemplo para cargar una muestra.
Ve la salida al instante
El marcado formateado y resaltado aparece automáticamente en el panel derecho mientras escribes. Los números de línea y un contador de tamaño en vivo facilitan la navegación por documentos grandes. Pulsa Ctrl + Shift + F para reformatear cuando quieras.
Ajusta las opciones
Define la sangría (2, 3, 4, 8 espacios o Tab), el ancho de línea, cómo se ajustan los atributos y dónde se coloca la llave de cierre. La salida se vuelve a formatear de inmediato.
Copia o descarga
Haz clic en Copiar para tomar el resultado o en Descargar para guardarlo como archivo .html. Usa Editar para retocar la salida a mano antes de exportarla.
Opciones del embellecedor de HTML
Controles de formateo
Estos controles adaptan la salida HTML de Prettier a tu estilo de marcado preferido. Cada cambio vuelve a formatear el resultado al instante.
| Opción | Valores | Qué controla |
|---|---|---|
| Sangría | 2 · 3 · 4 · 8 espacios · Tab | Ancho de la sangría y carácter usado por nivel de anidamiento (predeterminado 4 espacios). |
| Ancho de línea | 80 · 100 · 120 | Longitud de línea objetivo antes de que se ajusten las etiquetas y el texto largos (predeterminado 80). |
| Atributos | Ajuste automático · Uno por línea | Si los atributos quedan en línea o cada uno va en su propia línea. |
| Llave | Nueva línea · Misma línea | Si el > de cierre de una etiqueta multilínea baja a una línea nueva. |
Qué se formatea
Etiquetas y atributos
Anidamiento consistente, espaciado prolijo de los atributos y manejo correcto de los elementos autocerrados y vacíos.
CSS y JS embebidos
El código dentro de los bloques <style> y <script> se formatea en línea junto con el marcado.
Herramientas integradas
Formateo en tiempo real
La salida se actualiza mientras escribes, con resaltado de sintaxis y márgenes de números de línea coincidentes.
Subir y descargar
Carga un archivo .html local o exporta el resultado formateado con un clic.
Salida editable
Cambia el panel de resultado al modo de edición para hacer retoques manuales antes de copiar.
Preguntas frecuentes
¿Qué hace un formateador de HTML?
Reindenta HTML crudo, minificado o desordenado en marcado limpio y legible, con un espaciado y unos saltos de línea consistentes. "Formateador de HTML" y "embellecedor de HTML" describen la misma tarea: hacer que el marcado sea fácil de leer y mantener.
¿El formateo altera el renderizado de la página?
No. Embellecer solo ajusta los espacios en blanco y la sangría para facilitar la lectura. Las etiquetas, los atributos y el contenido permanecen iguales, así que la página se ve y se comporta exactamente como antes.
¿Se sube mi HTML a un servidor?
No. Todo el formateo ocurre localmente en tu navegador. Tu marcado nunca se sube, registra ni almacena, así que es seguro formatear páginas propietarias o sin publicar.
¿También formatea el CSS y JS embebidos?
Sí. El código dentro de las etiquetas <style> y <script> se formatea en línea junto con el HTML circundante, así que todo el documento queda consistente.
¿Puedo poner cada atributo en su propia línea?
Sí. Configura la opción Atributos en "Uno por línea" para poner cada atributo en una línea separada, o déjala en "Ajuste automático" para que Prettier decida según el ancho de línea que elijas.
¿También minifica el HTML?
No. Esta herramienta es un embellecedor: expande e indenta el marcado para facilitar la lectura en lugar de comprimirlo. Para reducir una página para producción, usa un minificador de HTML dedicado.
¿Qué pasa si el marcado está mal formado?
Si el analizador no puede procesar la entrada, la herramienta muestra un mensaje de error que describe el problema en lugar de producir una salida rota. Corrige el problema indicado y el resultado formateado reaparece.