OnlineConverTools
Iniciar sesión

Formateador HTML

Formatea tu HTML y hazlo legible

Acerca de Formateador HTML

«Formateador HTML» vuelve a aplicar sangría a una página o un fragmento con js-beautify, el motor de beautifier.io, en tu navegador. Los elementos anidados reciben 2 espacios por nivel, y el contenido de <head> y <body> también recibe sangría. Los bloques <script> y <style> incrustados se formatean como JavaScript y CSS. Los elementos vacíos como <br> o <img> no abren un nivel, los atributos se mantienen tal como se escribieron y el contenido de <pre> y <textarea> se deja exactamente como se escribió, porque ahí los espacios se ven. Las líneas largas no se dividen. No valida el HTML: las etiquetas sin cerrar se formatean sin ningún aviso.

Ejemplo

Un fragmento de una sola línea: el contenido de <pre> conserva sus espacios y el script se formatea.

Entrada

<div><p>Hello <b>world</b></p><pre>  a
   b</pre><script>if(x){go()}</script></div>

Salida

<div>
  <p>Hello <b>world</b></p>
  <pre>  a
   b</pre>
  <script>
    if (x) {
      go()
    }
  </script>
</div>

Cómo formatear código HTML

  1. 1Pega el HTML, un documento completo o un fragmento, en «Entrada».
  2. 2Haz clic en «Formatear».
  3. 3Revisa el marcado con sangría en «Salida».
  4. 4Haz clic en «Copiar» o «Descargar» («formatted.html»).

Formatos y límites

Entrada
Documento o fragmento HTML, como texto
Salida
HTML con sangría, guardado como formatted.html
Sangría
2 espacios por nivel; las líneas en blanco se conservan, como máximo una seguida; sin ajuste de línea
Sin cambios
Contenido de <pre> y <textarea>, valores de los atributos

Dónde se procesa tu HTML

js-beautify se carga en la página la primera vez que haces clic en «Formatear» y funciona en tu dispositivo, así que tu marcado no se sube a nuestro servidor. Si la página muestra un mensaje de error, nuestro registro de errores recibe ese mensaje depurado (sin los pasajes entre comillas, los números largos ni las direcciones), además del nombre de la herramienta y el nombre y la versión de tu navegador.

Preguntas frecuentes

¿Puede el formateo cambiar el aspecto de mi página?

No, en la mayoría de las páginas. Los elementos en línea como <b> se quedan en su línea, y el texto de <pre> y <textarea>, donde se ve cada espacio, se copia tal cual. Se añaden saltos de línea entre elementos de bloque como <div> y <p>, donde no se muestran.

¿Formatea el CSS y el JavaScript incrustados?

Sí. El código dentro de <style> se formatea con las reglas de CSS y el de <script> con las de JavaScript, ambos con un nivel más de sangría que su etiqueta, como en el ejemplo de arriba.

¿Corrige el HTML defectuoso?

No. Aplica sangría a lo que le das sin comprobarlo: no añade una etiqueta de cierre que falte ni muestra ningún error, así que la sangría que sigue puede verse desplazada. Ese desplazamiento puede ayudarte a encontrar el problema.

Consejos y trucos

  • ✓Para reducir el HTML en lugar de expandirlo, usa «Minificador de código» en modo HTML.

Herramientas relacionadas