Beautify HTML code Instantáneamente para contenido web limpio, legible y bien estructurado.
Introducción
El HTML que se toma de un sitio en vivo, se exporta desde un constructor de páginas o se copia de una plantilla de correo suele venir comprimido en un puñado de líneas, sin ninguna sangría — técnicamente válido, pero muy difícil de leer para una persona. Embellecerlo da vuelta esa situación: reconstruye los saltos de línea y la sangría que dejan ver cómo se anidan las etiquetas, sin cambiar nada de lo que hace el marcado. Eso importa siempre que la idea sea leer o estudiar el HTML de verdad, y no solo que un navegador lo muestre — entender cómo está armada una página, revisar el código que entregó un alumno o averiguar por qué algo no se ve como debería.
Cómo esta herramienta formatea tu código
Al pegar el HTML y hacer clic en “Embellecer”, el código se reconstruye con una sangría de dos espacios, un nivel de anidación por etiqueta, de modo que se ve de un vistazo qué elementos están dentro de cuáles. Vale la pena conocer algunos detalles sobre cómo trata el HTML del mundo real:
- Los comentarios se conservan, no se eliminan. Los comentarios de HTML, incluidos los comentarios condicionales y los bloques CDATA, pasan sin cambios — útil si tu código lleva créditos, notas TODO o un comentario de licencia que necesitas mantener.
- Los bloques
<script>y<style>se reubican, no se reescriben. Su sangría se ajusta al lugar que ocupan dentro del HTML que los rodea, pero el JavaScript o el CSS que contienen no se reformatea por separado. Si el código dentro de un bloque de script o de estilo ya venía desordenado, sigue desordenado — lo único que se ordena es su posición respecto del HTML de alrededor. Usa JavaScript Beautifier o CSS Beautifier directamente sobre ese contenido si necesita su propio formateo.
Lo que conviene saber antes de usarla
Esta herramienta maneja bien el HTML típico y bien formado. Hay tres cosas puntuales que conviene revisar antes de confiar en el resultado con marcado menos común:
- Algunos elementos HTML5 de cierre automático no se reconocen como tales. La lista de etiquetas que esta herramienta considera que no necesitan etiqueta de cierre, comparada con la lista de elementos vacíos de la especificación HTML actual, deja afuera algunas de las más nuevas — en concreto
<source>(que se usa dentro de<video>,<audio>y<picture>),<track>(dentro de<video>, para los subtítulos) y<col>(dentro de<colgroup>, en las tablas). Si tu HTML usa alguna de ellas escrita de la forma habitual — sin una barra final explícita/>—, todo lo que venga después puede quedar con un nivel de sangría de más, porque el formateador sigue esperando una etiqueta de cierre que nunca llega. Escribirlas con la barra de cierre explícita (<source />) evita el problema. - No repara HTML roto. Si una etiqueta de tu código original nunca se cierra, o si hay etiquetas mal emparejadas, esta herramienta reformatea la estructura que encuentra sin fallar, pero tampoco inserta la etiqueta de cierre que falta ni corrige el problema de fondo. Al resultado le seguirá faltando lo mismo que le faltaba a la entrada — es un formateador, no un validador.
- Las etiquetas en línea que aparecen a mitad de una oración pueden quedar en su propio renglón. Etiquetas como
<strong>,<em>o<a>dentro de un párrafo de texto corrido pueden terminar separadas de las palabras que las rodean, porque esta herramienta no las trata como etiquetas que haya que “mantener en línea”, como sí hacen otros formateadores. Eso no cambia cómo se muestra el HTML en el navegador — el espacio en blanco entre etiquetas se colapsa igual —, pero conviene esperarlo si estás formateando contenido con mucho texto y muchas etiquetas de estilo en línea.
Nada de esto cambia lo que hace realmente el HTML cuando un navegador lo muestra — todo tiene que ver con cómo se ve el código cuando una persona lo lee directamente, no con cómo se despliega una página.
Cuándo es esta la herramienta indicada
- Leer el HTML de una página real para aprender de él. Ver el código fuente de un sitio o inspeccionarlo con las herramientas de desarrollo del navegador suele mostrar marcado comprimido o generado automáticamente, con poca estructura — embellecerlo permite estudiar de verdad cómo está construida una página, un uso genuino de alfabetización digital que va más allá de dar formato al código propio.
- Revisar la tarea de HTML de un alumno. El código que pasa de un editor a otro o que se exporta desde un constructor de páginas a veces pierde su formato original; embellecerlo antes de leerlo agiliza la revisión y los comentarios.
- Depurar marcado que no se muestra bien. En un HTML denso y sin formato cuesta más detectar una etiqueta faltante o mal ubicada — darle formato primero suele hacer que el problema estructural salte a la vista, teniendo en cuenta que esta herramienta no va a arreglarte una etiqueta realmente rota.
Si tu HTML usa mucho las etiquetas <source>, <track> o <col> sin una barra de cierre explícita, revisa con atención la sangría que queda después de esas etiquetas en el resultado — mira la limitación de más arriba. Para el marcado habitual de una página, esta herramienta es una forma rápida de obtener una estructura legible sin instalar un editor ni una extensión.
Ejemplo
A un alumno le piden inspeccionar la portada de un sitio web real y describir cómo está estructurada su navegación principal dentro del HTML. Al ver el código fuente de la página aparece una sola línea densa y minificada, sin ningún espacio. Al pegarla en esta herramienta y embellecerla, se convierte en marcado bien sangrado, con lo que por fin se puede ver qué elementos <nav>, <ul> y <li> están anidados dentro de cuáles y cómo se relaciona la navegación con el resto de la página — justo el tipo de lectura estructural que resulta mucho más difícil sobre una única línea sin formato.
Preguntas frecuentes
¿Embellecer cambia la forma en que se muestra el HTML?
No. Solo cambian los espacios y los saltos de línea — las etiquetas, los atributos y el contenido siguen iguales, así que la página se ve idéntica en el navegador en ambos casos.
¿Se eliminan los comentarios de HTML?
No — los comentarios, incluidos los condicionales, se conservan tal cual en el resultado.
¿También se le da formato al CSS o al JavaScript que hay dentro de mi HTML?
No por separado. Los bloques <script> y <style> se reubican para que coincidan con la sangría del HTML que los rodea, pero el código que contienen no se reformatea por su cuenta. Usa JavaScript Beautifier o CSS Beautifier directamente sobre ese contenido si necesita su propio formateo.
¿Arregla las etiquetas rotas o sin cerrar?
No. Esta herramienta da formato a la estructura que encuentra; no valida el HTML ni inserta las etiquetas de cierre que falten.
¿Maneja bien las etiquetas <source>, <track> y <col>?
No de forma confiable cuando se escriben sin una barra de cierre explícita — el contenido posterior puede quedar con un nivel de sangría de más. Escribirlas como <source /> evita esto. Mira “Lo que conviene saber antes de usarla” más arriba.
¿Se guarda mi código en algún lado?
No. El HTML que pegas se procesa para producir el resultado con formato y no se almacena después; solo queda registrado que se usó la herramienta, no el código en sí.
¿Qué herramientas relacionadas puedo usar?
Usa JavaScript Beautifier o CSS Beautifier para dar formato al JavaScript o al CSS que hay dentro de tu HTML, o HTML Minifier para volver a comprimir el HTML terminado y dejarlo listo para producción.
