Formatear HTML
El formateador de HTML reindenta y minifica el marcado en tu navegador. HTML no es XML, y formatearlo como si lo fuera corrompe los documentos de cuatro maneras muy concretas — elementos vacíos, elementos de texto crudo, etiquetas de cierre opcionales y espacios en blanco significativos entre elementos en línea —, y esta herramienta trata cada una de ellas de forma explícita.
¿Cómo funciona Formatear HTML?
La mayoría de los formateadores de HTML son formateadores de XML con otro nombre, y cada una de las cuatro diferencias entre ambos ha provocado un fallo real.
Los elementos vacíos no abren un ámbito
<br>, <img>, <input>, <hr> y otros diez elementos no tienen etiqueta de cierre — no es algo opcional, es que no existe. Un formateador que aumenta la sangría con cada etiqueta de apertura empuja todo lo que sigue a la primera <img> un nivel hacia la derecha y nunca se recupera, de modo que una página con veinte imágenes acaba desplazada fuera de la pantalla.
Script y style contienen texto, no marcado
Un < dentro de un <script> es un signo menor que. Interpretarlo como una etiqueta es la manera de que un if (a < b) acabe destrozando el documento, y es justo por eso que el ejemplo anterior contiene exactamente esa expresión. El contenido de <script>, <style>, <textarea> y <title> se consume entero, hasta la etiqueta de cierre que le corresponde.
Los espacios en blanco entre elementos en línea sí se renderizan
<b>a</b> <i>b</i> se renderiza como “a b”; sin el espacio, se renderiza como “ab”. Un formateador que pone cada elemento en su propia línea ha insertado un espacio en cada flujo de texto del documento — el síntoma clásico es un hueco espurio delante de cada punto y detrás de cada enlace. Por eso los elementos en línea se mantienen agrupados en un búfer y solo los elementos de bloque inician líneas. La misma regla explica por qué el contenido de <pre> nunca se reindenta: ahí, el espacio en blanco es el diseño.
Varios elementos permiten omitir la etiqueta de cierre
</li>, </p>, </td> y otros similares pueden omitirse, y mucho HTML escrito a mano los omite. Un formateador con una pila de etiquetas estricta o rechaza el documento o descuadra su sangría. Aquí, la pila se desenrolla a través de los elementos cuyo cierre es opcional cuando se encuentra con una etiqueta de cierre que no coincide con la cima.
Qué señala el análisis
Un <img> sin atributo alt queda marcado, porque un lector de pantalla recurre a anunciar el nombre del archivo — algo peor que el silencio, y la razón por la que una imagen decorativa necesita alt="" en lugar de no tener atributo alguno. Los elementos sin cerrar se nombran: el navegador sabrá recuperarse, pero dónde decide cerrarlos lo elige él y no tú, y ambas decisiones a menudo no coinciden.
Entrada
<div><br><p>text</p></div>
Formateado
<div>
<br>
<p>
text
</p>
</div>¿Qué opciones y casos límite admite Formatear HTML?
| Parámetro | Tipo | Valor predeterminado | Comportamiento y casos límite |
|---|---|---|---|
| Sangría | espacios | 2 | Por nivel de anidamiento. Los elementos vacíos no añaden un nivel. |
| Salto de atributos | recuento | 4 | Las etiquetas con al menos este número de atributos, o más largas de 100 caracteres, ponen cada atributo en su propia línea. |
| Conservar texto sin procesar | booleano | on | El contenido de pre y textarea nunca se modifica, porque su espacios en blanco se renderizan. Los cuerpos de script y style se vuelven a indentar, lo cual es seguro. |
| Elementos vacíos | 14 elementos | — | area base br col embed hr img input link meta param source track wbr. Ninguno de ellos abre un ámbito. |
| Elementos de texto sin procesar | script, style, textarea, title, pre | — | El contenido es texto en lugar de marcado. Un < dentro de un script es un signo menor que, y parsearlo como etiqueta corrompe el documento. |
| Elementos en línea | se mantienen en el flujo | — | a, b, span, em, img y otros permanecen en la línea en la que estaban, porque un salto de línea entre ellos se renderiza como un espacio. |
| Cierre opcional | tolerado | — | li, p, td, tr, option y otros pueden omitir su etiqueta de cierre. La pila se desenrolla en lugar de rechazar el documento. |
| Comillas de atributos | normalizadas | dobles | A menos que el valor contenga comillas dobles, en cuyo caso se usan comillas simples. Los atributos booleanos mantienen su forma sin comillas. |
| Minificar | espacios en blanco | — | Colapsa secuencias de espacios en blanco pero mantiene un solo espacio donde se encuentran elementos en línea, y preserva el contenido de pre. Los comentarios condicionales sobreviven porque son marcado para IE antiguo. |
Preguntas frecuentes
¿Por qué mi elemento en línea no aparece en su propia línea?
Porque ponerlo ahí cambiaría lo que renderiza la página. <b>a</b> <i>b</i> muestra "a b"; sin el espacio entre las etiquetas, muestra "ab". Un formateador que parte cada elemento en su propia línea inserta un espacio en cada flujo de texto del documento, y el síntoma es un hueco espurio delante de cada punto. Los elementos en línea se quedan en el fragmento donde estaban.
¿Por qué no se ha tocado el contenido de mi <pre>?
Porque en un <pre> el espacio en blanco es el contenido. Reindentarlo cambia lo que ve quien lo lee, que es justo lo contrario de formatear. Lo mismo se aplica a <textarea>, donde el espacio en blanco es el valor del campo. Los cuerpos de script y style sí se reindentan, porque su espacio en blanco no se renderiza.
Mi HTML no tiene etiquetas </li> de cierre. ¿Está roto?
No — HTML permite omitir la etiqueta de cierre de li, p, td, tr, option, thead y varios elementos más, y mucho marcado escrito a mano lo hace. El formateador desenrolla su pila cuando se encuentra con una etiqueta de cierre que no coincide con la cima, así que el documento se formatea correctamente. Si conviene omitirlas es una cuestión de estilo; si el analizador lo soporta, no.
¿Por qué avisa de un atributo alt que falta?
Porque un <img> sin alt hace que el lector de pantalla anuncie el nombre del archivo — "i-m-g guion bajo 4 0 2 1 punto p-n-g" —, lo cual es peor que no decir nada. La solución para una imagen decorativa es alt="", que indica explícitamente a la tecnología de asistencia que la omita. Un atributo ausente y uno vacío significan cosas distintas, y solo uno de los dos es correcto para la decoración.
¿Merece la pena minificar HTML?
Solo como parte de un build, y la ganancia es menor de lo que imaginas en cuanto entran gzip o brotli en escena — la compresión ya maneja muy bien el espacio en blanco repetido. Donde la minificación es realmente útil es en las plantillas de correo, donde algunos clientes rechazan los mensajes grandes, y en el CSS crítico en línea, donde esos bytes están en la ruta crítica.
¿Se sube mi marcado a algún servidor?
No. Tokenizar y formatear se ejecuta en tu navegador, algo que puedes comprobar en el panel Network. El marcado de una aplicación real suele llevar atributos de datos, URL internas y JSON en línea con contenido real.