Cómo usar: Formateador HTML
- Pega tu HTML en el cuadro HTML de entrada, arrastra un archivo
.htmlsobre él o haz clic en Ejemplo. - En el modo Embellecer, elige la sangría (2 espacios, 4 espacios o tabulaciones), el ancho de ajuste de línea y cómo se distribuirán los atributos.
- El resultado formateado se actualiza mientras escribes. Usa Copiar o Descargar para guardarlo.
- ¿Necesitas lo contrario? Cambia a Minificar para eliminar comentarios y compactar los espacios en blanco antes de publicar.
¿Qué es un formateador de HTML?
Un formateador (o embellecedor) de HTML reescribe el código con un elemento por línea y una sangría coherente que refleja la estructura del documento, de modo que puedes ver de un vistazo dónde se cierra cada <div>. Es la forma más rápida de leer el código fuente de una exportación de un constructor de páginas, una plantilla de correo, un fragmento de un CMS o HTML que se minificó para producción. Esta herramienta usa el motor de código abierto js-beautify, el mismo formateador que usa el formateo HTML integrado de VS Code, y también formatea el CSS dentro de <style> y el JavaScript dentro de las etiquetas <script>.
Opciones de embellecimiento explicadas
| Opción | Qué hace |
|---|---|
| Sangría | Dos espacios es la convención más habitual en HTML; las tabulaciones permiten que cada desarrollador elija su propio ancho visual. |
| Ajuste | Parte las líneas largas de texto y atributos aproximadamente en la columna elegida. «Desactivado» mantiene el contenido de cada elemento en una sola línea. |
| Atributos | «Uno por línea» coloca cada atributo en su propia línea cuando una etiqueta tiene varios; resulta útil con etiquetas largas de Tailwind o Alpine.js y para diferencias limpias en git. |
| Indentar <head> & <body> | Aplica un nivel extra de sangría a los hijos de <head> y <body> en lugar de dejarlos alineados con <html>. |
| Conservar líneas en blanco | Mantiene (como máximo) una línea en blanco intencionada entre bloques en lugar de eliminarlas todas. |
Los elementos en línea, como <a>, <strong> y <span>, permanecen dentro de su línea de texto, y el contenido de <pre> y <textarea> nunca se modifica, porque cambiar los espacios allí alteraría lo que ve el usuario.
Cómo funciona el minificador de HTML seguro
Los espacios en blanco en HTML no siempre son irrelevantes: <b>Hola</b> <i>mundo</i> muestra un espacio visible entre las palabras. Por eso el minificador adopta un enfoque conservador:
- Elimina los comentarios, excepto los comentarios condicionales de Internet Explorer (marca Conservar comentarios para mantenerlos todos).
- Reduce las secuencias de espacios, tabulaciones y saltos de línea del texto a un solo espacio, que es exactamente lo que muestra el navegador.
- Elimina los espacios en blanco solo donde nunca se renderizan: dentro de
<head>, alrededor de<html>,<body>, filas de tablas y contenedores de listas. - Ordena las etiquetas (
<p class = "a">pasa a<p class="a">) sin cambiar los valores de los atributos. - Deja intactos
<pre>,<textarea>y los scripts de plantilla, minifica el CSS en línea, compacta el JSON-LD y minifica el JavaScript en línea solo si pasa una comprobación de sintaxis.
El ahorro típico está entre el 10 % y el 25 % antes de gzip. Para un flujo de compilación completo, herramientas como html-minifier-terser pueden ir más lejos (eliminando etiquetas o comillas opcionales), a costa de transformaciones más arriesgadas. Para reducir hojas de estilo, usa el Minificador CSS; para scripts, el Formateador JavaScript tiene su propio modo de minificación.
Problemas habituales
La sangría se ve mal después de una etiqueta. Normalmente se debe a un elemento sin cerrar (falta un </div>): el formateador sangra fielmente todo lo que va después un nivel más, lo que facilita detectar el error. La sintaxis de plantillas como Handlebars, Liquid, Jinja o los bloques PHP se detecta y se conserva, pero la lógica compleja de plantillas dentro de los atributos todavía puede producir saltos de línea extraños.
También se busca como: embellecer html, formatear html, beautifier html, minificar html, indentar html, minificador html, ordenar código html, html prettifier.
Herramientas que combinan con: Formateador HTML
- Formateador de CSS — Convierte una hoja de estilos minificada en CSS legible, con una propiedad por línea y bloques @media correctamente anidados.
- Codificar entidades HTML — Escapa < > & " para mostrar texto de forma segura en HTML, convierte tildes y símbolos en entidades con nombre o numéricas, o decodifica HTML con entidades a texto plano.
- HTML a Markdown — Pega HTML — o copia texto enriquecido directamente de una página web, un Google Doc o un correo — y obtén un Markdown ordenado que puedes llevar a un README, una wiki o un sitio estático.
- Markdown a HTML — Escribe o pega Markdown y obtén HTML limpio al instante, con vista previa saneada en vivo, tablas GFM, listas de tareas y bloques de código delimitados.
Preguntas frecuentes
¿Se sube mi HTML a algún sitio?
¿Embellecer el código cambiará el aspecto de mi página?
display:inline-block; el contenido de <pre> y <textarea> nunca se modifica.¿Cuál es la diferencia entre formatear y validar HTML?
¿Formatea también el CSS y el JavaScript dentro del HTML?
<style> y <script> se formatea con la misma configuración de sangría. Los tipos de script JSON y de plantilla se mantienen tal cual.¿Cuánto se reduce el HTML minificado?
¿Puedo formatear plantillas de Vue, Angular o Svelte?
v-if, @click o [prop]. Los componentes de un solo archivo con <script setup> y TypeScript se formatean como HTML más script.