Formateador HTML Gratis
Este formateador HTML gratis toma marcado minificado o desordenado y lo devuelve con una etiqueta de bloque por línea e indentación consistente, para que veas cómo se anidan los elementos. Las etiquetas inline se mantienen con su texto, los elementos cortos se quedan en una línea, y el contenido de bloques pre, textarea, script y style se deja exactamente como está escrito. Es ideal para desarrolladores y especialistas en marketing que necesitan leer o editar el código fuente de la página.
HTML Beautifier
Generators and Converters
Sobre esta herramienta
Las páginas a menudo se entregan como una sola línea larga, o como marcado indentado por varias herramientas y personas diferentes. Leer eso es lento y los errores se ocultan fácilmente: un div sin cerrar, una etiqueta extraviada o un encabezado en el lugar equivocado. Indentar cada nivel hace que el anidamiento sea visible de un vistazo.
El formateador divide el marcado en etiquetas, comentarios y texto, luego indenta según la profundidad de cada elemento de bloque. Las etiquetas inline como a, strong, em y span se mantienen dentro de su párrafo, y los elementos void como br, img, input y meta no aumentan la profundidad. Puedes elegir dos espacios, cuatro espacios o tabulaciones. El texto dentro de pre y textarea y el código dentro de script y style nunca se reformatean, porque el espacio en blanco adicional allí puede cambiar lo que la página muestra o hace.
Formatea lo que le das y no repara HTML roto, así que una etiqueta sin cerrar se mostrará como una indentación que nunca vuelve. Úsalo antes de editar una plantilla, cuando compares dos versiones de una página, o cuando verifiques el HTML que ha producido un plugin. Nada de lo que pegues se almacena.
Preguntas frecuentes
¿Cambiar el formato afecta cómo se ve la página?
No debería. La herramienta solo añade saltos de línea e indentación entre etiquetas de bloque, y el contenido en pre, textarea, script y style no se toca. Los navegadores colapsan el espacio en blanco entre la mayoría de elementos, así que compara la página antes y después si el espaciado exacto te importa.
¿Puede reparar HTML inválido?
No. Formatea las etiquetas que encuentra y no añade etiquetas de cierre faltantes ni reordena elementos. El anidamiento roto generalmente se muestra como indentación que no vuelve a la izquierda, lo que te ayuda a encontrar el problema, pero aún necesitas corregir el marcado tú mismo.
¿Cuál es la diferencia entre formatear y minificar?
Son opuestos. Un formateador añade saltos de línea e indentación para que las personas puedan leer el código. Un minificador los elimina para que el archivo sea más pequeño de descargar. Mantén la versión formateada mientras trabajas y publica una copia minificada.
¿Qué indentación debo elegir?
Usa la que tu proyecto ya utiliza. Dos espacios mantiene el marcado profundo estrecho, cuatro espacios es común en muchas guías de estilo, y las tabulaciones permiten que cada persona establezca su propio ancho en su editor. La elección no cambia cómo funciona la página.