Descrição Overview Descripción
HTML é, em essência, o documento mais lido do mundo — não por pessoas, mas por máquinas. Tim Berners-Lee criou o HTML em 1991 como subconjunto do SGML (Standard Generalized Markup Language), o padrão de marcação de documentos científicos que o CERN utilizava. A ideia era simples: um conjunto de tags para conectar artigos de física via hyperlinks. O que aconteceu nos trinta anos seguintes foi que esse mesmo formato foi sendo empurrado para uso muito além do que seus criadores imaginaram, até virar a estrutura de interfaces tão complexas quanto editores de texto online, planilhas no navegador e ferramentas de design colaborativo.
O problema do HTML ilegível não é culpa do desenvolvedor que escreveu o template original. Ferramentas de geração de HTML — CMS como WordPress, exportadores de Figma, geradores de e-mail HTML, bibliotecas de componentes — produzem marcação funcionalmente perfeita que o browser parseia sem reclamar. Mas são uma linha contínua de 8.000 caracteres onde um `</div>` pode ser o décimo da fila e você não tem como saber qual é pai de qual sem um parser de apoio.
O beautifier HTML resolve exatamente isso: usa um parser real (não regex) para analisar a árvore de tags, calcula os níveis de aninhamento e adiciona indentação e quebras de linha consistentes. O parser pode normalizar alguns fragmentos conforme as regras do HTML5 — o que significa que o output pode ser ligeiramente diferente do input para markup malformado. Não é um validador: para verificar conformidade formal com a especificação, o W3C Markup Validator é a ferramenta certa. Para tornar um template ilegível em algo que um ser humano consegue ler e manter, o beautifier faz exatamente o trabalho.
HTML is, at its core, the most widely read document format in the world — not by people, but by machines. Tim Berners-Lee created HTML in 1991 as a subset of SGML (Standard Generalized Markup Language), the scientific document markup standard used at CERN. The idea was simple: a set of tags to connect physics articles via hyperlinks. What happened in the thirty years that followed was that this same format was pushed far beyond its creators' intentions, until it became the structure behind interfaces as complex as online text editors, browser-based spreadsheets, and collaborative design tools.
The problem of unreadable HTML is not the original developer's fault. HTML generation tools — CMS platforms like WordPress, Figma exporters, HTML email generators, component libraries — produce functionally perfect markup that the browser parses without complaint. But it becomes a continuous 8,000-character line where a closing `</div>` might be the tenth in a queue and you have no way to know which is the parent of what without a supporting parser.
The HTML beautifier solves exactly that: it uses a real parser (not regex) to analyze the tag tree, calculates nesting levels, and adds consistent indentation and line breaks. The parser may normalize some fragments according to HTML5 rules — meaning the output can be slightly different from the input for malformed markup. It is not a validator: for formal compliance checking against the specification, the W3C Markup Validator is the right tool. For turning an unreadable template into something a human can read and maintain, the beautifier does exactly the job.
El HTML es, en esencia, el formato de documento más leído del mundo, no por personas, sino por máquinas. Tim Berners-Lee creó el HTML en 1991 como subconjunto del SGML (Standard Generalized Markup Language), el estándar de marcado de documentos científicos que usaba el CERN. La idea era sencilla: un conjunto de etiquetas para enlazar artículos de física mediante hipervínculos. Lo que sucedió en los treinta años siguientes fue que ese mismo formato fue siendo llevado mucho más allá de lo que sus creadores imaginaron, hasta convertirse en la estructura de interfaces tan complejas como editores de texto en línea, hojas de cálculo en el navegador y herramientas de diseño colaborativo.
El problema del HTML ilegible no es culpa del desarrollador que escribió la plantilla original. Las herramientas de generación de HTML —CMS como WordPress, exportadores de Figma, generadores de email HTML, bibliotecas de componentes— producen marcado funcionalmente perfecto que el navegador parsea sin quejarse. Pero el resultado es una línea continua de 8.000 caracteres en la que `</div>` puede ser el décimo de la cola y es imposible saber cuál es el padre de cuál sin un parser de apoyo.
El beautifier de HTML resuelve exactamente eso: usa un parser real (no expresiones regulares) para analizar el árbol de etiquetas, calcula los niveles de anidamiento y añade sangría y saltos de línea coherentes. El parser puede normalizar algunos fragmentos según las reglas del HTML5, lo que significa que el output puede ser ligeramente distinto al input si el marcado está malformado. No es un validador: para comprobar la conformidad formal con la especificación, el W3C Markup Validator es la herramienta adecuada. Para convertir una plantilla ilegible en algo que un ser humano pueda leer y mantener, el beautifier hace exactamente ese trabajo.
Detalhamento técnico
HTML, SGML e a herança dos anos 90: por que o formato ainda é relevante
- O HTML foi criado como subconjunto do SGML (Standard Generalized Markup Language), o padrão ISO de marcação de documentos que organizações científicas como o CERN usavam desde os anos 80. Berners-Lee simplificou o SGML para criar algo que qualquer pessoa pudesse aprender em horas — e funcionou tão bem que nunca foi substituído.
- A primeira especificação HTML (1993) tinha apenas 18 elementos. O HTML5, a versão atual, tem mais de 100. Ao longo das décadas, a linguagem acumulou elementos semânticos como `<article>`, `<section>`, `<nav>` e `<main>` que ajudam mecanismos de busca e leitores de tela a entender a estrutura do documento.
- Os parsers HTML são intencionalmente tolerantes a erros. Isso é uma decisão de design, não um bug: nos anos 90, exigir HTML perfeito teria tornado a web inacessível para a maioria das pessoas. Até hoje, um browser consegue renderizar HTML com tags não fechadas, atributos sem aspas e aninhamentos incorretos.
- O DOCTYPE `<!DOCTYPE html>` no início do documento instrui o browser a usar o modo de padrões (standards mode) em vez do modo quirks. O modo quirks é uma emulação de comportamentos de browsers antigos dos anos 90 que permanece ativo quando o DOCTYPE está ausente.
- O WHATWG (Web Hypertext Application Technology Working Group) mantém o HTML como um 'living standard' — uma especificação em constante evolução sem números de versão. HTML5 é o nome coloquial para as melhorias feitas a partir de 2008; tecnicamente não existe um 'HTML6'.
Quando usar beautifier, quando usar validador e quando usar linter
- O beautifier reformata o HTML sem alterar semântica nem verificar correção. Ele adiciona indentação, quebras de linha e consistência visual. É útil para depuração, revisão de código e leitura de templates gerados por máquina.
- O W3C Markup Validator (validator.w3.org) verifica conformidade estrutural com a especificação HTML5: detecta tags não fechadas, aninhamentos ilegais, atributos obrigatórios ausentes e elementos obsoletos. Use antes de publicar páginas que precisam de acessibilidade e SEO corretos.
- Linters HTML como HTMLHint vão além da sintaxe: alertam sobre `<img>` sem `alt`, ausência do atributo `lang` na tag `<html>`, ordem incorreta de headings (h1 → h2 → h3), atributos descontinuados. São ideais para integração em pipelines de CI.
- Prettier é o formatador multi-linguagem mais adotado da indústria e inclui suporte a HTML. Integra com VS Code, Neovim, WebStorm e a maioria dos editores, além de rodar como pré-hook de commit via Husky. Para projetos com time, Prettier elimina debates de estilo de código.
- O beautifier desta página usa uma abordagem baseada em DOM: o HTML é parseado pelo motor do browser, e a árvore resultante é serializada com indentação. Isso significa que pode normalizar alguns fragmentos conforme as regras de parsing do HTML5 — útil para entender o que o browser realmente interpreta.
Technical deep dive
HTML, SGML, and the 1990s legacy: why the format is still relevant
- HTML was created as a subset of SGML (Standard Generalized Markup Language), the ISO document markup standard that scientific organizations like CERN had been using since the 1980s. Berners-Lee simplified SGML to create something anyone could learn in hours — and it worked so well it was never replaced.
- The first HTML spec (1993) had just 18 elements. HTML5, the current version, has over 100. Over the decades the language accumulated semantic elements like `<article>`, `<section>`, `<nav>`, and `<main>` that help search engines and screen readers understand document structure.
- HTML parsers are intentionally fault-tolerant. This is a design decision, not a bug: in the 1990s, demanding perfect HTML would have made the web inaccessible to most people. To this day, a browser can render HTML with unclosed tags, unquoted attributes, and incorrect nesting.
- The `<!DOCTYPE html>` declaration at the top of a document tells the browser to use standards mode rather than quirks mode. Quirks mode emulates the behavior of 1990s browsers and remains active when the DOCTYPE is absent.
- The WHATWG (Web Hypertext Application Technology Working Group) maintains HTML as a 'living standard' — a continuously evolving specification with no version numbers. HTML5 is the colloquial name for improvements made since 2008; technically there is no 'HTML6'.
When to use a beautifier, a validator, and a linter
- A beautifier reformats HTML without changing semantics or checking correctness. It adds indentation, line breaks, and visual consistency. Useful for debugging, code review, and reading machine-generated templates.
- The W3C Markup Validator (validator.w3.org) checks structural conformance with the HTML5 spec: detects unclosed tags, illegal nesting, missing required attributes, and obsolete elements. Use it before publishing pages that require proper accessibility and SEO.
- HTML linters like HTMLHint go beyond syntax: they warn about `<img>` missing `alt`, absence of the `lang` attribute on `<html>`, incorrect heading order (h1 → h2 → h3), and deprecated attributes. Ideal for integration into CI pipelines.
- Prettier is the most widely adopted multi-language formatter in the industry and includes HTML support. It integrates with VS Code, Neovim, WebStorm, and most editors, and can run as a pre-commit hook via Husky. For team projects, Prettier eliminates code style debates.
- The beautifier on this page uses a DOM-based approach: HTML is parsed by the browser's engine and the resulting tree is serialized with indentation. This means it may normalize some fragments according to HTML5 parsing rules — useful for understanding what the browser actually interprets.
Detalle técnico
HTML, SGML y la herencia de los años 90: por qué el formato sigue siendo relevante
- El HTML fue creado como subconjunto del SGML (Standard Generalized Markup Language), el estándar ISO de marcado de documentos que organizaciones científicas como el CERN usaban desde los años 80. Berners-Lee simplificó el SGML para crear algo que cualquier persona pudiera aprender en horas — y funcionó tan bien que nunca fue sustituido.
- La primera especificación HTML (1993) tenía apenas 18 elementos. HTML5, la versión actual, tiene más de 100. A lo largo de las décadas, el lenguaje acumuló elementos semánticos como `<article>`, `<section>`, `<nav>` y `<main>` que ayudan a los motores de búsqueda y los lectores de pantalla a entender la estructura del documento.
- Los parsers HTML son intencionalmente tolerantes a errores. Esta es una decisión de diseño, no un fallo: en los años 90, exigir HTML perfecto habría hecho la web inaccesible para la mayoría de las personas. Todavía hoy, un navegador puede renderizar HTML con etiquetas sin cerrar, atributos sin comillas y anidamientos incorrectos.
- El DOCTYPE `<!DOCTYPE html>` al inicio del documento indica al navegador que use el modo estándar en lugar del modo quirks. El modo quirks emula el comportamiento de los navegadores de los años 90 y sigue activo cuando falta el DOCTYPE.
- El WHATWG (Web Hypertext Application Technology Working Group) mantiene el HTML como un 'living standard': una especificación en continua evolución sin números de versión. HTML5 es el nombre coloquial de las mejoras realizadas desde 2008; técnicamente no existe un 'HTML6'.
Cuándo usar un beautifier, un validador y un linter
- El beautifier reformatea el HTML sin cambiar la semántica ni verificar la corrección. Añade sangría, saltos de línea y consistencia visual. Es útil para depurar, revisar código y leer plantillas generadas por máquina.
- El W3C Markup Validator (validator.w3.org) comprueba la conformidad estructural con la especificación HTML5: detecta etiquetas sin cerrar, anidamientos ilegales, atributos obligatorios ausentes y elementos obsoletos. Úsalo antes de publicar páginas que requieran accesibilidad y SEO correctos.
- Los linters HTML como HTMLHint van más allá de la sintaxis: alertan sobre `<img>` sin `alt`, ausencia del atributo `lang` en `<html>`, orden incorrecto de encabezados (h1 → h2 → h3) y atributos obsoletos. Son ideales para integrarse en pipelines de CI.
- Prettier es el formateador multilenguaje más adoptado del sector y tiene soporte para HTML. Se integra con VS Code, Neovim, WebStorm y la mayoría de los editores, y puede ejecutarse como hook pre-commit con Husky. En proyectos con equipos, Prettier elimina los debates de estilo de código.
- El beautifier de esta página usa un enfoque basado en DOM: el HTML es parseado por el motor del navegador y el árbol resultante se serializa con sangría. Eso significa que puede normalizar algunos fragmentos según las reglas de parseo de HTML5, lo cual es útil para entender qué interpreta realmente el navegador.
Guia da ferramenta Tool guide Guía de la herramienta
-
O que faz Formata HTML minificado para estrutura hierárquica legível.
-
Quando usar Revisar templates e depurar marcação sem precisar ajustar manualmente linha por linha.
-
What it does Formats minified HTML into a readable hierarchical structure.
-
When to use Review templates and debug markup without manually reformatting line by line.
-
Qué hace Formatea HTML minificado en una estructura jerárquica legible.
-
Cuándo usarlo Revisar templates y depurar marcado sin reformatear manualmente línea por línea.
Exemplo de Código Code Snippets Fragmentos de Código
<!-- ANTES: markup gerado por CMS, sem indentação -->
<main><section class="hero"><h1>Título</h1><p>Parágrafo com <strong>negrito</strong> e <a href="/link">link</a>.</p></section><section class="cards"><article><h2>Card</h2><p>Texto do card.</p></article></section></main>
<!-- DEPOIS: beautificado com 2 espaços de indentação -->
<main>
<section class="hero">
<h1>Título</h1>
<p>Parágrafo com <strong>negrito</strong> e <a href="/link">link</a>.</p>
</section>
<section class="cards">
<article>
<h2>Card</h2>
<p>Texto do card.</p>
</article>
</section>
</main>import prettier from 'prettier';
import htmlPlugin from 'prettier/plugins/html';
const html = '<main><section><h1>Título</h1><p>Texto</p></section></main>';
const formatado = await prettier.format(html, {
parser: 'html',
plugins: [htmlPlugin],
printWidth: 80,
tabWidth: 2,
htmlWhitespaceSensitivity: 'css',
});
console.log(formatado);
// Configuração no VS Code (settings.json):
// "[html]": {
// "editor.defaultFormatter": "esbenp.prettier-vscode",
// "editor.formatOnSave": true
// }<!-- BEFORE: CMS-generated markup, no indentation -->
<main><section class="hero"><h1>Title</h1><p>Paragraph with <strong>bold</strong> and <a href="/link">link</a>.</p></section><section class="cards"><article><h2>Card</h2><p>Card text.</p></article></section></main>
<!-- AFTER: beautified with 2-space indentation -->
<main>
<section class="hero">
<h1>Title</h1>
<p>Paragraph with <strong>bold</strong> and <a href="/link">link</a>.</p>
</section>
<section class="cards">
<article>
<h2>Card</h2>
<p>Card text.</p>
</article>
</section>
</main>import prettier from 'prettier';
import htmlPlugin from 'prettier/plugins/html';
const html = '<main><section><h1>Title</h1><p>Text</p></section></main>';
const formatted = await prettier.format(html, {
parser: 'html',
plugins: [htmlPlugin],
printWidth: 80,
tabWidth: 2,
htmlWhitespaceSensitivity: 'css',
});
console.log(formatted);
// VS Code configuration (settings.json):
// "[html]": {
// "editor.defaultFormatter": "esbenp.prettier-vscode",
// "editor.formatOnSave": true
// }<!-- ANTES: marcado generado por CMS, sin sangría -->
<main><section class="hero"><h1>Título</h1><p>Párrafo con <strong>negrita</strong> y <a href="/link">enlace</a>.</p></section><section class="cards"><article><h2>Card</h2><p>Texto del card.</p></article></section></main>
<!-- DESPUÉS: embellecido con sangría de 2 espacios -->
<main>
<section class="hero">
<h1>Título</h1>
<p>Párrafo con <strong>negrita</strong> y <a href="/link">enlace</a>.</p>
</section>
<section class="cards">
<article>
<h2>Card</h2>
<p>Texto del card.</p>
</article>
</section>
</main>import prettier from 'prettier';
import htmlPlugin from 'prettier/plugins/html';
const html = '<main><section><h1>Título</h1><p>Texto</p></section></main>';
const formateado = await prettier.format(html, {
parser: 'html',
plugins: [htmlPlugin],
printWidth: 80,
tabWidth: 2,
htmlWhitespaceSensitivity: 'css',
});
console.log(formateado);
// Configuración en VS Code (settings.json):
// "[html]": {
// "editor.defaultFormatter": "esbenp.prettier-vscode",
// "editor.formatOnSave": true
// }Entrada comum Common input Entrada común
<main><section><h1>Título</h1><p>Texto</p></section></main>Perguntas frequentes FAQ Preguntas frecuentes
Para que serve esta ferramenta?
What is this tool for?
¿Para qué sirve esta herramienta?
Ela roda 100% no seu navegador: útil para validar, formatar ou converter dados no dia a dia de desenvolvimento.
It runs fully in your browser: useful to validate, format, or convert data in everyday development.
Funciona por completo en tu navegador: sirve para validar, formatear o convertir datos en el día a día.
Meus dados são enviados a algum servidor?
Are my inputs sent to a server?
¿Se envían mis datos a algún servidor?
O processamento é feito localmente via JavaScript. Não armazenamos o conteúdo que você cola nas caixas de texto.
Processing happens locally with JavaScript. We do not store what you paste into the text areas.
El procesamiento es local con JavaScript. No almacenamos lo que pegas en los campos de texto.
Posso usar em produção ou para dados reais?
Can I use this for real production data?
¿Puedo usarlo con datos reales en producción?
Use por sua conta e risco. Para segredos (senhas, tokens), prefira ambientes controlados e políticas da sua empresa. E lembre sempre de revisar os conteúdos gerados. Nunca confie cegamente nas coisas que vê na internet.
Use at your own risk. For secrets (passwords, tokens), prefer controlled environments and your company policies. And always review the generated contents. Never trust blindly things you see on the internet.
Úsalo bajo tu responsabilidad. Para secretos (contraseñas, tokens), prefiere entornos controlados y políticas internas. Recuerda de revisar los contenidos generados. Nunca confies ciegamente en cosas que ves en internet.