Formateador HTML
Embellece, minifica y revisa tu marcado

Qué hace un formateador HTML

Un navegador nunca rechaza una página. Por eso, un párrafo sin cerrar, un elemento de lista sin etiqueta final y una celda abierta se muestran igual, porque el analizador rellena los huecos en silencio mientras lee. Así que el marcado de un sitio en vivo suele ser más desordenado que el código con el que alguien querría trabajar.

Ese hueco es la razón de ser de este formateador HTML. Como lee tu marcado con las mismas reglas que un navegador, cierra las etiquetas que dejaste implícitas, corrige la sangría, alinea los atributos y te devuelve algo que de verdad puedes leer.

Junto con el orden, guarda una nota de cada decisión. Por ejemplo, el cierre implícito de una lista, un elemento vacío escrito con barra de cierre o una etiqueta suelta sin pareja aparecen en una tabla de revisiones, con la línea y la columna donde están.

No construye ninguna página ni ejecuta ningún script, así que un bloque de marcado copiado de un sitio de cliente se lee igual que el tuyo. Además, un bloque <script> o <style> se copia sin tocar, porque su contenido no es HTML y darle formato lo rompería.

Tampoco sale nada de esta pestaña. Por lo tanto, una plantilla bajo un acuerdo de confidencialidad, un componente a medio hacer o una página que nunca publicarías se pueden pegar con total seguridad.

Cómo lee tu marcado un formateador HTML

La primera pasada convierte el texto en tokens. Una etiqueta de apertura, una de cierre, un tramo de texto, un comentario y el doctype son cosas distintas, y el lector decide cuál tiene delante carácter a carácter.

La segunda pasada ordena esos tokens en un árbol, y ahí es donde se revisa la forma. El reglamento es la especificación de análisis HTML de WHATWG, el mismo documento que siguen todos los navegadores.

Ese orden explica casi todo lo que dice la tabla de revisiones. Como algunas etiquetas pueden quedar abiertas a propósito, un nuevo <li> cierra el anterior y una nueva fila cierra la última celda. Así que el árbol que construye el lector es más ordenado que el texto que le diste.

Tres tipos de elemento reciben un trato especial. Primero, un elemento vacío como <br> o <img> nunca lleva etiqueta de cierre. Segundo, un elemento de texto sin procesar como <script>, <style> o <textarea> conserva su contenido literal. Tercero, <pre> conserva sus espacios, porque en ese elemento los espacios son contenido.

Las mayúsculas son una decisión, no una regla. Por defecto, el formateador deja los nombres de etiqueta y atributo tal cual, así que un <svg> en línea mantiene viewBox y linearGradient escritos como exige SVG. Aun así, un solo interruptor lo pasa todo a minúsculas cuando quieres el estilo HTML más simple.

Por qué embellecer y minificar usan el mismo lector

Los dos modos leen el marcado igual y construyen el mismo árbol. Luego, un modo imprime ese árbol en muchas líneas con sangría, y el otro lo imprime sin los huecos entre etiquetas.

Así que la diferencia está solo en el último paso. Como minificar reduce las series de espacios en lugar de borrarlas, se conserva el espacio entre dos etiquetas en línea, ya que quitarlo pegaría dos palabras en la página.

Ese lector compartido es la razón de que las revisiones sean iguales en ambos modos. Una etiqueta de cierre que falta se completa tanto si embelleces como si minificas, y la nota aparece en los dos casos.

En resumen, embellece cuando quieras leer o editar el marcado, y minifica cuando quieras publicarlo. Para una página que vas a servir, el minificador HTML dedicado hace la misma compresión con algunas opciones más.

Las revisiones que hace y qué significa cada nota

La primera nota es una etiqueta de cierre implícita. Como un <li>, un <p> o una fila de tabla pueden cerrarse solos, el formateador completa la etiqueta de cierre y te dice dónde, así que el árbol queda explícito aunque tu código no lo fuera.

La segunda es un elemento vacío escrito con etiqueta de cierre. Un </br> o una etiqueta de cierre en un <img> no significan nada, así que el lector la elimina y anota el sitio en lugar de dejar una pareja confusa.

La tercera es una etiqueta de cierre sin pareja. Cuando una etiqueta final no coincide con nada en la pila, el lector no puede emparejarla, así que marca la línea en lugar de adivinar qué etiqueta abierta querías decir.

La cuarta es un elemento que nunca se cierra. Si un <div> o un <span> llega abierto al final del archivo, la nota nombra la etiqueta que lo empezó, porque esa es la que tienes que encontrar.

La quinta es un atributo duplicado. Dos valores class en una etiqueta hacen que el navegador conserve el primero e ignore el segundo, así que el lector señala la pareja antes de que cambie tu estilo en silencio.

La sexta lo detiene todo, y es la única que lo hace. Un comentario, un doctype o un bloque <script> sin cierre se salen del final del archivo, así que el lector no puede terminar y no se imprime nada hasta que lo cierres.

Lo que este formateador HTML no hace

No muestra tu página. Aquí nada carga una imagen, ejecuta un script o aplica una hoja de estilos, así que el marcado no puede actuar sobre la pestaña mientras lo lees.

No valida el marcado por completo. Un formateador revisa la forma, no el reglamento, así que un <div> dentro de un <span> o un salto de encabezado de dos a cuatro sale con buena sangría y sigue estando mal. Ordenado no es lo mismo que válido.

No corrige tu código más allá de la forma. Una etiqueta de cierre deducida se completa y se anota, porque leer el árbol lo exige, pero el formateador nunca reescribe tus atributos ni reordena tu contenido.

No toca lo que no es HTML. El contenido de un <script>, un <style> o un <pre> se copia tal cual, así que pásalo por el validador de JavaScript o el validador de CSS cuando también quieras revisarlo.