Usa el Embellecedor de HTML gratuito abajo: tus datos nunca salen de tu navegador, todo el trabajo ocurre en tu dispositivo y no se sube a ningún servidor.
Por que el HTML se vuelve ilegible
El HTML se vuelve ilegible de tres formas comunes. Un minificador lo comprime para produccion, un sistema de contenido lo genera sin saltos de linea, o una copia desde una pagina mostrada pierde su estructura. El resultado es un bloque denso donde las etiquetas van juntas, la anidacion es invisible, y encontrar un elemento significa buscar caracter por caracter. Editar eso a mano es lento y propenso a errores, porque es facil cerrar la etiqueta equivocada o romper un nivel de anidacion.
Embellecer devuelve la estructura: cada elemento en su propia linea, los hijos con indentacion bajo sus padres, para que el arbol del documento sea visible. La herramienta de arriba formatea HTML con js-beautify, por completo en tu navegador, e informa cuantas etiquetas encontro, dandote una idea rapida del tamano del documento.
Como usar la herramienta
Pega HTML en la casilla de entrada, elige un tamano de indentacion y pulsa Embellecer. El codigo formateado aparece abajo. Copialo o descargalo como archivo HTML. Usa el boton Cargar ejemplo primero si quieres ver un resultado tipico antes de pegar tu propio codigo.
Si el resultado parece extrano, revisa primero la entrada por etiquetas sin cerrar. Un formateador solo puede indentar la estructura que encuentra, y una etiqueta de cierre que falta desplaza todo lo siguiente un nivel, lo que en si es una pista util sobre donde esta el problema. Arregla la estructura, luego vuelve a formatear.
Que cambia el formato
Formatear cambia los espacios entre etiquetas: saltos de linea e indentacion que muestran la anidacion. No cambia etiquetas, atributos, contenido de texto, ni el orden de los elementos, asi que la pagina mostrada se ve igual. El texto dentro de los elementos se conserva, porque cambiarlo podria cambiar lo que ven los visitantes, sobre todo en elementos donde los espacios importan, como texto preformateado.
Una precaucion: en HTML, el espacio entre elementos en linea puede afectar a la vista, por ejemplo anadiendo un hueco visible entre dos enlaces o botones. Un buen formateador es cuidadoso con el contenido en linea y evita insertar saltos de linea que cambiarian el espacio. Si una pagina formateada muestra un hueco nuevo, revisa los elementos en linea de alrededor antes de suponer un problema mas profundo.
Leer codigo formateado
Un documento formateado se lee como un indice de la pagina: cabecera, navegacion, contenido principal, secciones, pie, cada uno anidado de forma visible dentro del anterior. Ese indice es la forma mas rapida de entender una pagina que no construiste, de encontrar donde empieza y termina una seccion, y de detectar errores de estructura como un div cerrado en el lugar equivocado o un elemento de lista fuera de su lista.
Cuando encuentres un error de estructura, arreglalo en la fuente, no solo en la copia formateada. Si el HTML viene de una plantilla o un sistema de contenido, arregla la plantilla, porque el archivo generado se sobrescribira. Formatear es una lente para encontrar problemas, no un sustituto de arreglar su causa.
Formatear en la practica
Usa el embellecedor cuando depures una pagina, cuando tomes codigo de otra fuente, o cuando prepares un ejemplo para compartir con otra persona. El codigo formateado es mucho mas facil de comentar: puedes senalar una linea, citar un bloque, y estar seguro de que la otra persona ve la misma estructura que tu.
En un proyecto, formatea HTML de forma automatica con tu editor o paso de construccion, y acuerda un tamano de indentacion en todo el equipo. Un codigo uniforme hace legibles las diferencias: un cambio real se muestra en pocas lineas, en vez de quedar enterrado en un archivo completo reformateado a mano. Eso solo ya ahorra mas tiempo de revision que cualquier otro habito.
Limites
El formateador maneja bien HTML estandar. La sintaxis de plantillas de frameworks, como expresiones entre llaves o etiquetas de componentes, puede formatearse de forma imperfecta, porque el formateador no conoce esos lenguajes. Para plantillas de frameworks, usa un formateador hecho para ese framework, y usa esta herramienta para fragmentos de HTML plano y codigo exportado.
Recuerda tambien que formatear no valida. Un documento formateado puede seguir teniendo anidacion invalida, IDs duplicados, o atributos de accesibilidad que faltan. Ejecuta un validador y una revision de accesibilidad despues de formatear, sobre todo para paginas que usaran muchas personas, porque una estructura que puedes leer es solo el primer paso hacia un codigo correcto.