TanodTools
ES

Formatear HTML

Pega HTML desordenado o minificado y recíbelo con sangría, con los scripts y estilos en línea también ordenados.

Funciona completamente en tu navegador

Sangría
Contenido

Entrada de hasta unos 10 MB. Vuelve a indentar el marcado y nunca lo rechaza, así que no te avisa si el HTML no es válido.

Cómo formatear HTML

  1. Pega tu HTML en el cuadro o presiona Insertar un ejemplo.
  2. Elige la sangría, un largo de línea máximo si quieres uno, y si se deben formatear los <script> y <style> en línea.
  3. La versión ordenada aparece abajo mientras escribes. Cópiala o descárgala como archivo .html.

Indentar HTML de forma segura

Los navegadores reducen la mayoría de los espacios en blanco del HTML, así que una página puede estar escrita en una línea o repartida en mil y verse igual. Las plantillas, la salida de los CMS y los archivos minificados suelen producir un marcado que nadie puede leer. Al formatear HTML, cada elemento de bloque queda en su propia línea y los hijos se indentan bajo sus padres, lo que hace fácil ver etiquetas mal cerradas o fuera de lugar.

Los detalles son donde fallan los formateadores. Los elementos vacíos como <br>, <img> e <input> nunca tienen etiqueta de cierre, así que no deben aumentar la sangría. Los espacios dentro de <pre> y <textarea> se muestran tal como se escribieron, así que no se pueden tocar. Y los elementos en línea comparten la línea con las palabras que los rodean, porque un salto de línea ahí agregaría un espacio visible.

Los scripts y las hojas de estilo incrustados en la página son otro lenguaje. El formateador puede organizarlos con la misma sangría de la página o dejarlos literalmente como están, si prefieres que un diff quede pequeño o si el código ya está minificado a propósito.

Consejos

  • ¿Quieres reducir la hoja de estilos? Minificar y embellecer CSS trabaja con CSS independiente.
  • ¿Vas a convertir un fragmento a Markdown para un README? Usa HTML a Markdown.
  • ¿Revisas un cambio en una plantilla? Formatea la versión anterior y la nueva, y pásalas por Comparar textos.

Preguntas frecuentes

¿Se sube mi HTML?

No. La biblioteca de formato se carga desde este sitio la primera vez que pegas algo, y el marcado se procesa solo en tu navegador.

¿Cambia cómo se ve la página?

Cambia los espacios en blanco entre etiquetas, que los navegadores en general reducen, así que la página debería verse igual. La excepción son los espacios que sí se ven: por eso el texto dentro de <pre> y <textarea> se deja exactamente como está.

¿Me avisa si mi HTML tiene errores?

No. Formatea con tolerancia y no rechaza nada, así que una etiqueta sin cerrar no genera un error; la sangría simplemente sigue lo que encuentra. Para encontrar errores de estructura, pasa la página por un validador.

¿Qué pasa con el JavaScript y el CSS dentro de la página?

De forma predeterminada, el contenido de <script> y <style> se formatea con la misma sangría. Desmarca Formatear script y style en línea para dejarlos exactamente como están.

¿Cómo se manejan las etiquetas en línea como span y a?

Los elementos en línea se quedan en la misma línea que su texto cuando caben, así que una oración que contiene <strong> no se parte en líneas separadas, lo que agregaría espacios visibles.

¿Qué hace Ajustar líneas largas?

Con un largo definido, el texto que pasa del límite se corta en una nueva línea entre palabras. Desactivado deja cada tramo de texto en una sola línea, por largo que sea.