Guía de uso
Con esta herramienta puedes formatear HTML minificado o mal indentado y convertirlo en un árbol limpio, con dos espacios por nivel. Los elementos de bloque empiezan en su propia línea y los elementos en línea, como enlaces, strong o span, se quedan dentro de la frase a la que pertenecen, así que el aspecto de la página no cambia. Los bloques <script> y <style> también se ordenan.
Cómo formatear HTML
- Pega el código: una página completa, una plantilla de correo o un único componente.
- Dale formato con el botón de ejecutar; también sirve el atajo Ctrl + Enter.
- Recorre la sangría para entender la estructura y localizar cierres fuera de sitio.
- Copia el resultado a tu editor o descárgalo como archivo de texto.
Reglas de sangría que aplica
- Bloques en su línea:
div,section,ul,tabley similares abren línea y su contenido baja un nivel. - Elementos en línea junto al texto: un enlace o una negrita nunca se separan de la frase, para no introducir espacios nuevos.
- Bloques cortos en una sola línea: si un bloque solo contiene texto y elementos en línea y no supera los 100 caracteres, se queda entero, como
<li><a href="/">Inicio</a></li>. Los párrafos largos se dividen en apertura, texto y cierre. - Código incrustado: el contenido de
scriptse formatea como JavaScript, el destylecomo CSS y el JSON-LD como JSON indentado. preytextareaintactos: sus espacios se ven en pantalla, por eso se respetan al carácter.- Etiquetas ordenadas: los espacios de sobra dentro de una etiqueta desaparecen, pero los valores entre comillas no se tocan.
Ejemplo: la cabecera de una tienda
Partimos de una sola línea: <header><h1>Mi tienda</h1><nav><a href="/">Inicio</a> <a href="/ofertas">Ofertas</a></nav></header>. El resultado tiene cuatro líneas:
| Sangría | Línea |
|---|---|
| 0 | <header> |
| 2 espacios | <h1>Mi tienda</h1> |
| 2 espacios | <nav><a href="/">Inicio</a> <a href="/ofertas">Ofertas</a></nav> |
| 0 | </header> |
Fíjate en la tercera fila: los dos enlaces siguen juntos y con el espacio que los separa, porque son elementos en línea y el bloque es corto. Las etiquetas de cierre opcional, como li, p o td, se consideran cerradas cuando se abre un hermano, de modo que una lista escrita sin </li> no va desplazándose hacia la derecha.
Detectar etiquetas sin cerrar
La herramienta no añade cierres que falten, pero los delata. Si formateas <main><article><h2>Título</h2><div class="cuerpo"><p>Texto</article></main>, verás que </article> aparece justo después de "Texto" y la sangría retrocede tres niveles de golpe, sin ninguna línea </p> o </div> entre medias. Ese hueco indica que el div nunca se cerró. Regla práctica: si la sangría retrocede más de un nivel en un solo paso y los elementos saltados no son de cierre opcional, como li, p o td, hay una etiqueta sin cerrar justo encima.
Otra ventaja: si formateas dos versiones de una plantilla con las mismas reglas y las pasas por comparar textos, las diferencias de sangría desaparecen y solo ves los cambios reales.
Lo que la herramienta no hace
- No valida el HTML ni corrige anidaciones incorrectas.
- No corta las líneas largas a un ancho fijo.
- No reordena atributos ni cambia mayúsculas y minúsculas en las etiquetas.
- No permite elegir otra sangría: siempre son dos espacios.
Privacidad y herramientas relacionadas
El formateo se ejecuta con JavaScript en tu navegador; el código no se envía al servidor y la página solo suma un contador de uso anónimo. Cuando quieras publicar, haz el camino inverso con minificar HTML. Para hojas de estilo y scripts sueltos tienes formatear CSS y formatear JavaScript, y el resto en herramientas para desarrolladores.