How to use the HTML Formatter
- Paste your HTML into the Input HTML box, drop an
.htmlfile onto it, or click Sample. - In Beautify mode choose the indent (2 spaces, 4 spaces or tabs), the wrap width and how attributes should be laid out.
- The formatted result updates as you type. Use Copy or Download to save it.
- Need the opposite? Switch to Minify to strip comments and collapse whitespace for production.
What is an HTML formatter?
An HTML formatter (or beautifier) rewrites markup with one element per line and consistent indentation that mirrors the document tree, so you can see at a glance which <div> closes where. It is the quickest way to read the source of a page builder export, an email template, a CMS snippet or HTML that was minified for production. This tool uses the open-source js-beautify engine, the same formatter used by VS Code’s built-in HTML formatting, and also formats the CSS inside <style> and the JavaScript inside <script> tags.
Beautify options explained
| Option | What it does |
|---|---|
| Indent | Two spaces is the most common convention for HTML; tabs let every developer pick their own visual width. |
| Wrap | Breaks long lines of text and attributes at roughly the chosen column. “Off” keeps each element’s content on one line. |
| Attributes | “One per line” puts every attribute on its own line when a tag has several — handy for long Tailwind or Alpine.js tags and for clean git diffs. |
| Indent <head> & <body> | Indents the children of <head> and <body> one extra level instead of keeping them flush with <html>. |
| Keep blank lines | Keeps (at most one) intentional blank line between blocks rather than removing them all. |
Inline elements such as <a>, <strong> and <span> stay inside their line of text, and the contents of <pre> and <textarea> are never touched, because changing whitespace there would change what users see.
How the safe HTML minifier works
Whitespace in HTML is not always insignificant: <b>Hello</b> <i>world</i> renders a visible space between the words. The minifier therefore takes a conservative approach:
- Removes comments, except Internet Explorer conditional comments (tick Keep comments to keep all of them).
- Collapses runs of spaces, tabs and newlines in text to a single space — exactly what the browser displays anyway.
- Drops whitespace only where it can never render: inside
<head>, around<html>,<body>, table rows and list containers. - Tidies tags (
<p class = "a">becomes<p class="a">) without changing attribute values. - Leaves
<pre>,<textarea>and template scripts untouched, minifies inline CSS, compacts JSON-LD, and minifies inline JavaScript only when it passes a syntax check.
Typical savings are 10–25% before gzip. For a full build pipeline, tools like html-minifier-terser can go further (removing optional tags or quotes), at the cost of riskier transformations. To shrink stylesheets specifically, use the CSS Minifier; for scripts, the JavaScript Formatter has its own minify mode.
Common problems
Indentation looks wrong after a tag. Usually an unclosed element (a missing </div>) — the formatter faithfully indents everything after it one level deeper, which makes the mistake easy to spot. Template syntax such as Handlebars, Liquid, Jinja or PHP blocks is detected and preserved, but complex template logic inside attributes can still produce unusual line breaks.
Tools that pair well with the HTML Formatter
- CSS Formatter — Turn a minified stylesheet into readable CSS with one property per line and properly nested @media blocks.
- HTML Entity Encoder — Escape < > & " so text is safe to show in HTML, convert accents and symbols to named or numeric entities, or decode entity-filled HTML back to plain text.
- HTML to Markdown — Paste HTML — or copy rich text straight from a web page, Google Doc or email — and get tidy Markdown you can drop into a README, wiki or static site.
- Markdown to HTML — Write or paste Markdown and get clean HTML instantly — with a sanitised live preview, GitHub-flavoured tables, task lists and fenced code blocks.
Frequently asked questions
Is my HTML uploaded anywhere?
Will beautifying change how my page looks?
display:inline-block; <pre> and <textarea> content is never changed.What is the difference between formatting and validating HTML?
Does it format CSS and JavaScript inside the HTML?
<style> and <script> tags is formatted with the same indent settings. JSON and template script types are kept as they are.How much smaller does minified HTML get?
Can I format Vue, Angular or Svelte templates?
v-if, @click or [prop]. Single-file components with <script setup> and TypeScript are formatted as HTML plus script.