Shiklo Tools
PDF40
Image20
Calculators & Converters25
Text & Writing13
Developer26
Video14
Audio14
Document14
Data & Spreadsheet12
Web & SEO9
OCR & Scanning5
Archive & File12
Security & Privacy23
Health & Medical29
QR & Barcode5

HTML Formatter

Beautify HTML, including inline CSS and JavaScript, with Prettier, or minify it safely. Indent, line width and whitespace options. Private.

Clean up HTML copied from a web page, an email template, a CMS or a code generator. The HTML Formatter re-indents every element, puts attributes on separate lines when a tag gets too long, and also formats the CSS inside style blocks and the JavaScript inside script blocks. It uses Prettier, the same formatter many developers run in their editors.

Need the opposite? Minify removes comments and the whitespace between tags while leaving pre, textarea, script and style content untouched, so the page still looks and works the same. Everything happens in your browser, and your HTML is never uploaded.

How to use HTML Formatter

  1. Paste your HTML, open an .html file, or click Sample.
  2. Choose the indent (2, 4 or Tab) and the line width (80, 100 or 120).
  3. Pick how whitespace is treated: respect CSS display, ignore, or strict.
  4. Copy or download the result, or click Minify for compact HTML.

Features

  • Beautify full pages or fragments with Prettier.
  • Inline CSS in style blocks and JavaScript in script blocks formatted too.
  • Indent with 2 spaces, 4 spaces or tabs; line width 80, 100 or 120.
  • Three whitespace modes so inline text is never broken by accident.
  • Safe minifier: comments and whitespace between tags removed.
  • Content of pre, textarea, script and style kept exactly when minifying.
  • Option to keep comments when minifying.
  • Works with Vue and Svelte templates saved as HTML.
  • Private: nothing leaves your browser.

What the formatter changes

The formatter parses the HTML into elements and prints it again with one block element per line, each child indented one level deeper than its parent. When a start tag with many attributes is longer than the line width, each attribute goes on its own line. The CSS inside style elements and the scripts inside script elements are formatted with Prettier's CSS and JavaScript printers. Text content, attribute values and the order of elements are not changed.

Whitespace sensitivity

In HTML, a space between two inline elements such as links or bold text is visible on the page. Adding a line break in the wrong place can add or remove that space. The Whitespace option controls how careful the formatter is.

ModeBehaviourBest for
Respect CSS display (default)Inline elements are treated as inline, block elements as blocksMost pages; output looks the same in the browser
Ignore (more compact)Whitespace is treated as unimportant everywhereTemplates where you control all spacing with CSS
StrictEvery element is treated as inlinePages where exact spacing must never change

Minifying HTML safely

Minify removes HTML comments and the whitespace between tags, and collapses runs of spaces into one. That makes pages and email templates smaller. To avoid breaking anything, the content of pre and textarea (where spaces matter) and of script and style elements is kept exactly as written, and Internet Explorer conditional comments are kept. Tick “Keep comments when minifying” if your comments carry information, such as licence notes or template markers.

When to use an HTML beautifier

Formatting helps when you inspect markup copied from a browser's developer tools, review HTML produced by a page builder or a rich-text editor, fix the structure of an email template, compare two versions of a page with the Text Diff Checker, or simply want to see where an unclosed element starts. Clean indentation makes the nesting of elements obvious at a glance.

Errors and limitations

Browsers are forgiving and display almost any markup, but a formatter must understand the structure. If an element is closed in the wrong order or a tag is broken, the formatter reports the line and column so you can fix it. Templates that mix HTML with server-side code such as PHP or Jinja may not format, because those tags are not HTML.

Frequently asked questions

Is the HTML formatter free and private?

Yes. It is free, needs no sign-up, and the HTML is formatted in your browser. It is never uploaded.

Will formatting change how my page looks?

With the default whitespace mode, no. Spaces between inline elements are kept where the browser would show them. Use Strict if exact spacing must never change.

Does it format the CSS and JavaScript in my page?

Yes. Code inside style and script elements is formatted with Prettier's CSS and JavaScript printers.

Is the minifier safe?

It only removes comments and whitespace between tags. The content of pre, textarea, script and style elements is never changed, so the page behaves the same.

Why do I get an error?

The markup could not be parsed, for example because of a broken tag or an element closed out of order. The message gives the line and column.

Can I format email templates?

Yes. Email HTML with tables and inline styles formats well. Use the minifier carefully: some email clients are sensitive to whitespace in text.

Can it format PHP or other template files?

Only if they are valid HTML. Server-side tags like PHP or Jinja blocks are not HTML and can cause errors.

Related tools