¿Por qué no se vuelve a sangrar el contenido de y ?

Los espacios dentro de y se muestran tal como están escritos, y cambiar la sangría dentro de o podría alterar código o cadenas. Esos bloques se conservan literalmente.

Formateador HTML - Herramienta online gratuita

Características

Sangrado automático de etiquetas HTML

Sangrado personalizable

Conservar o eliminar comentarios

Resaltado de sintaxis

Cómo Usar

1. Pega tu código HTML en el cuadro de entrada a la izquierda.

2. Haz clic en Formatear para embellecerlo con la indentación adecuada.

3. Haz clic en Minificar para eliminar espacios en blanco.

4. Copia o descarga el resultado del panel derecho.

Sobre esta herramienta

El HTML copiado de un navegador, un CMS o una compilación minificada suele llegar como una línea ilegible. Este formateador lo vuelve a sangrar para que cada elemento anidado quede un nivel por debajo de su padre, lo que hace fácil ver la estructura, las etiquetas de cierre que faltan y los elementos mal colocados. Reconoce los elementos vacíos como <br>, <img> e <input>, que nunca llevan etiqueta de cierre, y deja el contenido de <pre>, <textarea>, <script> y <style> exactamente como está, porque dentro de ellos los espacios tienen significado. Elige dos espacios, cuatro espacios o tabulaciones y copia o descarga el resultado. Minificar hace lo contrario: elimina comentarios y reduce los espacios entre etiquetas para aligerar la página en producción.

Preguntas Frecuentes

¿Formatear cambiará el aspecto de mi página?

En la mayoría de los casos no. Los navegadores ignoran los espacios entre elementos de bloque. Entre elementos en línea, como dos enlaces o span seguidos, añadir o quitar un salto de línea puede cambiar la separación en un espacio, así que revisa el marcado con muchos elementos en línea después de formatear.

¿Por qué no se vuelve a sangrar el contenido de <pre> y <script>?

Los espacios dentro de <pre> y <textarea> se muestran tal como están escritos, y cambiar la sangría dentro de <script> o <style> podría alterar código o cadenas. Esos bloques se conservan literalmente.

¿El formateador corrige HTML no válido?

No repara ni valida el marcado. Sangra lo que recibe, lo que a menudo deja a la vista problemas como etiquetas sin cerrar. Usa el validador del W3C para comprobar la conformidad.

¿Qué elimina Minificar?

Elimina los comentarios HTML y los espacios innecesarios entre etiquetas. Se conserva el contenido que depende de los espacios, como el texto dentro de <pre>. En sitios en producción, la compresión del servidor con gzip o Brotli ahorra más que minificar por sí solo.

¿Puedo formatear Vue, Angular o sintaxis de plantillas?

Las expresiones de plantilla como {{ name }} se conservan como texto y las etiquetas de componentes se sangran como elementos normales. Las directivas complejas con corchetes angulares dentro de los valores de atributos pueden confundir a un formateador HTML sencillo, así que revisa el resultado.