HTML Formatter

HTML
Formateado · 12 → 40 líneas
<!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.

⚡ by MACM · miguelacm.es