Format HTML Online

How to Format HTML Online

1. Paste or Drop Your HTML: Paste minified or messy markup into the Input (HTML) panel on the left, or drag-and-drop an .html file onto the editor. Works on snippets, full pages with embedded <style> / <script>, and email templates with deeply nested tables.
2. Pick Indent: Choose 2 spaces (the Prettier default) or 4 spaces from the Indent selector. 2 spaces is the most common HTML convention; 4 spaces matches older PHP/WordPress codebases. Tabs are visually equivalent but render at a fixed editor width.
3. Toggle Format / Minify (Optional): The same toolbar offers a Minify mode if you want to strip whitespace instead of adding it. Leave it on Format to pretty-print.
4. Click Format, then Copy or Download: The parsed, indented HTML appears in the read-only Output panel on the right. Hit Copy to grab it for your editor, or Download to save an .html file. Everything runs in your browser — no upload, no sign-up.

Why Format HTML?

HTML formatting (also called beautifying or pretty-printing) adds structured whitespace and indentation so the document's hierarchy is visible at a glance. Browsers ignore most whitespace between tags, so reformatting is safe in almost all cases — it changes the source, not the render. A few situations make it genuinely useful:

• Reading minified production HTML — View Source on a shipped page gives you one long line; pretty-printing restores the nesting so you can audit ad scripts, structured-data blocks, or third-party widget output.
• Cleaning up CMS / WYSIWYG markup — WordPress, Drupal, and TinyMCE/CKEditor frequently emit erratic indentation. Formatting the export keeps template repos diff-friendly.
• Debugging server-side templates — EJS, Handlebars, Jinja, Twig, and Thymeleaf produce HTML whose indentation reflects template logic, not output structure. A formatter reveals the real DOM tree.
• Auditing accessibility — Indented markup makes it obvious when ARIA roles, landmarks, or heading levels are out of order. Easier to spot a skipped <h2> -> <h4> jump than in a flat blob.
• Email-template work — Outlook-compatible HTML emails are deeply nested tables with conditional comments. Beautifying makes it possible to find the one <td> you need to edit.
• Preparing code samples — Tutorials, docs, and Stack Overflow answers need readable HTML. Format before pasting.

Prettier vs js-beautify vs Biome vs This Tool

Feature	XConvert HTML Formatter	Prettier (CLI/IDE)	js-beautify	Biome
Runs where	Browser (client-side)	Local Node	Local Node / browser	Local (Rust binary)
Default indent	2 spaces	2 spaces (tabWidth: 2)	4 spaces	2 spaces
Default quotes	Preserves source	Double (singleQuote: false)	Preserves source	Double
Default print width	n/a (no wrap by default)	80 chars (printWidth: 80)	n/a	80 chars
Opinionated	Light (indent + minify)	Yes — minimal config	No — highly configurable	Yes — ~97% Prettier-compatible
Formats embedded CSS/JS	Yes	Yes (embeddedLanguageFormatting: auto)	Separate parsers	Yes
Install required	None	npm i -D prettier	npm i -D js-beautify	npm i -D --save-exact @biomejs/biome
Best for	Quick one-off cleanups, privacy-sensitive markup	Team consistency in repos	Fine-grained control	Performance-critical monorepos

Note: Pretty Diff was archived in 2019 and its author moved to @prettydiff/prettydiff — for new work, pick one of the four above.

Void Elements vs Container Elements (What the Formatter Cares About)

Formatters need to know which tags can hold children and which can't. The HTML5 spec defines exactly 14 void elements that take no closing tag and no content. Everything else is a container.

Type	Examples	Closing tag?	Self-closing slash?
Void (HTML5 spec)	<area> <base> <br> <col> <embed> <hr> <img> <input> <link> <meta> <param> <source> <track> <wbr>	No — and adding one is invalid	Optional. <br> and <br /> parse identically; the slash is ignored by HTML parsers
Container	<div> <span> <p> <section> <article> <a> <button> <table> <ul>	Required: </div>, </span> ...	n/a — <div /> is a parse error and treated as <div>
Raw-text	<script> <style> <textarea> <title>	Required	Contents not parsed as HTML; preserved verbatim or formatted by language plugin
Preformatted	<pre> <code> (inside <pre>)	Required	Whitespace inside is significant — the formatter must NOT reflow it

