To format HTML, paste your markup into the Raw HTML Input editor or open a .html file, then select Beautify. Each tag goes on its own line, indented by nesting depth, and the result appears with syntax highlighting next to a live preview. Copy the output or select Download HTML to save it.
How to format HTML with the HTML formatter
- Add your HTML. Paste it into the Raw HTML Input editor, or select Choose file to open a .html or .htm file. Sample fills in a short example.
- Pick your settings. Choose Indentation, Tag Casing, Attributes, Comments and Void Tags. The defaults are 2 spaces, original casing, inline attributes, comments kept and HTML-style void tags.
- Format. Select Beautify or press Ctrl+Enter. Clean markup also drops comments and trailing spaces, and Minify squeezes the code onto as few lines as it safely can.
- Check and save. Look over the Live Preview and the HTML Structure Tree, then select Copy Output or Download HTML.
What does an HTML formatter do?
An HTML code formatter, or HTML beautifier, adds line breaks and indentation so you can see which element sits inside which. This one gives every opening tag, closing tag and text node its own line, indented one level per nesting depth. Contents of <pre>, <textarea>, <script> and <style> are copied exactly as written, so their whitespace and code don't change.
Input:
<div class="card"><h2>Hello</h2><p>Messy markup here.</p><img src="a.png" alt=""></div>Output with the defaults:
<div class="card">
<h2>
Hello
</h2>
<p>
Messy markup here.
</p>
<img src="a.png" alt="">
</div>The formatter tracks depth from the tags it sees, so close optional tags like </p> and </li> in your source. If they're left out, the indentation drifts further right with each unclosed element.
Formatting options explained
| Option | Choices | Effect |
|---|---|---|
| Indentation | 2 spaces, 4 spaces, Tab | Indent per nesting level |
| Tag Casing | Keep original, Lowercase, Uppercase | Changes tag names only, not attributes |
| Attributes | Keep inline, Wrap long attributes | Puts each attribute on its own line when a tag's attributes run past 40 characters |
| Comments | Keep, Remove | Drops HTML comments from the output, except Internet Explorer conditional comments |
| Void Tags | HTML style, Self-close style | <br> or <br />; SVG and MathML tags are never changed |
Changing any option after formatting reformats the output immediately. The Search output box highlights every match for a tag, attribute or piece of text and counts them.
Self-closing tags: br or br with a slash?
Void elements such as <br>, <img>, <input> and <meta> never have content or a closing tag. In HTML the trailing slash in <br /> is allowed but does nothing, so both forms render the same. Pick HTML style for modern pages and Self-close style if your templates or an XML-based toolchain expect XHTML-like markup.
Inline SVG and MathML are different. Inside <svg>, a tag like <path d="..." /> needs its slash to close, so the formatter leaves every tag inside <svg> and <math> exactly as written, whichever Void tags setting you choose. It also keeps the case of SVG names such as linearGradient.
Things formatting can change in the browser
Browsers collapse runs of whitespace into a single space, so indenting block elements like <div> and <section> doesn't change the page. Watch for three cases:
- Inline elements side by side.
<b>A</b><i>B</i>shows as "AB", but once each tag is on its own line it shows as "A B". - Pre and textarea. Whitespace inside these elements is shown as typed, so the formatter copies their contents unchanged and puts the closing tag straight after the content.
- Minify. It turns each run of whitespace into one space and drops it only next to block-level tags such as
<div>or<li>, so words and inline elements keep their spacing. Script, style, pre and textarea contents are left as they are, so//comments in inline scripts stay safe.
Compare the before and after in the diff checker if a layout shifts. For stylesheets and scripts pulled out of the page, use the CSS beautifier and the JavaScript beautifier.
Live preview and HTML structure tree
The Live Preview renders your formatted HTML in a sandboxed frame. <script> blocks and inline event handlers like onclick are stripped first and scripts are blocked, so pasted code can't run. That also means anything built by JavaScript won't appear.
The HTML Structure Tree parses the output the way a browser does and lists each element with its attributes. Use Expand all to see the full hierarchy, or click the arrows to open one branch at a time. The summary above the editors counts tags, comments and the deepest nesting level.
Frequently asked questions
Is this HTML formatter online and free?
Yes. It's free, needs no account, and runs in your browser. Your HTML and any file you open stay on your device.
What's the difference between an HTML formatter and an HTML beautifier?
Nothing in practice. Both names describe a tool that re-indents markup so it's easier to read. This page does both jobs, plus minifying.
Does formatting HTML change how the page looks?
Usually not, because browsers collapse whitespace between block elements. Adjacent inline elements can gain a space between them when each goes on its own line. Text inside pre and textarea elements is never changed.
Does formatting fix broken HTML?
No. It re-indents what you give it and doesn't add missing closing tags or report errors. Unclosed tags show up as indentation that keeps moving to the right.
Is it safe to preview HTML that contains scripts?
Yes. Scripts and on-event attributes are removed and the preview frame blocks script execution, so the code is displayed but not run.
Are there keyboard shortcuts?
One. In the input editor, Ctrl+Enter formats (Cmd+Enter on a Mac). Tab inserts two spaces; press Escape first if you want Tab to move to the next control.