Embellecedor de HTML
Convierte HTML desordenado en marcado limpio y legible directamente en tu navegador. Pega o sube tu código, elige un estilo de sangría y obtén HTML perfectamente anidado al instante.
100% Procesamiento del Lado del Cliente
Tu HTML se analiza y embellece completamente en tu navegador. No se sube nada a un servidor.
Vista previa en vivo
La vista previa se renderiza en un marco aislado con los scripts desactivados, así que las etiquetas <script> pegadas se muestran pero nunca se ejecutan.
Índice
¿Qué es un embellecedor de HTML?
Un embellecedor de HTML toma marcado comprimido, minificado o con sangría inconsistente y lo reescribe con una sangría limpia y predecible, de modo que el anidamiento de cada etiqueta sea obvio de un vistazo. Es la forma más rápida de convertir un muro de marcado en algo que realmente puedas leer y depurar.
Esta herramienta analiza tu HTML usando el propio analizador integrado del navegador, el mismo motor que renderiza las páginas web, así que maneja marcado real e imperfecto (etiquetas sin cerrar, mayúsculas mezcladas, comillas faltantes) exactamente como lo haría un navegador, y luego vuelve a aplicar la sangría de forma limpia a partir de esa estructura corregida.
Cómo funciona
- Añade tu HTML: pega el HTML directamente en el editor o sube un archivo .html.
- Elige un estilo de sangría: selecciona 2, 4 u 8 espacios, o una tabulación, según tu formato preferido.
- Revisa al instante: tu HTML embellecido y una vista previa aislada en vivo se actualizan mientras escribes.
- Copia o descarga: copia el resultado al portapapeles o descárgalo como archivo .html.
Características
- Pega HTML o sube un archivo .html
- Embellecimiento instantáneo con sangría de 2, 4, 8 espacios o tabulación
- Conserva exactamente el contenido de <pre>, <script>, <style> y <textarea>
- Mantiene elementos en línea como <a>, <strong> y <em> fluyendo con naturalidad junto al texto circundante
- Vista previa aislada en vivo para confirmar que nada cambió visualmente
- Estadísticas de número de líneas y tamaño de salida
- Copia al portapapeles o descarga como .html
- Procesamiento 100% en el navegador para tu privacidad
Buenas prácticas
- Embellece antes de la revisión de código: una sangría consistente facilita mucho que tus compañeros detecten problemas estructurales en un diff.
- Ajusta el ancho de sangría de tu equipo: configura el tamaño de sangría según la configuración del editor de tu proyecto (por ejemplo, .editorconfig) para que la salida embellecida no genere diffs ruidosos.
- Revisa la vista previa después de embellecer: confirma que la página renderizada se ve igual, sobre todo en texto en línea sensible a los espacios.
- Embellece una vez y luego deja que tu editor se encargue: usa esta herramienta para una limpieza puntual de marcado pegado o heredado, y confía en el formateador de tu editor para las ediciones continuas.
- Ten un minificador a mano para producción: el HTML embellecido es para editar y revisar; minifícalo por separado antes de publicar si el tamaño del archivo importa.
Solución de problemas
El resultado embellecido se ve distinto de lo que pegué
El analizador HTML del navegador corrige automáticamente problemas estructurales como etiquetas sin cerrar o comillas faltantes, así que el resultado refleja la estructura corregida, tal como la renderizaría un navegador real.
El orden o las comillas de los atributos cambiaron
Los atributos se vuelven a serializar en el orden en que fueron analizados, y los atributos booleanos como disabled se escriben sin valor. Esto no afecta el renderizado, pero puede cambiar un diff de texto.
El texto dentro de <pre> o <script> se ve intacto
Eso es intencional: el contenido dentro de <pre>, <script>, <style> y <textarea> se conserva exactamente igual, ya que los espacios en blanco y saltos de línea suelen ser significativos ahí.
Necesito reducir mi HTML en vez de embellecerlo
Esta herramienta solo embellece. Para minificar HTML y reducir el tamaño del archivo, usa el Formateador de HTML, que admite modos de embellecer y minificar.
Casos de uso comunes
- Limpiar HTML extraído o exportado: da formato al marcado obtenido de una exportación de CMS, una plantilla de correo o un scraper web para que vuelva a ser legible.
- Revisión de código y depuración: embellece HTML minificado o comprimido de producción para rastrear un problema de diseño o de marcado.
- Estandarizar un proyecto: da formato a los archivos HTML con un estilo de sangría consistente antes de confirmarlos en un repositorio compartido.
- Preparar fragmentos de HTML para documentación: embellece ejemplos de HTML incrustados para que sean fáciles de leer en un tutorial o un README.
- Aprender la estructura de HTML: embellece el marcado de otra persona para ver cómo está realmente anidada y organizada su página.
Preguntas frecuentes
No. La vista previa se renderiza dentro de un iframe aislado con los scripts desactivados, así que las etiquetas <script> pegadas se muestran pero nunca se ejecutan.
No. Embellecer solo cambia los espacios en blanco, la sangría y la forma de serializar los atributos; la estructura real del marcado y el resultado visible se mantienen iguales.
Usa el analizador integrado del navegador, que corrige automáticamente problemas comunes como etiquetas sin cerrar, así que el resultado siempre es válido, pero no señala ni explica qué se corrigió.
Se conserva exactamente igual, ya que los espacios en blanco dentro de esos elementos suelen ser significativos.
Sí. Elige 2, 4 u 8 espacios, o un carácter de tabulación.
No, esta herramienta solo embellece. Si necesitas minificar HTML para reducir el tamaño del archivo, usa el Formateador de HTML, que tiene un modo Minificar dedicado.
No. Todo ocurre localmente en tu navegador y nada se sube ni se guarda.