Para qué sirve
Ordenar HTML tiene un riesgo que no tiene ordenar código de programación: aquí el espacio en blanco forma parte de lo que se ve. Entre dos elementos en línea, un salto de línea se convierte en un espacio, y ese espacio se dibuja en la pantalla. Partir «<span>a</span><span>b</span>» en dos líneas separa las dos palabras.
El documento sigue siendo válido, sigue cargando y nada da error. Solo que ahora hay un hueco donde antes no lo había, y encontrar de dónde salió cuesta un rato largo. Por eso esta herramienta salta de línea únicamente alrededor de elementos de bloque, y deja el texto y los elementos en línea juntos aunque la línea quede larga.
Cuatro elementos se copian enteros, sin tocarles nada: pre, textarea, script y style. En los dos primeros el espacio es significativo por definición del propio lenguaje; en los otros dos el contenido ni siquiera es HTML.
Cómo se calcula
Primero se separa el documento en piezas: declaraciones, comentarios, etiquetas de apertura, de cierre y texto. Localizar el final de una etiqueta no es buscar el siguiente «>», porque ese signo puede aparecer dentro del valor de un atributo; hay que recorrerla llevando la cuenta de las comillas abiertas.
Después se reparten las líneas. Cada elemento de bloque abre su línea y aumenta un nivel de sangría; su cierre baja el nivel y abre otra. Todo lo que va entre medias y es texto o elemento en línea se acumula en una sola línea, que se vuelca cuando aparece el siguiente bloque.
Un elemento cuyo contenido es corto y no lleva bloques dentro se deja completo en una línea: un título de tres palabras no necesita tres renglones. Al juntarlo se recorta solo por los extremos, nunca por dentro, porque el hueco entre dos elementos en línea es contenido.
Los elementos vacíos —br, img, input, meta y compañía— no abren nivel. Tratarlos como si lo hicieran desplazaría hacia la derecha todo el resto del documento.
<span>a</span><span>b</span> → «ab»Sin espacio entre las etiquetas, las palabras van pegadas.
<span>a</span>\n<span>b</span> → «a b»El salto de línea se convierte en un espacio. Es el mismo HTML y no se ve igual.
Ejemplo resuelto
Una tarjeta escrita de un tirón
- Entrada
- <section><h2>Título <em>en cursiva</em></h2><ul><li>Uno</li><li>Dos</li></ul></section>
- «section» es de bloque: abre línea y aumenta la sangría.
- «h2» también, pero su contenido es corto y solo lleva un «em» en línea, así que se queda entero en un renglón: el espacio antes de «en cursiva» se conserva.
- «ul» abre otro nivel y cada «li» cae en su línea, porque los tres son de bloque.
- Los cierres van bajando el nivel según aparecen.
- En ningún punto se ha metido un salto entre dos elementos en línea, así que el resultado se ve exactamente igual que la entrada.
Ocho líneas con la estructura a la vista y el mismo aspecto.
Bloque o en línea: por qué importa la lista
La decisión de partir o no depende de si el elemento es de bloque o de línea, y esa clasificación sale de la lista que define el estándar. Una etiqueta que no esté en la lista de elementos en línea se trata como bloque, que es lo razonable con las etiquetas propias de un componente.
Hay un límite que conviene tener claro y que ninguna herramienta puede salvar: la clasificación es la del comportamiento **por defecto** de cada elemento. Si tu CSS convierte un «div» en «display: inline», el salto que aquí se considera inocuo sí se notaría. Es poco frecuente, pero existe.
| Elemento | Trato | Consecuencia |
|---|---|---|
| div, p, ul, li | bloque | cada uno en su línea |
| span, a, em, strong | en línea | se quedan pegados al texto |
| br, img, input | vacío | no abren nivel de sangría |
| pre, textarea | crudo | contenido intacto, byte a byte |
| script, style | crudo | no es HTML: no se toca |
| mi-componente | bloque | desconocido: se asume bloque |
Lo que no hace
No valida. No comprueba que las etiquetas casen, no avisa de un cierre que falta y no corrige nada. Un documento con etiquetas descuadradas se ordena igual, con la sangría torcida a partir del punto donde se descuadra —que, de hecho, suele ser la forma más rápida de localizar el fallo—.
Tampoco reescribe los atributos. Se copian enteros, con sus comillas y su contenido tal cual: es lo que permite ordenar una plantilla con sintaxis de servidor dentro de los atributos sin destrozarla.
Preguntas frecuentes
¿Por qué deja líneas tan largas a veces?
Porque cortarlas cambiaría lo que se ve. Cuando una línea solo tiene texto y elementos en línea, cualquier salto que se meta añade un espacio visible en la página. Una línea larga molesta al leer el código; un espacio de más es un fallo de maquetación.
¿Puede estropear mi página?
El contenido de pre, textarea, script y style sale idéntico, los atributos se copian enteros y los saltos solo se meten alrededor de bloques. El único caso donde podría notarse es si tu CSS cambia el «display» por defecto de un elemento, algo que ninguna herramienta puede adivinar.
¿Comprueba si el HTML está bien escrito?
No, y no lo pretende. Reparte líneas sin verificar que las etiquetas casen. Si la sangría se va torciendo a partir de cierto punto, casi siempre es que ahí falta un cierre, así que sirve de pista aunque no sea un validador.
¿Qué pasa con las plantillas de Angular, Vue o Blade?
La parte HTML se ordena bien y las expresiones dentro de los atributos se conservan enteras, porque los atributos no se reescriben. Las directivas que ocupan el lugar de una etiqueta, en cambio, se leen como elementos desconocidos y se tratan como bloque.
¿Para qué sirve minificar?
Para meter un fragmento en un correo, en una configuración o en un campo donde los saltos de línea estorban. Quita los comentarios y junta el espacio sobrante, pero mantiene el que separa dos elementos en línea, porque ese sí se ve.
¿El HTML que pego se llega a ejecutar?
En ningún momento. Se trata como una cadena de texto y se muestra dentro de un bloque de código, nunca se inserta en la página ni se interpreta. Un script pegado aquí no se ejecuta: se cuenta sus caracteres y ya está.
Fuentes
Toda la información de esta página se refiere a: Formateador de HTML.