HTML Formatter
HTML Formatter — se ejecuta en el navegador. No se guardan datos.
Sangría HTML
Aplica una sangría aproximada según las etiquetas.
Cómo usar
- Pega marcado de una línea o desordenado en HTML.
- Pulsa Formatear y revisa Resultado, indentado dos espacios por nivel de etiqueta.
- Los elementos void y los comentarios no aumentan la profundidad; se quedan en el nivel de línea actual.
- Copiar resultado toma el marcado limpio.
- Restablecer vacía entrada y resultado juntos.
Conceptos clave
El formateador HTML parte las etiquetas en tokens, sube la sangría en las de apertura y la baja en las de cierre. Imágenes, saltos de línea, inputs, etiquetas autocerradas, comentarios y declaraciones se tratan como sin hijos, así que no suben la profundidad. No es un parser HTML completo, así que las etiquetas desparejadas aún reciben saltos aproximados. Sirve para desplegar fragmentos de componentes minificados. Los nodos de texto se recortan y alinean a la profundidad actual, así que las notas entre etiquetas también van en su propia línea.
El espacio entre etiquetas se comprime y se vuelve a partir, así que los espacios intencionados entre elementos en línea pueden encogerse. Los atributos no se ordenan y las comillas no se normalizan: solo sangría. La conversión es en el navegador; el marcado no se envía a un servidor. Es un buen paso antes de un validador, o para ordenar tablas exportadas de Excel. La salida copiada se lee mejor en un editor y se combina con la vista previa.
Ejemplo
Formatea <div><p>hello</p></div>: la línea tras abrir div es p con dos espacios, luego hello un nivel más adentro. Una etiqueta void como img no empuja al siguiente hermano más adentro. Copia el resultado a tu editor.
Relacionado: Formateador XML · Validador HTML · Editor HTML
Preguntas frecuentes
¿El formateador HTML indenta marcado no válido?
Sí. No se bloquea por errores; solo alinea líneas por tokens de etiqueta, así que los fragmentos sin cerrar siguen produciendo salida.
¿Cómo se tratan las etiquetas void como img?
Los elementos void, las autocerradas y los comentarios se tratan como sin hijos, así que la profundidad del siguiente hermano no sube.
¿Pueden desaparecer espacios en línea tras formatear?
El espacio entre etiquetas se comprime primero, así que los huecos entre elementos en línea pueden encogerse. Revisa el marcado sensible al diseño.
¿Se ordenan los atributos alfabéticamente?
No. Solo se añaden sangría y saltos de línea. El orden y los valores de atributos se quedan.
¿Se envía el marcado a un servidor?
No. Formatear y copiar son solo en el navegador. No hay botón de subida.
¿Qué campo usa Copiar resultado?
Solo el campo de resultado de solo lectura. Si la entrada está vacía y aún no has formateado, no hay nada que copiar.
Última revisión: 2026-09-04