Construyo herramientas para ganarme la vida y lo más común que hago antes de leer a alguien' La interfaz de S ejecuta su HTML a través de un formateador. Las plantillas del servidor escupen marcado en una línea. Los paquetes lo colapsan. Un fragmento que alguien pega en Slack llega con tres niveles de anidamiento aplanados en una pared de corchetes angulares. No puedo depurar lo que no puedo leer, así que el primer movimiento es siempre el mismo: pégalo, golpea embellecer y deja que la estructura se revele. Esta guía es la que desearía haberme entregado a mi yo más joven, quien solía volver a sangrar el marcado a mano y se equivocaba la mitad del tiempo.
TL;Dr: Un formateador HTML vuelve a sangrar el marcado para que pueda leer su estructura y lo minimiza para que se envíe pequeño. Utilice embellecer mientras construye y depura, minify para producción. El Formateador HTML en Toolz.dev hace ambas cosas en su navegador, mantiene su script, estilo y contenido previo byte por byte, y nunca carga nada.
¿qué es un formateador HTML?
Un formateador HTML es una herramienta que analiza su marcado en su árbol de etiquetas y lo imprime con una sangría consistente, un nivel por profundidad de anidamiento. Esa es la dirección de embellecimiento. Al revés, minify, elimina los insignificantes espacios en blanco entre las etiquetas para que el archivo sea lo más pequeño posible sin cambiar la forma en que lo representa un navegador. La mayoría de los buenos formateadores, incluido el de Toolz.dev, hacen ambos desde la misma entrada.
La palabra "insignificante" está haciendo un trabajo real en esa oración. En HTML, algunos espacios en blanco importan y otros no. La nueva línea y dos espacios que pones entre un cierre </li> y el siguiente <li> no cambie nada sobre la página renderizada, por lo que un formateador puede agregarla, eliminarla o normalizarla libremente. Pero los espacios dentro de a <pre> bloque, o el espacio único entre dos en línea <a> los elementos, son parte de lo que ve el usuario. Un formateador que no comprende esa diferencia romperá felizmente su diseño. Esta es la línea entre un formateador que ayuda y uno en el que aprendes a desconfiar.
Si lo has usado Más bonita en tu editor ya conoces la sensación: dejas de preocuparte por la sangría porque una herramienta la garantiza. Un formateador basado en navegador le brinda la misma garantía para fragmentos únicos, resultados generados y marcas que no controla sin configurar un proyecto.
¿por qué el HTML termina siendo complicado en primer lugar?
Ayuda saber de dónde viene el desorden, porque te dice qué tiene que sobrevivir un formateador.
La primera fuente es la representación del servidor. Una plantilla PHP, una vista Rails o un archivo Blade emite HTML con cualquier espacio en blanco que el motor de plantillas tuviera ganas de producir y, después de que se ejecuta el middleware de minificación, suele tener una sola línea de miles de caracteres. Cuando algo parece mal en el navegador y presionas "Ver fuente," eso es lo que obtienes.
La segunda fuente es copiar y pegar. Obtienes un componente de un sistema de diseño, un fragmento de un CMS o una plantilla de correo electrónico que alguien te envió y tiene cualquier espacio que utilice: pestañas y espacios mixtos, anidamiento inconsistente, espacios en blanco finales. Paso gran parte de mi semana dentro de WordPress y salida CMS sin cabeza, y el marcado generado por CMS es uno de los peores, porque se ensambla a partir de fragmentos que tenían cada uno un formato diferente.
La tercera fuente es el marcado generado. Las herramientas de compilación, los editores WYSIWYG y las funciones de exportación producen HTML que nunca estuvo destinado a ser leído por un humano. Es correcto, pero es opaco. Un formateador lo convierte nuevamente en algo que puedes auditar.
El hilo común es que a ninguna de estas fuentes le importa si puedes leer el resultado. Ese es tu trabajo y un formateador es la forma más rápida de hacerlo.
¿cómo formateo HTML en línea?
El flujo de trabajo en Toolz.dev tarda unos diez segundos:
- Abre el Formateador HTML y pegue su marcado en el panel de entrada. No importa si está minificado en una línea, sangrado de manera inconsistente o en un fragmento desnudo.
- Elija Beautify para expandirlo o Minify para comprimirlo.
- Para embellecer, elija su sangría: 2 espacios, 4 espacios o pestañas. Dos espacios es el valor predeterminado común de la web.
- Opcionalmente marque "Eliminar comentarios" para eliminar comentarios HTML de la salida.
- Copie el resultado o descárguelo como
.htmlarchivo
Todo se ejecuta en el lado del cliente. El analizador es JavaScript en su navegador, por lo que el marcado nunca toca un servidor. Eso importa más de lo que la gente supone, a lo que volveré.
¿cuál es la diferencia entre embellecer y minificar?
Estas son operaciones opuestas que comparten un analizador, y saber cuándo alcanzar cada una es la mayor parte de la habilidad.
Embellecer es para humanos. Agrega saltos de línea y sangría para que el anidamiento sea visible, que es lo que desea al editar, depurar, diferenciar dos versiones o revisar una solicitud de extracción. Cuando busco un error de diseño, primero embellezco para poder ver qué elemento está cerrado o anidado en un nivel demasiado profundo.
Minificar es para máquinas. Elimina los espacios en blanco que un navegador ignora, por lo que el archivo es más pequeño y más rápido de transferir. Minificas HTML por la misma razón que minificas CSS o JavaScript: los bytes sobre el cable cuestan tiempo y, en una página grande, los espacios en blanco se suman. Si ya te apoyas en el Minifiero HTML para la compresión de producción, el formateador es la herramienta que utiliza para leer esa salida nuevamente cuando algo se rompe.
Así es como se comparan las dos direcciones en las decisiones que realmente difieren:
| Aspecto | embellecerse | minificar |
|---|---|---|
| portería | interés | Archivo más pequeño |
| Espacios en blanco entre etiquetas | Agregado y normalizado | remoto |
| Tamaño de salida | Más grande | Más pequeño |
| Cuándo usar | Edición, depuración, revisión | Producción, transferencia |
| Sangría | 2 espacios, 4 espacios o pestañas | nadie |
| Resultado renderizado | idéntico | idéntico |
La última fila es la importante. Ninguna operación cambia el aspecto de la página. Sólo los espacios en blanco que un navegador trata como cambios insignificantes. Si un formateador alguna vez altera su salida renderizada, eso es un error en el formateador, no una propiedad del formato.
¿el formato romperá mi JavaScript, CSS o texto preformateado?
Esta es la pregunta que separa un juguete de una herramienta, y es la razón por la que soy exigente sobre qué formateador uso.
Ciertos elementos contienen contenido donde los espacios en blanco y los caracteres son significativos y no deben tocarse. El Estándar HTML WHATWG clasifica script y style como elementos de texto sin formato y textarea y title como elementos de texto sin formato que se pueden escapar. Dentro de ellos, un formateador debe tratar el contenido como opaco. Si intenta volver a sangrar JavaScript en a script etiqueta, puede cambiar el contenido de una plantilla literal, cambiar una expresión regular o mover una línea dentro de una cadena de varias líneas, y ahora su código se comporta de manera diferente. Eso no es un cambio de formato, es un error que introdujo el formateador.
los pre el elemento es un caso relacionado. Todo su propósito es preservar los espacios en blanco, de modo que el contenido de su texto se muestre exactamente como está escrito. Un formateador que vuelve a sangrar en su interior <pre> cambia visiblemente la página.
El formateador Toolz.dev maneja todo esto tratando script, style, pre, textareay title como contenido sin formato: vuelve a sangrar el HTML que los rodea pero copia su texto interno palabra por palabra. Su código y texto preformateado salen idénticos byte por byte. Cuando probé esto mientras lo construía, la barra de aceptación era simple: a <script> conteniendo if(a<b){x=1} tiene que sobrevivir intacto, y así es. Si está trabajando con un marcado que contiene scripts o estilos en línea, esta es la propiedad que debe verificar antes de confiar en cualquier formateador.
¿puede un formateador manejar HTML roto o incompleto?
El HTML real rara vez está bien formado como lo está el XML, y un formateador que exige perfección es inútil. Los navegadores son famosos por su tolerancia: el Algoritmo de análisis HTML define exactamente cómo manejar etiquetas finales omitidas y elementos mal anidados, razón por la cual falta una página </li> todavía se vuelve bueno. Un buen formateador toma prestada la misma tolerancia.
El caso más común son las etiquetas finales opcionales. HTML le permite omitir la etiqueta de cierre en elementos como li, p, td, try option, porque la especificación dice abierto li está implícitamente cerrado cuando el siguiente li comienza. Entonces <ul><li>a<li>b</ul> es válido y el formateador Toolz.dev aplica estas reglas de cierre implícito para producir <li>a</li> y <li>b</li> en sus propias líneas, exactamente como un navegador construiría el árbol. A <p> se cierra automáticamente cuando se abre un elemento de bloque en su interior, porque un párrafo no puede contener contenido de bloque.
El segundo caso es un marcado realmente roto: una etiqueta abierta y nunca cerrada, o una etiqueta de cierre perdida sin ninguna coincidencia abierta. El formateador cierra todo lo que queda colgando al final del documento y lo informa como una advertencia, por lo que sabes que la entrada estaba incompleta en lugar de adivinarla en silencio. Esas advertencias suelen ser la forma más rápida de encontrar el error exacto que viniste a corregir.
Compare ese comportamiento con un formateador estricto y con hacerlo a mano:
| acceso | Etiquetas finales omitidas | Etiquetas no cerradas | anfetamina |
|---|---|---|---|
| Formateador tolerante (Toolz.dev) | Aplica reglas de cierre implícito | Cierra automáticamente y advierte | instante |
| Formateador estricto de estilo XML | A menudo se producen errores | Errores eliminados | Instantáneo cuando funciona |
| Reinscripción manual | Lo rastreas tú mismo | Fácil de perder | Lento y propenso a errores |
Solía estar en esa fila inferior, reindentando a mano y faltando un archivo no cerrado div tres de cada diez veces. La herramienta tolerante gana porque el marcado real es complicado y quieres que el desastre salga a la luz, no rechazado.
¿cuándo debo utilizar un formateador en lugar de mi editor?
Si es propietario del archivo y está en su proyecto, su editor más Prettier o un equivalente es el hogar adecuado para formatear, porque se ejecuta en guardado y se mantiene consistente en todo el equipo. No te sugiero que reemplaces eso.
Un formateador basado en navegador se gana su lugar en los espacios que deja el flujo de trabajo. Pegas un fragmento de un informe de error y necesitas leerlo ahora mismo. Estás en una máquina que no es tu cuadro de desarrollo. Estás mirando la salida de CMS, una plantilla de correo electrónico o un marcado generado que nunca vivió en un repositorio. Quieres minificar un solo fragmento sin conectar un paso de compilación. En todos esos casos, abrir una pestaña es más rápido que configurar un proyecto y el resultado es el mismo.
También está el ángulo de privacidad, que no es poca cosa. Debido a que el analizador Toolz.dev se ejecuta completamente en su navegador, el marcado que contiene URL internas, una copia inédita, respuestas API integradas en una plantilla o los datos de un cliente 's nunca salen de su dispositivo. Muchos formateadores en línea PUBLICAN su entrada en un servidor para realizar el trabajo. Para cualquier cosa, desde un código base de trabajo, es decir, una exposición de datos que no necesita tomar. Esto me importa lo suficiente como para que sea una regla de diseño para cada herramienta del sitio, sobre la cual escribí más en el Kit de herramientas para desarrolladores web y la guía para Privacidad de datos en herramientas en línea.
Un flujo de trabajo práctico que me ha ahorrado horas
Aquí está el bucle que realmente ejecuto cuando un diseño se está portando mal. Embellezca el marcado para que el anidamiento sea visible. Escanee la sangría en busca del nivel que parece incorrecto, porque una sangría adicional perdida casi siempre significa una etiqueta que nunca se cerró. Lea las advertencias del formateador, que frecuentemente nombran el elemento exacto no cerrado. Arreglarlo en la fuente. Si el fragmento está destinado a producción, minifíquelo en el camino de regreso. Todo el ciclo es de un minuto, y la mayor parte de ese minuto soy yo leyendo, sin luchar contra la herramienta.
El mismo bucle funciona para auditorías de contenido. Cuando verifico el marcado para accesibilidad o SEO, primero embellezco para poder ver la estructura del encabezado y los elementos de referencia de un vistazo, luego coloco piezas específicas en otras herramientas: convirtiendo un fragmento a Markdown para documentación con HTML para rebajar convertidor, o generar una tabla comparativa con el Generador de mesa de descuento. El formato es el paso que hace que la estructura sea lo suficientemente legible para trabajar con ella. Si desea una rutina más amplia en la que encajen estas herramientas, el Herramientas de productividad para desarrolladores la guía lo expone.
Preguntas frecuentes
¿cómo formateo HTML en línea?
Pegue su HTML en el panel de entrada, elija Embellecer, elija un ancho de sangría y haga clic en Formato. La herramienta analiza el árbol de etiquetas y lo vuelve a sangrar, luego le permite copiar o descargar el resultado. Todo el procesamiento ocurre en su navegador, por lo que no se carga nada.
¿cuál es la diferencia entre embellecer y minificar HTML?
El embellecimiento agrega saltos de línea y sangría para que el anidamiento sea fácil de leer, lo cual es ideal para editar y depurar. La minificación elimina los espacios en blanco insignificantes entre etiquetas para producir un archivo más pequeño para la producción. Ambos mantienen el mismo resultado renderizado; sólo cambia el espacio en blanco.
¿el formato cambiará el aspecto de mi página?
No. El formateador solo cambia los espacios en blanco entre etiquetas, no los elementos, atributos o texto. Se conserva el contenido donde los espacios en blanco son significativos, como pre, área de texto y texto en línea, por lo que una página representa el mismo formato antes y después.
¿el formateador reformatea mi JavaScript y CSS?
No. El contenido dentro de las etiquetas de estilo y script se trata como texto sin formato y se copia palabra por palabra. La herramienta vuelve a sangrar el HTML que los rodea pero nunca toca el código en sí, por lo que los literales de plantilla, las expresiones regulares y los valores CSS permanecen idénticos byte por byte.
¿puede manejar HTML roto o incompleto?
Sí, dentro de lo razonable. El analizador es tolerante: aplica las mismas reglas de cierre implícito que usan los navegadores para etiquetas como li, p y td, y cierra automáticamente las etiquetas que quedan abiertas al final del documento. Cuando lo hace, muestra una advertencia para que sepas que el marcado estaba incompleto.
¿es seguro formatear HTML que contenga datos confidenciales?
Sí. El analizador se ejecuta completamente en JavaScript en su navegador. Ninguna solicitud de red lleva su marcado, no se almacena nada y la herramienta funciona sin conexión una vez cargada. HTML que contiene enlaces internos, respuestas API o copias inéditas nunca sale de su máquina.
¿qué opciones de sangría están disponibles?
La salida Beautify admite 2 espacios, 4 espacios o pestañas. Dos espacios es el valor predeterminado común para proyectos web, cuatro espacios se adaptan a equipos que prefieren una sangría más amplia y las pestañas permiten a cada desarrollador establecer su propio ancho de pantalla en el editor.
¿en qué se diferencia un formateador HTML de un minificador HTML?
Un formateador tiene ambas direcciones en una sola herramienta: embellecer para expandir el marcado para lectura y minificar para colapsarlo para envío. Un minificador dedicado solo comprime. Si necesita principalmente compresión de producción, el minificador HTML se centra en eso; Si cambia entre lectura y envío, el formateador cubre ambos.
Formatea tu marcado con el gratis Formateador HTML. Se ejecuta completamente en su navegador, mantiene intactos sus scripts y contenido preformateado y nunca carga un byte.