XHTML and SVG do require the self-closing slash (<br />, <circle ... />). If you're authoring SVG-in-HTML, keep the slashes for portability.

Frequently Asked Questions

What are Prettier's defaults for HTML?

Prettier ships with tabWidth: 2, useTabs: false, printWidth: 80, singleQuote: false (double quotes for attributes), htmlWhitespaceSensitivity: "css" (respect each tag's default display for whitespace decisions), bracketSameLine: false (the closing > of a multi-line element gets its own line), and embeddedLanguageFormatting: "auto" (format inline <style> / <script> contents). XConvert's defaults match — 2-space indent, no wrapping or quote rewriting unless you ask for it.

Will the formatter modify my HTML semantically?

No. It only inserts, removes, or normalizes whitespace and indentation. It does not reorder attributes, change tag names, add or strip classes, decode entities, drop comments, or rewrite element nesting. A formatted document and its source produce identical DOM trees in the browser — the only render-level edge case is inline-element whitespace (gaps between adjacent <span> or <a> elements), which Prettier's htmlWhitespaceSensitivity: "css" is designed to preserve.

Should I write <br/> or <br>?

In HTML5, both parse identically — the trailing slash on void elements is optional and ignored by parsers. The 14 HTML5 void elements (<area>, <base>, <br>, <col>, <embed>, <hr>, <img>, <input>, <link>, <meta>, <param>, <source>, <track>, <wbr>) never accept a closing tag either way. XHTML and inline SVG do require <br /> / <circle ... />, so if you're authoring SVG-in-HTML or shipping XHTML, keep the slashes. For plain HTML5, pick a convention and stay consistent — Prettier omits the slash unless bracketSelfClosing is set; js-beautify preserves whatever was in the source.

Format vs minify — what's the difference and when do I use each?

A formatter adds whitespace for human readability; a minifier removes it to cut bytes over the wire. They're complementary. Pretty-print during development and code review so structure is visible; minify during your build step so production HTML is smaller. XConvert's toolbar has both — toggle to Minify in the same tool, or jump to the HTML Minifier for the minify-first workflow.

Will it format embedded <style> and <script> blocks too?

Yes. The parser detects <style> and <script> blocks and runs their contents through CSS and JS formatting rules respectively — the same engines that power the CSS Formatter and JS Formatter. Prettier behaves the same way via embeddedLanguageFormatting: "auto". Inline style="..." attributes and inline onclick="..." handlers are left alone to avoid breaking expressions.

How is <pre> handled? Will it reflow my code blocks?

No. <pre> and its descendants (including <code> nested inside <pre>) are preserved verbatim. The HTML spec treats whitespace inside <pre> as significant — line breaks and spacing are what make the rendered output look right. Every reasonable HTML formatter (Prettier, js-beautify, Biome, this one) special-cases <pre>, <textarea>, and <script> / <style> so their contents survive untouched.

Should I run an HTML formatter as part of my production build?

No — formatters are dev-time tools. The whitespace they add costs bytes and slows page loads. Production builds should run a minifier (html-minifier-terser is the common Node choice). The typical pipeline: format on save in your editor, commit the pretty version, then minify during the build before deploying. Server-rendered frameworks (Next.js, SvelteKit, Rails view caching) already do this for you.

Can it format JSX, Vue templates, or Svelte components?

Not reliably. JSX uses className instead of class, allows {expression} interpolation, and embeds JS where HTML doesn't expect it; Vue templates have v-if, v-for, and :bind directives; Svelte adds {#if} / {:else} blocks. A generic HTML parser sees these as invalid attributes or text. For framework code, use Prettier with the matching plugin (prettier-plugin-svelte, the built-in Vue parser, or the JSX parser).

How big a file can it handle?

Performance is comfortable up to about 5 MB. The parser builds a DOM-like tree in memory, so very large server-rendered SPAs (10+ MB single-file dumps) may take several seconds and consume significant memory. For files that big, format individual components or partials rather than the whole document. Output stays entirely in your browser tab — nothing uploads.