Formateador y embellecedor HTML gratuito
Formatea y embellece el código HTML con indentación y anidamiento correctos. Admite tamaños de indentación personalizados, conserva las etiquetas en línea y muestra el recuento de caracteres antes/después. Descarga el HTML formateado como archivo.
¿Qué es el formateo HTML?
El formateo HTML (también llamado «beautification» o «pretty-printing») es el inverso de la minificación. Un formateador toma HTML en cualquier forma, salida de producción minificada, copiada y pegada desde el inspector de un navegador, generada desde un motor de plantillas, o simplemente escrita a mano de manera desordenada, y lo vuelve a emitir con indentación consistente, saltos de línea entre elementos de bloque y una estructura visual predecible. Los navegadores ignoran el espacio en blanco extra en tiempo de parseo, así que el formateo cambia cómo se ve el fuente pero nunca cómo se renderiza la página. ¿Por qué molestarse? Porque el ojo humano parsea la jerarquía indentada más rápido que una sopa de etiquetas visualmente plana. Revisión de código, depuración, aprender estructura HTML, entregar markup a otro desarrollador, comparar dos versiones por cambios, todo se vuelve sustancialmente más fácil cuando el árbol del documento es visualmente obvio a partir de la indentación.
Los cinco flujos de trabajo del mundo real donde un formateador gana su lugar: (1) HTML de producción minificado pegado desde «Ver fuente» de un navegador o «Copiar HTML externo» de DevTools de vuelta a un depurador; (2) HTML extraído de un textarea de CMS donde el editor WYSIWYG produjo una salida visualmente limpia pero un fuente desordenado; (3) depuración de salida de motor de plantillas (Jinja, Twig, Handlebars, ERB) donde el HTML renderizado no coincide con lo que esperabas; (4) conversión de HTML auto-generado (desde renderizado del lado servidor React, Pandoc, conversores de documentos) en una forma legible para revisión de código; (5) limpiar HTML de plantilla de email antes de enviarlo a una plataforma de marketing que podría despojar tu formateo al importar.
Los principales formateadores HTML
js-beautify (Einar Lielmanis, desde 2007) es el formateador de larga data del ecosistema JavaScript, maneja HTML, CSS, JavaScript y JSON con una sola biblioteca. El formateador HTML es lo que alimenta la cara pública de beautifier.io y lo que históricamente respaldó docenas de sitios «format HTML online». Prettier (James Long, 2017) es el formateador con opinión que llegó a dominar el ecosistema frontend moderno; el soporte HTML aterrizó poco después del lanzamiento. La filosofía de diseño de Prettier es «casi sin configuración», un estilo de indentación (2 espacios por defecto), un objetivo de ancho de línea (printWidth: 80), un conjunto de reglas de envoltura de atributos. El trade-off es consistencia entre equipos sin bikeshedding; el coste es menos flexibilidad personal. HTML Tidy (Dave Raggett en W3C en 1997, ahora mantenido por HTACG) es el original, precede a la escena moderna de formateadores web y fue originalmente diseñado para limpiar HTML antiguo, roto y obsoleto de finales de los 90. Tidy aún viene en macOS por defecto (/usr/bin/tidy) y en la mayoría de las distribuciones Linux; menos comúnmente usado en 2026 pero todavía respetado por su rigor. En un flujo de trabajo moderno, Prettier es el defecto para proyectos nuevos, integrado en VS Code (formateador por defecto para archivos HTML), IDEs JetBrains, y hooks de pre-commit vía Husky + lint-staged. Esta herramienta es para los casos donde no tienes un pipeline de build ejecutando Prettier, pegar, formatear, copiar fuera.
Convenciones de indentación
Tres estilos de indentación compiten en HTML moderno. 2 espacios es el defecto web moderno, usado por la HTML/CSS Style Guide de GitHub, la Google HTML/CSS Style Guide, el defecto de Prettier, los ejemplos de estilo WHATWG y la mayoría de los paquetes front-end publicados en npm. El argumento: HTML se anida profundamente (un componente típico podría tener 6-10 niveles de indentación), y 2 espacios evitan que las líneas se salgan del borde derecho de una pantalla de 80 columnas. 4 espacios es la antigua tradición Java / Microsoft que sobrevive en algunos proyectos legacy y el estándar PHP PSR-12; produce una jerarquía visualmente más clara al coste de espacio horizontal. Las tabulaciones son favorecidas por la comunidad del kernel Linux, algunos proyectos Go, y desarrolladores que argumentan que los caracteres tab dejan a cada visor establecer su propia preferencia de ancho visual. El argumento «tabs vs espacios» es más viejo que la mayoría de los lectores y no se puede ganar; la respuesta práctica es elegir uno por proyecto y que tu formateador lo imponga. Esta herramienta ofrece los tres.
Elementos inline vs bloque, la trampa del espacio en blanco
El mayor gotcha del formateo HTML es la distinción entre elementos a nivel de bloque y inline. Los elementos de bloque (<div>, <p>, <section>, <article>, <ul>) fluyen como bloques estilo párrafo; el espacio en blanco entre ellos se renderiza como nada visible, así que un formateador puede libremente añadir saltos de línea e indentación alrededor de ellos. Los elementos inline (<span>, <a>, <strong>, <em>, <code>) fluyen dentro del texto; el espacio en blanco entre ellos SÍ se renderiza. Considera <p>Hello <strong>world</strong>!</p>: el espacio entre «Hello» y la apertura de <strong> es un carácter espacio real que aparecerá entre las palabras. Si un formateador ingenuo rompe esa línea e indenta <strong> en su propia línea, la salida renderizada gana silenciosamente espacio en blanco visible y puede ahora leerse «Hello world» con un espacio extra. Peor, los formateadores que despojan espacio en blanco entre elementos inline pueden fusionar palabras adyacentes: «Helloworld» sin espacio. La opción «preservar etiquetas inline» (activada por defecto aquí) le dice al formateador que mantenga los elementos inline en la misma línea que el texto que los rodea, el comportamiento seguro para la mayoría del HTML del mundo real.
Contenido protegido, pre, textarea, script, style
Cuatro elementos HTML tienen contenido con espacio en blanco significativo que no debe ser reformateado: <pre> muestra el texto exactamente como está escrito incluyendo saltos de línea y espacios; el contenido inicial de <textarea> sobrevive al espacio en blanco; <script> contiene JavaScript cuya semántica depende del espacio en blanco (o al menos donde añadir indent corrompería el fuente); <style> contiene CSS que debería ser reformateado por un formateador CSS-aware, no uno HTML. Los formateadores HTML de producción (Prettier, Tidy, js-beautify) detectan estos elementos y saltan el reformateo de su contenido. Divulgación honesta para esta herramienta: la implementación está hecha a mano en lugar de envolver una biblioteca de producción, y el manejo de inline-vs-bloque + contenido-protegido es conservador pero no perfectamente tolerante a fallos. Si pasas HTML de producción pesado a través de ella y la salida se ve mal dentro de un bloque <pre> o rompe un script, la opción más segura es usar Prettier localmente (es una instalación de un comando: npm install -g prettier, luego prettier --parser html input.html). Para HTML ordinario de plantillas y a nivel de componente, esta herramienta maneja los casos comunes.
Convenciones de atributos y etiquetas auto-cerradas
Los atributos HTML tienen sus propias elecciones de formateo. Las listas cortas de atributos caben en una línea (<a href="/es/about" class="link">); las listas largas envuelven uno por línea, a menudo con el > de cierre en su propia línea. El defecto printWidth: 80 de Prettier dispara el envuelto cuando una línea excedería 80 caracteres, que es la convención moderna. Algunos equipos imponen orden de atributos (class primero, luego id, luego data-*, luego ARIA, luego manejadores de eventos); la mayoría de los formateadores respetan el orden existente en lugar de reordenar, ya que reordenar puede cambiar el comportamiento en casos sutiles (especificidad CSS, lookups de clases JavaScript). Etiquetas auto-cerradas: HTML5 no requiere la barra final en elementos void (<br>, <hr>, <img>, <input>, <meta>, <link>, hay 14 elementos void en total en HTML5), pero XHTML y JSX sí (<br />). Los formateadores o bien preservan la barra si está presente, la quitan (HTML5-clean), o la añaden (XHTML-friendly) según la configuración. Esta herramienta sigue el input, si tu fuente usa <br />, la salida lo mantiene; si usas <br>, la salida mantiene eso.
Casos de uso habituales
- Revisión de código · limpia el HTML antes de compartirlo o revisarlo con compañeros.
- Depuración · un código bien formateado facilita detectar etiquetas que faltan o un anidamiento incorrecto.
- Limpieza de plantillas · reformatea el HTML generado por plantillas o herramientas de build.
- Transmisión entre desarrolladores · haz el código más legible para los demás desarrolladores que trabajan en el mismo proyecto.
- Aprendizaje · entiende mejor la estructura HTML observando los patrones de indentación.
- Inspección de plantillas de email. Los constructores de plantillas de email (Mailchimp, ConvertKit) a menudo producen HTML con estilos inline que es difícil de leer; formatearlo hace visible la estructura antes de enviar cambios.
El pipeline moderno, Prettier al guardar
Para proyectos con un pipeline de build, el defecto 2026 es Prettier corriendo al guardar en tu editor y en cada commit vía un hook de pre-commit. VS Code trae Prettier como formateador HTML por defecto cuando la extensión está instalada; dispáralo con Format Document (Shift+Alt+F en Windows/Linux, Shift+Option+F en macOS) o habilita "editor.formatOnSave": true en los ajustes. Los IDEs JetBrains (WebStorm, IntelliJ) integran Prettier mediante Settings → Languages & Frameworks → JavaScript → Prettier. Los hooks de pre-commit vía Husky + lint-staged corren Prettier en cada archivo en zona de staging antes de permitir el commit, asegurando que ningún HTML sin formatear llegue al repositorio. Los checks de CI corren prettier --check en pull requests para atrapar deriva de formateo. Nada de esto importa para snippets puntuales pegados de otro lugar, eso es exactamente para lo que sirve esta herramienta in-browser. Para trabajo de proyecto a largo plazo, configura Prettier; la herramienta in-browser es la opción sin fricción para todo lo demás.
Privacidad: por qué importa el solo-navegador aquí
HTML a menudo contiene cosas que no quieres que un tercero vea: plantillas de herramientas admin internas, markup de páginas de producto no publicadas, variantes de tests A/B con hipótesis de experimentos reveladas en nombres de clases, plantillas de email con contenido personalizado, dashboards de clientes con PII en placeholders. Los formateadores del lado servidor suben tu HTML a un servicio tercero donde queda en logs. Esta herramienta corre enteramente en tu navegador vía JavaScript, verifícalo en la pestaña Network de DevTools al pulsar Format, o pon la página offline (modo avión) tras cargar y el formateador sigue funcionando. Segura para plantillas de producto no publicadas, páginas admin internas, variantes A/B-test o cualquier HTML que no quieras ver copiado en el disco duro de un desconocido.
Preguntas frecuentes
¿Qué es el embellecimiento HTML?
El embellecimiento HTML reformatea tu código para hacerlo más legible añadiendo indentación y saltos de línea. Facilita enormemente la depuración y la edición, sin modificar el renderizado del HTML en los navegadores.
¿El formateo modifica la apariencia de mi HTML en un navegador?
No. El formateo solo añade espacios e indentación. Los navegadores ignoran los espacios superfluos en HTML. Tu HTML formateado se mostrará idéntico al original.
¿Qué son las etiquetas en línea?
Las etiquetas en línea (como <span>, <a>, <strong>) se insertan en el texto sin crear salto de línea. La opción «preservar las etiquetas en línea» evita que se coloquen en líneas separadas y las mantiene con su contenido.
¿2 espacios, 4 espacios o tabulaciones?
2 espacios es el defecto web moderno, usado por GitHub, Google HTML/CSS Style Guide, Prettier, los ejemplos de estilo WHATWG y la mayoría de los paquetes npm. 4 espacios persiste en las antiguas tradiciones Java / Microsoft / PHP. Las tabulaciones son favorecidas por el kernel Linux y algunos proyectos Go. El argumento es más viejo que la mayoría de los lectores y no se puede ganar; la respuesta práctica es coincidir con lo que tu proyecto ya usa (o la convención prevalente del equipo) y dejar que un formateador lo imponga. Para un snippet puntual sin contexto de proyecto, 2 espacios es el defecto más seguro en 2026.
¿Debería usar esto si ya uso Prettier?
Probablemente no, la integración Prettier de tu editor está haciendo esto al guardar, con plena conciencia del AST HTML y el manejo de contenido protegido que los formateadores de producción requieren. Esta herramienta es para los casos que tu pipeline de build no cubre: HTML pegado desde un inspector de navegador, snippets de email o chat, salida de motor de plantillas que quieres inspeccionar, formateo puntual fuera de cualquier contexto de proyecto. Para trabajo de proyecto a largo plazo, configura Prettier localmente; para trabajo puntual sin fricción, esta herramienta tiene la forma correcta.
¿Mis archivos HTML se suben?
No. El formateo corre enteramente en tu navegador vía JavaScript. El HTML que pegas nunca cruza la red, verifícalo en la pestaña Network de DevTools al pulsar Format, o pon la página offline (modo avión) tras cargar y la herramienta sigue funcionando. Segura para plantillas de producto no publicadas, páginas admin internas, variantes A/B-test, plantillas de email con contenido personalizado, o cualquier HTML que no quieras ver copiado en el disco duro de un desconocido.