Cómo funciona
El Formateador de HTML (también llamado embellecedor de HTML) coge código en bruto, sin formato o minificado y le añade una indentación coherente y saltos de línea, para que la estructura del documento se entienda de un vistazo.
Un HTML sin formato es difícil de leer. Las etiquetas se anidan decenas de niveles, los atributos van todos pegados y la relación entre elementos padre e hijo resulta invisible. Un HTML bien formateado te permite entender la estructura del DOM al momento, detectar etiquetas de cierre que faltan, localizar atributos de un vistazo y revisar los cambios en un diff que tenga sentido.
Cómo usarlo: pega cualquier HTML, sea una página completa, el fragmento de un componente o un trozo de tabla. El formateador aplica una indentación de 2 espacios por nivel, coloca los elementos de bloque en líneas nuevas, mantiene los elementos en línea junto al texto que los rodea y respeta el contenido de las etiquetas pre y script sin tocarlo.
Reglas que aplica: los elementos de bloque (div, p, section, article, header, footer, ul, ol, table y demás) van en su propia línea con la indentación correcta. Los elementos en línea (span, a, strong, em, code) siguen el flujo del texto. Los elementos vacíos que se autocierran (br, hr, img, input, meta, link) se tratan bien, sin añadirles etiqueta de cierre. La indentación de atributos alinea las etiquetas con muchos atributos para que se lean mejor.
Para qué sirve: leer el HTML del código fuente de una web, depurar problemas de renderizado de plantillas, preparar fragmentos para la documentación, revisar el HTML que genera un framework de interfaz y limpiar el marcado que se copia y pega desde un cliente de correo o desde Word.
Preguntas frecuentes
- Los bloques <style> en línea se formatean con las reglas de CSS y los bloques <script> con las de JavaScript. El contenido de las etiquetas <pre> se deja tal cual, para conservar los espacios que están puestos a propósito.
- El formateador usa un analizador tolerante que resuelve muchos problemas habituales (etiquetas sin cerrar, comillas desparejadas). Aun así, un HTML muy roto puede dar un formato inesperado o un error.
- No. Añadir espacios en blanco entre elementos de bloque no modifica cómo dibuja el navegador el HTML. El resultado visual es idéntico: lo único que cambia es la legibilidad del código.
- El formateador respeta la estructura que encuentra sin añadir ni quitar etiquetas. No cierra por su cuenta un </div> o un </p> que falte: para eso necesitas un validador de HTML.
¿Formatea también los estilos y los scripts en línea?
¿Funciona con HTML mal formado?
¿Cambia el resultado que se ve en pantalla?
¿Añade las etiquetas de cierre que falten?
RankForge — Technical SEO Audit
Score any page out of 100, see every issue with the exact fix, generate JSON-LD schema and crawl up to 50 pages — all inside Chrome's side panel, with nothing sent to a server.