Formatear HTML online
Pega HTML y pulsa Formatear para obtener un marcado limpio y bien indentado, o Minificar para reducirlo. El ejemplo de abajo es un correo de pedido apretado en cinco líneas largas.
Entrada (734 bytes)
Cómo formatear HTML
- Pega tu HTML en el editor de entrada (o deja el ejemplo para ver qué pasa).
- Elige la indentación que usa tu proyecto y dónde deben cortarse las líneas largas.
- Pulsa Formatear. Copia o descarga el resultado desde el panel de salida.
Ejemplos
- Una plantilla de correo apretada. Los editores de emails suelen exportar el marcado en unas pocas líneas larguísimas. Con el ejemplo de arriba, Formatear convierte unos 700 caracteres metidos en cinco líneas en un documento indentado donde las filas de la tabla, el botón y el script se encuentran fácilmente.
- Marcado copiado del navegador. El código sacado de las DevTools o de Ver código fuente conserva su indentación original, a menudo incoherente. Una pasada con 2 espacios hace legible el diff contra tu versión.
- Publicar una página estática. Minificar quita comentarios y espacios antes de subir una landing o de pegar HTML en un campo de un CMS con límite de longitud. Los bytes que aparecen encima de cada panel muestran lo que te has ahorrado.
Preguntas sobre el formateador HTML
¿Se envía mi código a un servidor?
No. El formateo se hace en tu navegador con la librería de código abierto js-beautify, y el minificado con una pequeña función de esta página. No se sube ni se guarda nada.
¿Formatea también el CSS y el JavaScript que hay dentro del HTML?
Sí. El código dentro de las etiquetas <style> y <script> se indenta con los formateadores de CSS y JavaScript de la misma librería. Los atributos style en línea se dejan como están.
¿Formatear puede romper mi página?
Solo cambia los espacios entre etiquetas y dentro de <style> y <script>. El contenido de <pre> y <textarea> nunca se toca. Los espacios entre elementos en línea, como dos etiquetas <span>, pueden importar, y el formateador los mantiene en la misma línea.
¿Qué quita Minificar?
Comentarios, saltos de línea y espacios repetidos, además del espacio entre etiquetas de bloque. No renombra nada, no elimina etiquetas opcionales ni reescribe tu CSS y tu JavaScript, así que la página se ve exactamente igual que antes.
¿Qué diferencia hay entre un formateador HTML y un beautifier de HTML?
En la práctica, ninguna. Los dos nombres describen lo mismo: reindentar el marcado para que cada elemento anidado quede en su línea y a su nivel. Esta página hace eso, y lo contrario (minificar), con un clic.