Formateador HTML

Un formateador HTML reescribe el marcado HTML con una sangría limpia y consistente para que la estructura del documento sea fácil de leer. Pegue una página minificada, un fragmento copiado de una herramienta de compilación o un marcado escrito a mano con pestañas y espacios que no coinciden, y el formateador analiza el árbol de etiquetas y lo imprime con un nivel de sangría por profundidad de anidamiento. La operación inversa, minifying, elimina los insignificantes espacios en blanco entre las etiquetas para reducir el archivo para su producción sin cambiar la forma en que el navegador lo representa.

El HTML sin formato rara vez llega a un estado que puedas escanear. Las plantillas del servidor lo emiten en una sola línea, los paquetes lo colapsan y los fragmentos pegados llevan el espacio que utilice con el código. Embellecer expone el anidamiento para que pueda encontrar el elemento que necesita, detectar una etiqueta que nunca se cerró o diferenciar dos versiones limpiamente. Esto es más importante cuando depuras un diseño, auditas el marcado de accesibilidad o lees el contenido de otra persona por primera vez. Un formateador convierte una pared de corchetes angulares en un esquema que puedes seguir.

Un ejemplo trabajado muestra lo que hace este formateador HTML gratuito con una entrada descuidada. Pegue <ul>PH1__One<li>Two</ul><p>Hi <b>there</b>, mantenga Beautify y 2 espacios seleccionados y haga clic en Formato. El formateador HTML en línea cierra ambos elementos de la lista y el párrafo, coloca cada li en su propia línea con sangría y mantiene <p>Hi <b>there</b><li>0__ en una línea porque es contenido corto en línea. La salida lee 5 etiquetas, 5 líneas, 63 bytes y dos advertencias enumeran lo que se cerró automáticamente, por lo que el formateador de código HTML nunca repara el marcado roto en silencio.

Esta herramienta se ejecuta al 100% en su navegador con un analizador sin dependencias, por lo que nada de lo que pegue se carga o registra y sigue funcionando sin conexión una vez que la página se ha cargado. El analizador es deliberadamente tolerante: aplica las mismas reglas de cierre implícito que utiliza un navegador para etiquetas como li, p, td y opción, por lo que el marcado del mundo real con etiquetas finales omitidas aún formatea correctamente. El contenido dentro del script, estilo, pre, área de texto y título se copia palabra por palabra, lo que significa que su JavaScript, CSS y texto preformateado nunca se vuelven a sangrar ni romper.