HTML Beautifier & Formatter
A free online HTML beautifier and formatter, also called an HTML prettifier: beautify, pretty-print or minify HTML in your browser. Indent nested tags, optionally sort attributes alphabetically, and clean up markup exported from a CMS or minified for production.
Minify leaves the contents of <pre>, <textarea>, <script> and <style> unchanged and keeps one space wherever whitespace could be visible.
What does an HTML formatter do?
HTML is the markup language of web pages, maintained by WHATWG as the HTML Living Standard. Markup that has been minified for production, generated by a template engine or copied from a CMS often arrives as one dense block. A formatter rebuilds the indentation from the document's structure, so you can see which elements are nested inside which and spot a misplaced closing tag. This page uses Prettier 3, the open-source formatter many code editors use, loaded from cdn.jsdelivr.net.
How to use the HTML formatter
- Paste HTML into the Input pane, or load a file with File or a page with URL (your browser fetches the address directly, so the remote server must allow cross-origin requests).
- Choose an Indent and decide whether to tick Sort attributes (A-Z).
- Click Beautify to reformat with Prettier, or Minify to compact the markup.
- Use Copy, or Download to save the result as
formatted.html.
Options explained
- Beautify runs Prettier's HTML parser with whitespace sensitivity set to "css", which means it avoids adding or removing whitespace where that could change how inline elements are displayed. Lines are kept within 80 characters where possible, so a short element such as
<div><p>Hi</p></div>stays on one line. Inline<style>and<script>blocks are formatted as CSS and JavaScript. - Minify does not use Prettier. It deletes HTML comments (conditional comments such as
<!--[if IE]>are kept), shortens every run of whitespace, including line breaks, to a single space, and tidies the whitespace inside tags. Whitespace is removed completely only next to<!DOCTYPE>and thehtml,head,body,title,meta,linkandbasetags, where it never renders. The contents of<pre>,<textarea>,<script>and<style>, and attribute values, are copied unchanged. - Sort attributes (A-Z) orders each start tag's attributes by name, ignoring case. With Beautify it is applied to Prettier's output, and a tag that Prettier split one attribute per line stays split; with Minify it is applied as each tag is minified. Tags inside comments,
<script>,<style>and<textarea>are not touched. - Indent sets 2 spaces, 4 spaces or a tab for Beautify.
What Beautify changes besides whitespace
Prettier normalises markup as it prints it. In testing with Prettier 3, it:
- lower-cases HTML element and attribute names:
<DIV CLASS=x>becomes<div class="x">(SVG names such asviewBoxkeep their case); - puts every attribute value in double quotes;
- writes void elements as
<br />and<img ... />; - adds end tags the HTML parser would imply, so
<ul><li>One<li>Two</ul>gets two</li>tags; - puts each attribute on its own line when a start tag does not fit in 80 characters;
- keeps the contents of
<pre>unchanged.
Browsers treat the markup the same way before and after these changes.
How Minify keeps rendering the same
In normal text, browsers display any run of spaces, tabs and line breaks as a single space (the CSS white-space default), so Minify shortens each run to one space rather than deleting it. Deleting it would change the page: <b>bold</b> <i>world</i> would show as "boldworld", and the gaps between inline-block menu items would close. Whitespace that is shown as written, inside <pre> and <textarea>, is not touched, and neither is code in <script> and <style>.
The trade-off is a smaller saving than an aggressive minifier: whitespace between block elements such as </p> <p> stays as one space, and inline CSS and JavaScript are not compressed. Minify cannot see your stylesheets either, so if CSS gives another element white-space: pre, its whitespace is still collapsed. For production builds, a minifier in your build pipeline that knows your CSS is the better choice.
Common errors and how to fix them
Prettier, like a browser, accepts a lot of imperfect HTML: an unclosed <div> is closed for you, and <div><p>x</div> is accepted because a <p> end tag is optional. When it cannot build a tree, the error appears above the panes after "Invalid or unparsable HTML:", with the line and column at the end, such as (1:12).
| Input | Message starts with | Fix |
|---|---|---|
<div><span></div> | Unexpected closing tag "div" | Close <span> before </div>. Elements such as span, a and b have no optional end tag |
<p>a</p></div> | Unexpected closing tag "div" | Remove the stray end tag, or add the missing start tag |
Prettier is not a validator: markup that formats cleanly can still break the HTML standard, for example by using duplicate id values or a block element inside <span>. Use the W3C's Nu HTML Checker for conformance.
Examples
| Input | Action | Output |
|---|---|---|
<nav class="menu"><ul><li><a href="/">Home</a></li><li><a href="/about/">About</a></li></ul></nav> | Beautify, 2 spaces | <nav class="menu"> |
<div class="card"><h2>Title</h2><p>Body</p></div> | Beautify, 4 spaces | <div class="card"> |
<img src=a.png alt='Logo'><br/> | Beautify | <img src="a.png" alt="Logo" /><br /> |
<a id="x" href="/" class="btn">Home</a> | Beautify, Sort attributes | <a class="btn" href="/" id="x">Home</a> |
<div> | Minify | <div> <h1>Hi</h1> </div> |
<p> | Minify | <p> <b>bold</b> <i>world</i> </p> |
Frequently asked questions
Is an HTML beautifier the same as an HTML formatter or prettifier?
Yes. "Beautify", "format", "prettify" and "pretty-print" all mean the same job: re-indenting markup so each nested element sits on its own line at the right depth. This page uses Prettier, the formatter most editors use, so the result matches what VS Code or a build step would produce. The opposite operation, removing the whitespace again, is minifying.
Is my HTML uploaded anywhere?
No. Prettier's code is downloaded from cdn.jsdelivr.net, but formatting runs in your browser and the page does not send your markup to a server. The URL button makes your browser request the address you enter, nothing more.
Will formatting change how my page looks?
Neither option is designed to. Beautify sets whitespace sensitivity to "css", and the other changes it makes (quoting, case, void-element syntax, implied end tags) are equivalent for browsers. Minify keeps one space wherever whitespace could be visible and leaves <pre>, <textarea>, <script> and <style> alone; the exception is an element your own CSS sets to preserve whitespace.
Why is part of my markup still on one line?
Prettier keeps an element on one line when it fits within 80 characters and splitting it would change inline whitespace. That is deliberate, not a failure to format.
Why are some tags split across two lines?
Adding a line break between two inline elements would add a visible space, so Prettier breaks the line inside the tag instead (for example </svg at the end of one line and > at the start of the next), where whitespace has no effect. It looks odd but keeps the rendering identical.
Does sorting attributes affect behaviour?
No. Attribute order has no meaning in HTML, so sorting is only for readability and for cleaner diffs. Compare two versions in the Diff Checker.
Can it format the CSS and JavaScript inside my page?
Yes. Beautify formats the contents of <style> and <script> elements with Prettier's CSS and JavaScript printers. For separate files, use the CSS Formatter or JavaScript Formatter.