Formateador HTML

Formatee HTML compacto o desordenado en un marcado legible y con sangría.

Entrada
Salida
0 caracteres 0 líneas

Haga que HTML sea más fácil de inspeccionar y editar

Formateador HTML expande el HTML compacto en una estructura legible con saltos de línea y sangría alrededor de elementos anidados. Es útil para inspeccionar fragmentos, plantillas, marcas generadas, correos electrónicos y fragmentos de páginas copiadas.

Los analizadores HTML se recuperan de muchos documentos con formato incorrecto, por lo que la salida embellecida puede verse más limpia que la fuente y al mismo tiempo reflejar las reglas de análisis del navegador. El formato debe preservar las etiquetas y los atributos, pero se debe revisar el texto en línea sensible a los espacios en blanco.

Cómo usar

  1. Pegue su código HTML en el editor de entrada.
  2. Haga clic en Embellecer HTML para redistribuir y sangrar el marcado.
  3. Revise el resultado para ver el anidamiento, los comentarios, el texto en línea y los atributos esperados.
  4. Utilice Copiar para el portapapeles, Descargar para un archivo o Limpiar para restablecer.

¿Qué es el embellecedor HTML?

Formateador HTML es una utilidad basada en navegador para convertir marcas densas en un documento que puede escanear y editar. Ayuda a revelar relaciones entre padres e hijos, etiquetas de cierre mal colocadas y grandes bloques de HTML generados.

Los espacios en blanco HTML pueden afectar el diseño en línea, los nodos de texto y el contenido preformateado. Después de embellecer las plantillas o el marcado de producción, verifique que el resultado renderizado aún coincida con su intención.

Notas de entrada

Pegue fragmentos de HTML o documentos completos. Tenga cuidado con <pre>, los elementos en línea, la sintaxis de plantillas y los comentarios en los que puede confiar su sistema de compilación.

Ejemplo

Un documento denso se vuelve más fácil de seguir una vez que cada elemento anidado se coloca en su propia línea:

--- Entrada minificada ---
<html><head><title>Test</title></head><body><p>Hello</p></body></html>

--- Salida embellecida ---
<html>
  <head>
    <title>Test</title>
  </head>
  <body>
    <p>Hello</p>
  </body>
</html>

Integración MCP

MCP (Model Context Protocol) permite que agentes de IA y aplicaciones descubran y ejecuten utilidades de Coding.Tools para flujos repetibles de conversión, formato, hash y generación.

Nombre de herramienta MCP: html-beautifier

Endpoint MCP: https://coding.tools/mcp

Llame primero a tools/list. Cada herramienta incluye inputSchema, outputSchema y examples para que un agente de IA o cliente pueda construir argumentos válidos sin adivinar.

Para tools/call, lea result.content[0].text para el valor visible y result.structuredContent para el análisis automático. Los fallos de herramienta devuelven isError: true; los fallos de protocolo devuelven un JSON-RPC error.

Ejemplo de solicitud tools/call:

curl -s https://coding.tools/mcp \
  -H "Content-Type: application/json" \
  -H "Accept: application/json" \
  -H "MCP-Protocol-Version: 2025-06-18" \
  -d '{"jsonrpc":"2.0","id":1,"method":"tools/call","params":{"name":"html-beautifier","arguments":{"input":"<section><h1>Docs</h1><p>MCP ready</p></section>"}}}'

La mayoría de las herramientas de texto y datos aceptan una cadena input y options opcionales. Las herramientas de imagen que dependen de las API de imagen del navegador se listan para descubrimiento y devuelven un enlace a la interfaz web cuando necesitan capacidades del navegador.