Formateador HTML
Pega HTML para embellecerlo con una indentación limpia, ajustar las líneas largas o minificarlo, y revisa el resultado en una vista previa en vivo. El código dentro de <pre>, <textarea>, <script> y <style> se trata con cuidado.
Última actualización:
Todo se ejecuta en tu navegador. La vista previa está aislada: los scripts, formularios y ventanas emergentes están bloqueados.
Cómo usar Formateador HTML
- Pega tu HTML en el cuadro de entrada o abre un archivo .html. Pulsa Ejemplo para probarlo.
- Elige la indentación y el ajuste de línea, y si el contenido de <head> y <body> lleva una indentación extra.
- Pulsa Formatear HTML. El resultado se actualiza mientras escribes si En vivo está activado.
- Abre la pestaña Vista previa para ver cómo se muestra la página. Los scripts no se ejecutan en la vista previa.
- Copia o descarga el resultado, o pulsa Minificar para obtener una versión compacta.
Antes y después
Entrada:
<ul class="menu"><li><a href="/es/">Home</a></li><li><a href="/blog/">Blog</a></li></ul><p>Read the <strong>latest</strong> post.</p>
Formateado con 2 espacios:
<ul class="menu"> <li><a href="/es/">Home</a></li> <li><a href="/blog/">Blog</a></li> </ul> <p>Read the <strong>latest</strong> post.</p>
Cómo trata el formateador cada tipo de contenido
| Contenido | Qué ocurre | Por qué |
|---|---|---|
Elementos de bloque (div, p, ul, table, section…) | Línea propia, hijos indentados un nivel | Los espacios en blanco entre bloques no afectan a la visualización |
Elementos en línea (a, strong, em, span, img…) | Se quedan en la línea del texto | Añadir saltos de línea dentro del texto añadiría espacios visibles |
<pre> y <textarea> | Se copian exactamente | Cada espacio y salto de línea dentro de ellos se muestra |
<style> | El CSS se formatea regla por regla | Estilos incrustados legibles |
<script> | Se reindenta como bloque, el código no cambia; el JSON-LD se formatea de forma legible | Cambiar el JavaScript más allá de la indentación podría romperlo |
| Comentarios y DOCTYPE | Se mantienen en su propia línea | Los comentarios condicionales y las notas quedan intactos |
Los elementos cuyas etiquetas de cierre son opcionales en HTML, como <li>, <p>, <td> y <option>, se cierran igual que los cerraría un navegador. La barra de estado avisa de las etiquetas que nunca se cierran y de las etiquetas de cierre sin etiqueta de apertura correspondiente, que son las causas más comunes de diseños rotos.
Consejos de indentación y longitud de línea
- 2 espacios es el estilo más común para HTML porque las páginas se anidan mucho. Usa tabulaciones si tu equipo o tu editor las prefiere.
- Ajusta a 80 o 120 caracteres para dividir los párrafos largos en varias líneas. Las líneas solo se cortan en los espacios del texto, nunca dentro de una etiqueta o atributo.
- Indentar head y body controla si
<head>y<body>se indentan dentro de<html>. Muchas guías de estilo los dejan alineados para ahorrar un nivel. - Formatear no es validar. Para una validación HTML completa, usa el W3C Markup Validation Service después de ordenar el código aquí.
Preguntas frecuentes
¿Qué hace un formateador HTML?
Reindenta el HTML para que cada elemento de bloque anidado empiece en su propia línea, un nivel más adentro que su elemento padre. Así la estructura de la página es fácil de ver, te ayuda a detectar etiquetas sin cerrar y simplifica las revisiones de código. La página se ve igual en el navegador.
¿Formatear cambiará el aspecto de mi página?
No, en casi todos los casos. Los navegadores ignoran los espacios en blanco entre elementos de bloque, los elementos en línea como enlaces y texto en negrita se mantienen en la misma línea que el texto que los rodea, y el contenido dentro de <pre> y <textarea> nunca se toca. Algunos diseños poco habituales que dependen de los espacios entre elementos inline-block pueden desplazarse unos píxeles.
¿Es segura la vista previa en vivo?
Sí. La vista previa se muestra en un iframe aislado sin permiso para ejecutar scripts, enviar formularios ni abrir ventanas emergentes. Las imágenes y hojas de estilo con URL absolutas se cargan; los enlaces relativos no se pueden resolver porque la vista previa no tiene dirección base.
¿Puedo desminificar HTML?
Sí. Pega HTML minificado, por ejemplo del código fuente de una página, y pulsa Formatear HTML. Cada elemento de bloque vuelve a su propia línea con indentación. Los comentarios eliminados no se pueden recuperar.
¿Qué hace Minificar?
Minificar elimina los comentarios (excepto los comentarios condicionales), reduce las secuencias de espacios y saltos de línea a un solo espacio y quita los espacios en blanco entre elementos de bloque. El contenido de <pre>, <textarea> y <script> se mantiene tal cual, y el CSS incrustado se minifica.
¿Se sube mi HTML?
No. El formateo y la vista previa se hacen por completo en tu navegador. Tu código nunca se envía a un servidor.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.