Formateador HTML

Cómo formatear HTML

1. Pega tu HTML o haz clic en Abrir un archivo para cargar un archivo .html o .htm (hasta 10 MB).
2. Elige la Indentación (2 espacios, 4 espacios o una tabulación) y si quieres Ajustar líneas a 80 o 120 caracteres.
3. Marca Indentar y si quieres indentarlos dentro de <html>, y Eliminar comentarios para quitar los comentarios <!-- … -->.
4. Haz clic en Formatear (embellecer) para obtener código legible, o en Minificar para obtener la versión segura más pequeña.
5. Copia o descarga el resultado. La línea de estado muestra el tamaño antes y después.

El resultado se muestra como texto plano en el cuadro de salida. Tu HTML nunca se renderiza ni se ejecuta en esta página, así que los scripts del código que pegas no pueden hacer nada. Nada se sube a ningún servidor.

Embellecer: HTML legible y con una indentación coherente

Formatear (embellecer) usa js-beautify, el formateador que hay detrás de muchos editores de código:

• los elementos de bloque van en su propia línea, indentados según su profundidad de anidamiento, mientras que los elementos en línea como <a>, <b> o <span> se quedan dentro del texto;
• el contenido de <script> y <style> se formatea como JavaScript y CSS;
• <pre> y <textarea> se dejan exactamente como están escritos, ya que sus espacios son visibles;
• las líneas en blanco consecutivas se reducen a una;
• con un ancho de ajuste, las líneas de texto largas y las listas largas de atributos se dividen.

Embellecer no repara el marcado roto: un <div> sin cerrar sigue sin cerrar, y la indentación que viene después muestra dónde está el problema.

Minificar: HTML más ligero sin cambiar la página

Minificar sigue un enfoque deliberadamente prudente:

• las secuencias de espacios, tabulaciones y saltos de línea en el texto se reducen a un solo espacio, tal como las muestra el navegador;
• se eliminan los espacios junto a los elementos de bloque y de la cabecera (<div>, <p>, <li>, <td>, <meta>, <br>…), porque nunca se muestran;
• se conserva un único espacio entre elementos en línea, para que <b>big</b> <i>world</i> no se convierta en «bigworld»;
• los comentarios se eliminan cuando Eliminar comentarios está marcado, salvo los comentarios condicionales (<!--[if IE]>) y los que empiezan por <!--!;
• el contenido de <script>, <style>, <pre> y <textarea> nunca se toca, y los valores de los atributos se conservan tal cual, comillas incluidas.

No elimina las etiquetas de cierre opcionales, no reescribe atributos ni comprime el JavaScript y el CSS incrustados: esas optimizaciones ahorran algo más, pero pueden romper páginas. En la mayoría de las páginas, la compresión HTTP (gzip o Brotli) ahorra mucho más que cualquier minificador, así que minificar resulta más útil para HTML incrustado en correos electrónicos, plantillas o cadenas de JavaScript.