Formatea y embellece HTML con indentación configurable
También podrías necesitar
HTML sin formato — generado por herramientas de diseño, minificado por bundlers o copiado de fuentes externas — es difícil de leer, debuggear y mantener. Esta herramienta formatea HTML usando el DOMParser nativo del navegador, garantizando un parsing idéntico al que haría cualquier navegador moderno. Acepta tanto fragmentos HTML (un div, un formulario, un componente) como documentos completos con DOCTYPE. El formateador aplica indentación consistente respetando la semántica HTML: los elementos de bloque (div, section, article, table) se indentan en nuevas líneas; los elementos inline (span, a, strong, em) se mantienen en línea con el texto para no alterar el espaciado del layout; los elementos void (br, img, input, meta) se cierran correctamente sin slash (HTML5); los elementos pre, script y style preservan su contenido interno sin modificaciones para evitar alterar código embebido. La herramienta funciona completamente en tu navegador — ningún código HTML sale de tu dispositivo.
¿Qué diferencia hay entre formatear HTML y validarlo?
Formatear añade indentación y saltos de línea para mejorar la legibilidad sin cambiar el comportamiento del HTML. Validar verifica que el HTML cumpla con el estándar W3C — etiquetas correctamente anidadas, atributos requeridos presentes, DOCTYPE declarado. Esta herramienta formatea; para validación completa usa el validador oficial de W3C (validator.w3.org).
¿Por qué los elementos span y a no se indentan en nuevas líneas?
Porque son elementos inline: en HTML, los elementos inline pueden aparecer dentro de texto y afectan el flow de contenido. Añadir saltos de línea alrededor de <span> o <a> introduciría espacios en blanco visibles en el layout del navegador, alterando el diseño. El formateador respeta esta distinción semántica para que el HTML formateado sea visualmente idéntico al original.
¿Puedo formatear código de plantillas (Jinja, Handlebars, Blade)?
Parcialmente. El parser HTML del navegador ignora las expresiones de plantillas ({{ }}, {% %}, @) como texto. La estructura HTML se formatea correctamente, pero las expresiones de plantilla se tratan como texto plano. El resultado es usable como punto de partida, pero puede requerir ajustes menores en las expresiones de plantilla.
¿El contenido de script y style se formatea también?
No. El contenido de las etiquetas <script> y <style> se preserva exactamente como está en el input original. Formatear JavaScript o CSS dentro de HTML requeriría parsers especializados. Para formatear CSS usa un formatter CSS dedicado; para JavaScript, usa Prettier o tu formatter preferido.
¿Acepta HTML5 con atributos booleanos (defer, async, checked)?
Sí. Los atributos booleanos de HTML5 (defer, async, checked, disabled, required, etc.) se preservan correctamente. El DOMParser del navegador entiende la semántica HTML5 completa, incluyendo etiquetas void (sin cierre), atributos sin valor, y el modelo de contenido de HTML5.