Formatear HTML
Con esta herramienta puedes formatear HTML: pega el código fuente y recíbelo bien sangrado o minificado. Todo se queda en tu navegador, no se sube nada, y los bloques pre, los scripts y los valores de atributos no se modifican.
Fuente: WHATWG HTML Living Standard – Syntax: Void-Elemente, Raw-Text-Elemente (script, style), optionale End-Tags. Actualizado: .
Cómo se calcula
Cómo formatear HTML
- Pega el código en el campo: un documento entero o solo un fragmento.
- En «Acción» elige Formatear o Minificar y ajusta la sangría si hace falta.
- Copia el resultado y devuélvelo a tu editor.
Qué hace el formato
- Los elementos de bloque como
div,ulosectionocupan su propia línea y su contenido se sangra. - El texto corrido y los elementos en línea (
a,strong,span…) permanecen juntos en una línea y se ajustan hacia los 100 caracteres, para que el aspecto no cambie. - El contenido preformateado de
preytextarease conserva carácter por carácter, porque allí los espacios se ven. - Scripts y estilos se sangran como un bloque; su contenido no se reescribe.
- Las etiquetas de cierre opcionales, como las de
liotd, se añaden en la salida.
Qué hace la minificación
Las series de espacios y saltos de línea pasan a ser un solo espacio y los comentarios desaparecen (los comentarios condicionales para navegadores antiguos se conservan). Entre elementos de bloque el espacio desaparece por completo; entre elementos en línea queda un espacio porque el navegador lo muestra. El CSS de style se compacta y el JavaScript no se toca.
Límites
No es un analizador HTML completo: el código con errores no se repara, sino que se mantiene lo más fiel posible y se avisa. Las plantillas con sintaxis de servidor, como {% if %} o <?php ?>, pueden quedar con una sangría extraña.
Preguntas frecuentes
¿Cómo formatear HTML online?
Pega el código, elige «Formatear» y copia el resultado sangrado. No hace falta cuenta.
¿Se sube mi código HTML a algún servidor?
No. El procesamiento se hace por completo en tu navegador; el código ni se envía ni se guarda.
¿Cómo formatear HTML en VS Code o Notepad++?
En VS Code con Mayús+Alt+F; en Notepad++ con un complemento de formato. Esta herramienta es la opción rápida cuando no tienes editor a mano.
¿Minificar cambia el aspecto de la página?
Normalmente no: el navegador ya reduce los espacios repetidos a uno solo. Los bloques pre son la excepción y se dejan intactos.
¿También puedo formatear CSS y JavaScript?
Los estilos y scripts dentro del HTML se sangran, pero no se reescriben. Para CSS solo existe el minificador de CSS y para JSON el formateador JSON.
Fuentes y base legal
- WHATWG HTML Living Standard – Syntax: Void-Elemente, Raw-Text-Elemente (script, style), optionale End-Tags
- MDN – How whitespace is handled by HTML, CSS and in the DOM
- MDN – <pre>: the preformatted text element (whitespace is preserved)
Última actualización: · Principios editoriales
Herramientas relacionadas
- Formateador, validador y minificador de JSONValida JSON según la RFC 8259 con línea, columna y explicación clara del error. Formatea o minifica, ordena claves y copia. Funciona en tu navegador.
- Formatear SQL (formateador SQL online)Formatear SQL para que sea legible: palabras clave en mayúsculas, sangría, columnas y condiciones en líneas aparte. También comprime. Todo en el navegador.
- Minificar CSS: reducir, formatear e incrustar el CSS en el HTMLMinificar CSS y formatearlo, además de incrustarlo en el HTML para correos: transformaciones seguras, errores con línea, en tu navegador sin subir nada.
- Markdown a HTML: vista previa, código HTML y descargaMarkdown a HTML con vista previa en vivo: títulos, listas, tablas y código según CommonMark. Código HTML limpio para copiar, seguro y sin scripts. Gratis.
- Comparar textos: encuentra las diferenciasCompara dos textos online y resalta las diferencias por líneas, palabras o caracteres, con porcentaje de similitud. Gratis y privado, en tu navegador.
- Probar regex: tester de expresiones regularesPrueba expresiones regulares de JavaScript en vivo: coincidencias resaltadas, grupos de captura en tabla y el patrón explicado. Gratis, sin subir nada.
- Cuál es mi dirección IPMuestra al instante tu dirección IP pública, detecta si es IPv4 o IPv6 y explica la diferencia. Gratis: tu IP no se guarda.
- Generador de tablas MarkdownGenerador de tablas Markdown: pega datos de Excel, Google Sheets o CSV y copia una tabla Markdown, HTML o LaTeX alineada, todo en local en tu navegador.
- Minificar JavaScriptMinificar JavaScript: quita comentarios y espacios, reduce el código y mira el ahorro en bytes. En el navegador, sin subir nada.