Formateador HTML
Indenta un documento HTML sin cambiar cómo se representa, enteramente en tu navegador.
Se ejecuta enteramente en tu navegador. No se sube, registra ni guarda nada.
Pega una página minificada o mal indentada y léela como es debido. El formateo se hace en tu navegador, y el documento que sale se representa exactamente igual que el que entró.
Cómo funciona
El documento se lee en un árbol —que es donde se resuelven los elementos vacíos, el contenido de script y style y las etiquetas de cierre opcionales de HTML— y luego se vuelve a escribir con la nueva sangría.
Dónde caen las líneas lo decide cómo lee un navegador los espacios en blanco, no lo que queda bonito. Cualquier serie de espacios en blanco se representa como un solo espacio, así que convertir un espacio en un salto de línea y una sangría no cambia nada. Crear uno donde no había sí: es lo que convierte dos elementos en línea contiguos en dos separados por un espacio.
Así que solo se añaden o se quitan espacios en blanco entre cajas de bloque y en los bordes de una, donde un navegador no representa ninguno. Esa es la excepción que permite abrir una página minificada, y es también por lo que una serie de elementos en línea se queda en la línea en la que estaba.
Una etiqueta de la que el formateador no ha oído hablar nunca se trata como en línea, porque esa es la respuesta que no añade espacio en blanco y que, por tanto, no puede cambiar la página.
Ejemplos
| Caso | Entrada | Resultado |
|---|---|---|
| Una lista sin sangría | <ul><li>One</li><li>Two</li></ul> | <ul> <li>One</li> <li>Two</li> </ul> |
Preguntas frecuentes
¿Se envía mi página a alguna parte?
No. El formateador es JavaScript ejecutándose en esta página. No se sube nada, no se registra nada y no se almacena nada: puedes desconectar la red y la herramienta sigue funcionando.
¿Por qué se han quedado mis elementos en línea en una sola línea?
Porque moverlos cambiaría tu página. El espacio en blanco entre dos cajas en línea se representa como un espacio, así que poner <span>a</span><span>b</span> en dos líneas mete entre ellos un hueco que no estaba. Casi todos los formateadores lo hacen igualmente; este no.
¿Va a cerrar mis etiquetas sin cerrar?
No. Entiende que un segundo elemento de lista cierra el primero, así que indenta bien tu lista, pero vuelve a escribir las etiquetas que escribiste. Añadir una etiqueta de cierre sería editar tu marcado en lugar de maquetarlo, y dónde debería ir exactamente no siempre es obvio.
¿Valida el HTML?
No. No tiene esquema, ni reglas sobre qué elemento puede contener a cuál, ni opinión sobre tus atributos. Lo único que rechaza es una etiqueta, un comentario o un bloque de script que no se cierran, porque a partir de ahí ya no puede distinguir el marcado del texto.
¿Qué pasa con mis scripts y mis estilos?
Vuelven byte a byte. Dentro de un script, un < es un signo de menor que y no el comienzo de una etiqueta, y dentro de un <pre> o un <textarea> cada espacio es tuyo. Esos cuatro elementos se dejan exactamente como estaban. Si quieres formatear el script o la hoja de estilos en sí, el formateador CSS está al lado.
Conviene saber
- El documento que sale se representa igual que el que entró. Eso lo afirman las pruebas sobre un corpus en lugar de dejarlo a la inspección.
- No se inventa nada: no se añade ninguna etiqueta de cierre, no se vuelve a entrecomillar ningún atributo, no se decodifica ninguna entidad y no se cambia la caja de ningún nombre de etiqueta. Solo cambia el espaciado entre los atributos, porque no se representa nunca.
- El ancho de ajuste decide si un elemento con contenido en línea se queda en una línea o se abre, así que un párrafo corto se lee como una línea y uno largo se parte por espacios que ya tenía.
Fuentes
Todas las herramientas de Código