Da formato al HTML en un marcado legible y con sangría, sin ejecutarlo.
Qué hace
HTML Formatter reescribe el código fuente HTML para que su estructura sea más fácil de leer: los elementos anidados reciben sangría y los atributos se escriben de forma coherente. El resultado es texto sin formato. Nada de tu HTML se ejecuta, se descarga ni se muestra en una vista previa: los scripts no se ejecutan, y las imágenes, las hojas de estilo, los marcos y los enlaces no se cargan.
Úsalo cuando el HTML llega en una sola línea larga, o cuando un marcado editado a mano tiene una sangría irregular y quieres ver cómo se anidan los elementos. Es un formateador, no una herramienta de reparación: nunca corrige ni elimina nada, y rechaza el marcado que no puede leer como bien formado.
Qué admite
- Una página HTML entera o un fragmento, como unos pocos elementos o solo texto. Los comentarios, los atributos y el texto en otros idiomas se conservan, y también los doctypes, salvo los pequeños cambios que se indican en «Nombres y comillas».
- El resultado es siempre código fuente en texto. No hay vista previa, así que nada de tu HTML se ejecuta ni se carga.
- El JavaScript dentro de los elementos script y el CSS dentro de los elementos style también se ordenan, pero nunca se ejecutan, se aplican ni se minifican. Si ese código tiene un error de sintaxis, o si el elemento contiene otra cosa, como datos JSON (<script type="application/ld+json">), una plantilla o TypeScript, su contenido se conserva exactamente como lo escribiste.
- El contenido de los elementos pre y textarea se conserva tal como lo escribiste.
- Los valores de los atributos, los manejadores de eventos en línea como onclick, los comentarios y las referencias de caracteres como & y © se dejan como están.
- Sangría de 2 o 4 espacios, nunca tabuladores. Los saltos de línea del resultado son siempre del mismo tipo, sea cual sea el de tu texto.
Conviene saber
- El HTML mal formado se rechaza, no se repara. Una etiqueta de cierre sin pareja, etiquetas de cierre en el orden equivocado, una etiqueta o un valor de atributo que nunca termina y una referencia de carácter que HTML no define, como &foo;, detienen la herramienta en el problema. Nunca corrige, completa ni elimina marcado por ti.
- Solo formatea. No comprueba tu HTML con el estándar HTML, no lo optimiza y no elimina ni reordena nada. Además de la sangría y los saltos de línea, solo hace los cambios que se enumeran a continuación.
- Espacios: una serie de espacios y saltos de línea en el texto se reduce a un solo espacio o salto de línea, salvo dentro de pre y textarea. Donde elementos en línea o texto se tocan sin espacio entre ellos, no se añade ninguno. La herramienta da por hecha la visualización estándar de cada elemento, por ejemplo que div, p y li son bloques y span, a y em son en línea. Si tu propio CSS lo cambia, un salto de línea que la herramienta añada entre dos elementos puede alterar el espaciado en la página.
- Nombres y comillas: los nombres de los elementos se escriben en minúsculas (DIV pasa a div), y también los nombres de atributos estándar, como CLASS. Otros nombres de atributos, como onClick, conservan las letras que escribiste. Los valores de atributos escritos sin comillas reciben comillas. En un doctype, el nombre html se escribe en minúsculas (<!DOCTYPE HTML> pasa a <!DOCTYPE html>), y en un doctype antiguo con identificadores public o system cada serie de espacios en blanco pasa a ser un único espacio. <!DOCTYPE html> y <!doctype html> se quedan exactamente como se escribieron.
- Los elementos vacíos, como br, img e input, se escriben con una barra de cierre, por ejemplo <br />, y las etiquetas de cierre que HTML permite omitir, como </li> y </p>, se escriben completas.
- Un salto de línea justo después de la etiqueta de apertura de pre o textarea puede añadirse o quitarse. HTML ignora ese primer salto de línea, así que el contenido es el mismo.
- El HTML minificado se reparte donde es seguro hacerlo: los elementos de bloque, como div, p, ul y li, empiezan cada uno en su propia línea. Los elementos en línea y el texto que se tocan se quedan juntos, así que una serie de ellos puede seguir en una sola línea larga.
- Un > todavía puede quedar al principio de una línea, pero solo en un caso: una serie larga de elementos en línea o de texto sin espacio entre ellos, que la herramienta no puede romper en un espacio. El salto va entonces dentro de una etiqueta, lo que deja el > de una etiqueta al principio de la línea siguiente. El texto sigue siendo HTML normal y significa lo mismo.
- Si la sangría hiciera el resultado mucho mayor que el límite de tamaño, la herramienta se detiene antes de formatear. Usa 2 espacios o menos anidamiento.
Cómo usarla
- Pega o escribe tu HTML en el cuadro de entrada. Puede ser una página entera o solo unos pocos elementos. No se ejecuta nada mientras escribes.
- Elige la sangría («2 espacios» o «4 espacios») y pulsa «Formatear».
- Lee el resultado junto a tu entrada. Se muestra como texto, nunca como una página renderizada. Si tu HTML se rechaza, el mensaje indica dónde está el problema.
- Pulsa «Copiar» para poner el resultado en el portapapeles, o «Descargar» para guardarlo como formatted.html.
Ejemplos
Formatear un marcado con saltos de línea
Pega este HTML y pulsa «Formatear» con «2 espacios» seleccionado. El nombre de etiqueta DIV se escribe en minúsculas, el valor card, que no tenía comillas, las recibe, la serie de espacios del párrafo pasa a ser un solo espacio y la etiqueta img recibe una barra de cierre. Tus saltos de línea entre elementos se conservan, así que cada elemento queda en su propia línea, con sangría.
<DIV class=card>
<h1>Title</h1>
<p>Some text with <em>emphasis</em>.</p>
<img src=logo.png>
</DIV><div class="card">
<h1>Title</h1>
<p>Some text with <em>emphasis</em>.</p>
<img src="logo.png" />
</div>
Una etiqueta de cierre sin nada que cerrar
El </span> de cierre no tiene un <span> de apertura antes. La herramienta no adivina ni repara el marcado, así que se niega, indica dónde está el problema y no muestra ningún resultado.
<div>
<p>Hello</p>
</span>El HTML no está bien formado en este punto. Por ejemplo: una etiqueta de cierre sin su etiqueta de apertura, una etiqueta o un valor de atributo que nunca termina, o una referencia de carácter desconocida, como &foo;. El HTML nunca se corrige automáticamente, así que corrige el marcado y ejecuta la acción de nuevo.
Línea 3, columna 1
Etiquetas sin nada entre ellas
Esta lista no tiene espacios ni saltos de línea entre sus etiquetas. Los elementos de bloque, como ul y li, pueden empezar cada uno en su propia línea sin cambiar el aspecto de la página, así que la herramienta da a cada uno una línea propia, con sangría. Los elementos en línea, como em o a, son distintos: un espacio entre dos de ellos puede verse en la página, así que la herramienta nunca lo añade.
<ul><li>Tea</li><li>Coffee</li></ul><ul>
<li>Tea</li>
<li>Coffee</li>
</ul>
Scripts y texto preformateado
El contenido de pre se conserva exactamente como lo escribiste, así que la sangría de «line 2» no cambia. El JavaScript dentro de script se ordena como código: «let a=1;» pasa a ser «let a = 1;» y recibe sangría bajo su etiqueta. El CSS dentro de style se ordena de la misma forma, y no se ejecuta ni se aplica nada.
<div>
<pre>
line 1
line 2</pre>
<script>
let a=1;
</script>
</div><div>
<pre>
line 1
line 2</pre>
<script>
let a = 1;
</script>
</div>
Límites y privacidad
Límites de tamaño
- Entrada: hasta 2.000.000 bytes de texto en UTF-8 (unos 2 MB). Las letras acentuadas y los emojis ocupan más de un byte cada uno. Una entrada mayor se rechaza.
- Resultado: también hasta 2.000.000 bytes. Si el resultado completo fuera mayor, la herramienta muestra solo una vista previa incompleta de los primeros 100.000 bytes, y esa vista previa no se puede copiar ni descargar.
- Anidamiento: hasta 128 niveles de elementos (una raíz es el nivel 1; los elementos con autocierre y los elementos vacíos también cuentan) dentro de otros. Un HTML más profundo se rechaza porque supera lo que procesa la herramienta.
- Tiempo: una ejecución que tarda más que su límite de tiempo se detiene. Prueba con una entrada más pequeña.
Tu privacidad
El texto que escribes o pegas, o abres desde un archivo local, se procesa localmente en tu navegador, en un Web Worker dedicado. Nunca se sube ni se envía al servidor (un archivo que abres se lee solo en tu navegador), y no se escribe en el almacenamiento, en cookies ni en la barra de direcciones.
«Copiar» pone el resultado en el portapapeles y «Descargar» lo guarda como archivo, pero solo cuando pulsas el botón. El archivo se crea en tu navegador, así que no se sube nada.
Para conocer todos los detalles, consulta la Política de privacidad
Herramientas y páginas relacionadas
Tu texto se queda en la página cuando cambias de herramienta en la misma pestaña, así que puedes probar el mismo texto en otra. Recargar o cerrar la pestaña lo termina.