Formateador de HTML
Indenta y ordena HTML minificado o desordenado sin cambiar cómo se ve la página, y detecta errores habituales del marcado.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Mi página</title>
<style>
body{font-family:system-ui}
.card{padding:1rem}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="/">Inicio</a></li>
<li><a href="/blog" class="active">Blog</a></li>
</ul>
</nav>
</header>
<main>
<article class="card" id="post">
<h1>Formatear HTML <small>sin romper nada</small></h1>
<p>
Este párrafo tiene <strong>negrita</strong>,<em>cursiva pegada</em> y un
<a href="https://miguelacm.es/tools">enlace</a>. Los espacios entre etiquetas inline se
respetan porque cambiarlos altera lo que se ve en pantalla.
</p>
<pre> el texto preformateado
se queda tal cual</pre>
<img src="foto.jpg">
<p id="post">id repetido</p>
</article>
</main>
<script>
document.querySelector("#post").addEventListener("click", () => {
console.log("hola");
});
</script>
</body>
</html>
2 avisos en el HTML original
- Línea 7 — <img> sin atributo alt (accesibilidad)
- Línea 7 — id="post" repetido
Qué cambia y qué no
- Solo se modifica el espacio en blanco donde no afecta a lo que se ve: entre bloques y en saltos de línea dentro del texto. Entre etiquetas inline pegadas nunca se añade un espacio.
- El contenido de pre y textarea se conserva byte a byte; script y style solo se reindentan, sin tocar el código.
- Las etiquetas de cierre implícitas (li, td, p…) se escriben explícitamente, lo que es equivalente para el navegador.
- Si usas CSS white-space: pre o display: inline-block sobre elementos de bloque, revisa el resultado: el formateador no conoce tus estilos. Plantillas con sintaxis propia (Blade, Jinja, JSX) pueden no formatearse bien.
- Todo ocurre en tu navegador.
Hecho por
Miguel Ángel Colorado Marin (MACM)
Hecho por
Miguel Ángel Colorado Marin (MACM)
Full-Stack Developer · Guadalajara, España
Desarrollo aplicaciones web, herramientas digitales y proyectos completos — desde el diseño hasta el despliegue.
Muchos formateadores de HTML rompen la maquetación sin avisar: meten saltos de línea entre un enlace y la coma que lo sigue o separan dos etiquetas inline que estaban pegadas, y aparece un espacio que antes no existía. Este formateador construye el árbol del documento como lo hace el navegador y solo toca el espacio en blanco que no cambia lo que se ve. Se verifica comprobando que el texto visible del resultado es idéntico al original y que formatear dos veces produce lo mismo. Mientras formatea, analiza el marcado y te señala etiquetas sin cerrar, ids duplicados o imágenes sin texto alternativo.
Características
- ✓No añade espacios entre etiquetas inline pegadas: el texto visible queda idéntico
- ✓Contenido de pre y textarea byte a byte y script y style reindentados sin tocar el código
- ✓Ajuste de líneas largas por palabras con ancho máximo de 40 a 200 caracteres
- ✓Atributos en varias líneas cuando no caben, siempre o nunca
- ✓Indentación de 2, 4 espacios o tabulador y opción de no indentar head y body
- ✓Cierres implícitos de li, td, tr, dt, dd, option y p resueltos como el navegador
- ✓SVG y MathML con mayúsculas y autocierres correctos
- ✓Avisos con número de línea: etiquetas sin cerrar, cierres huérfanos, ids y atributos duplicados, img sin alt y etiquetas obsoletas
¿Cómo formatear código HTML?
- 1
Pega o abre el HTML
Pega el código o abre un archivo .html; el resultado se genera al instante.
- 2
Elige el estilo
Ajusta indentación, ancho máximo, atributos, elementos vacíos, comillas y líneas en blanco.
- 3
Revisa los avisos
Comprueba las etiquetas sin cerrar, ids repetidos y demás avisos con su número de línea.
- 4
Copia o descarga
Copia el HTML formateado o descárgalo como archivo.
Preguntas frecuentes
¿Puede formatear el HTML cambiar cómo se ve la página?
Sí, si se añaden espacios entre elementos inline. <b>a</b><i>b</i> se ve como «ab», pero con un salto de línea entre ambos se vería «a b». Esta herramienta nunca rompe esas uniones y solo parte líneas donde ya había espacio.
¿Qué pasa con pre, textarea, script y style?
El contenido de pre y textarea se deja exactamente igual porque sus espacios se muestran. En script y style se quita la indentación común y se aplica la del nivel, sin modificar el código.
¿Por qué aparecen etiquetas de cierre que no estaban?
HTML permite omitir el cierre de li, td, p y otras etiquetas. El navegador las cierra automáticamente y el formateador escribe ese cierre para que la estructura sea visible. El resultado es equivalente.
¿Por qué avisa de <div/>?
En HTML la barra final solo tiene sentido en elementos vacíos como img o br, y en SVG. En un div se ignora y el navegador lo trata como apertura, así que todo lo que venga después queda dentro.
¿Sirve para minificar?
No; para reducir tamaño usa el minificador de código de la web. Este formateador está pensado para leer, revisar y mantener HTML.
¿Se sube mi código?
No. El análisis y el formateo se ejecutan en tu navegador.
Herramientas relacionadas
Incrusta Formateador de HTML en tu web
Integra Formateador de HTML en cualquier página web con un simple iframe. Gratis, con atribución a miguelacm.es.
<iframe
src="https://miguelacm.es/embed/html-formatter"
width="100%"
height="700"
frameborder="0"
title="Formateador de HTML — miguelacm.es"
></iframe>