HTML Formatter
Understand HTML Formatter
Este formateador sangra el HTML según la profundidad de anidamiento, o lo reduce a una sola línea con los comentarios eliminados.
How it works
El marcado se divide en etiquetas, comentarios y bloques de texto, y el nivel de sangría sube con cada etiqueta de apertura y baja con cada una de cierre. Los elementos vacíos (br, img, input, meta, link) nunca abren un nivel porque no tienen nada que cerrar, y los elementos en línea (a, span, strong, code y los demás) se mantienen planos a propósito para que una frase no se parta en una palabra por línea. Minificar hace lo contrario: se eliminan los comentarios y se colapsa el espacio en blanco entre etiquetas.
When to use it
- Leer el código fuente de una página después de que se haya minificado o de que la haya emitido una herramienta de compilación.
- Desenredar un componente anidado o una plantilla de correo para localizar dónde queda un div sin cerrar.
- Limpiar marcado pegado desde un editor WYSIWYG o desde un campo de un CMS.
- Revisar la estructura de un fragmento antes de pegarlo en una plantilla.
Watch out for
- El espacio en blanco entre elementos en línea sí se renderiza. Colapsar </span> <span> a </span><span> elimina un espacio que el lector ve, así que la salida minificada no siempre es visualmente idéntica.
- Esto es una pasada textual, no un analizador de HTML. El contenido dentro de script, style, pre y textarea se trata como marcado corriente, así que embellecer una página volverá a sangrar los ejemplos de código y el texto preformateado, donde el espaciado sí significa algo.
- Minificar elimina todos los comentarios, incluidos los comentarios condicionales de los que depende una plantilla de correo para versiones antiguas de Outlook y cualquier marcador que lea su utillaje.
- Las etiquetas descompensadas producen una sangría extraña en lugar de un error: una salida que se va desplazando cada vez más a la derecha suele significar que una etiqueta nunca se cerró.
Not the right tool for: Minificar HTML para producción. Un minificador en tiempo de compilación analiza el documento y sabe qué espacio en blanco puede eliminarse con seguridad; hágalo en la cadena de compilación en lugar de pegando texto.
Frequently Asked Questions
¿Puedo formatear solo un fragmento y no un documento completo?
Sí: pegue cualquier fragmento (un div, una plantilla parcial o incluso un solo elemento). El formateador no exige una estructura completa de DOCTYPE, html, head y body.
¿Gestiona las plantillas de Jinja, Handlebars o Mustache?
La sintaxis de plantilla ({{ }}, {% %}, {{{ }}}) se conserva tal cual, ya que el formateador la trata como contenido de texto. La estructura HTML que rodea a las etiquetas de plantilla se formatea con normalidad.
¿Cuál es la diferencia entre minificar HTML y usar gzip?
La minificación elimina del HTML de origen los comentarios, el espacio en blanco y las etiquetas de cierre opcionales, con un ahorro habitual del 5 % al 15 %. Gzip comprime aún más la salida minificada (normalmente entre un 60 % y un 80 % adicional). En producción hay que usar ambas: primero minificar y después comprimir con gzip en el servidor.
How to Use HTML Formatter
- Paste or type your input in the input area above.
- The tool processes your input automatically or click Run.
- Copy or download the result using the action buttons.
- Use Ctrl+Enter to run quickly from the keyboard.