HTML formatter
Indent and tidy minified or messy HTML without changing how the page looks, and spot common markup mistakes.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Mi página</title>
<style>
body{font-family:system-ui}
.card{padding:1rem}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="/">Inicio</a></li>
<li><a href="/blog" class="active">Blog</a></li>
</ul>
</nav>
</header>
<main>
<article class="card" id="post">
<h1>Formatear HTML <small>sin romper nada</small></h1>
<p>
Este párrafo tiene <strong>negrita</strong>,<em>cursiva pegada</em> y un
<a href="https://miguelacm.es/tools">enlace</a>. Los espacios entre etiquetas inline se
respetan porque cambiarlos altera lo que se ve en pantalla.
</p>
<pre> el texto preformateado
se queda tal cual</pre>
<img src="foto.jpg">
<p id="post">id repetido</p>
</article>
</main>
<script>
document.querySelector("#post").addEventListener("click", () => {
console.log("hola");
});
</script>
</body>
</html>
2 warnings in the original HTML
- Line 7 — <img> without alt attribute (accessibility)
- Line 7 — Duplicate id="post"
What changes and what does not
- Only whitespace that does not affect rendering is changed: between blocks and line breaks within text. No space is ever added between glued inline tags.
- pre and textarea content is kept byte for byte; script and style are only re-indented, the code is untouched.
- Implied end tags (li, td, p…) are written explicitly, which is equivalent for browsers.
- If you use CSS white-space: pre or display: inline-block on block elements, review the result: the formatter does not know your styles. Templates with their own syntax (Blade, Jinja, JSX) may not format well.
- Everything happens in your browser.
Built by
Miguel Ángel Colorado Marin (MACM)
Built by
Miguel Ángel Colorado Marin (MACM)
Full-Stack Developer · Guadalajara, España
I develop web apps, digital tools and full projects — from design to deployment.
Many HTML formatters silently break layouts: they insert line breaks between a link and the comma after it or split two glued inline tags, and a space that did not exist appears. This formatter builds the document tree like a browser and only touches whitespace that does not change what you see. It is verified by checking that the visible text of the result is identical to the original and that formatting twice gives the same output. While formatting it also analyzes the markup and flags unclosed tags, duplicate ids or images without alternative text.
Features
- ✓Never adds spaces between glued inline tags: visible text stays identical
- ✓pre and textarea content kept byte for byte and script and style re-indented without touching the code
- ✓Long lines wrapped by words with a max width of 40 to 200 characters
- ✓Attributes on separate lines when they do not fit, always or never
- ✓Indentation of 2, 4 spaces or tab and an option not to indent head and body
- ✓Implied end tags for li, td, tr, dt, dd, option and p resolved like a browser
- ✓SVG and MathML with correct casing and self-closing tags
- ✓Warnings with line numbers: unclosed tags, stray closing tags, duplicate ids and attributes, img without alt and obsolete tags
How do I format HTML code?
- 1
Paste or open the HTML
Paste the code or open an .html file; the result is generated instantly.
- 2
Choose the style
Adjust indentation, max width, attributes, void elements, quotes and blank lines.
- 3
Review the warnings
Check unclosed tags, duplicate ids and the other warnings with their line numbers.
- 4
Copy or download
Copy the formatted HTML or download it as a file.
Frequently asked questions
Can formatting HTML change how the page looks?
Yes, if spaces are added between inline elements. <b>a</b><i>b</i> renders as "ab", but with a line break between them it would render as "a b". This tool never breaks those joins and only wraps lines where there was already whitespace.
What happens to pre, textarea, script and style?
pre and textarea content is left exactly as is because their whitespace is displayed. In script and style the common indentation is removed and the level's indentation is applied, without modifying the code.
Why do closing tags appear that were not there?
HTML allows omitting the end tag of li, td, p and others. Browsers close them automatically and the formatter writes that end tag so the structure is visible. The result is equivalent.
Why does it warn about <div/>?
In HTML the trailing slash only makes sense on void elements such as img or br, and in SVG. On a div it is ignored and browsers treat it as an opening tag, so everything after it ends up inside.
Can it minify?
No; to reduce size use the site's code minifier. This formatter is meant for reading, reviewing and maintaining HTML.
Is my code uploaded?
No. Analysis and formatting run in your browser.
Related tools
Embed HTML Formatter on your site
Add HTML Formatter to any web page with a simple iframe. Free, with attribution to miguelacm.es.
<iframe
src="https://miguelacm.es/embed/html-formatter"
width="100%"
height="700"
frameborder="0"
title="HTML Formatter — miguelacm.es"
></iframe>