Skip to content
GivenTool

Format and beautify HTML

Beautify minified or messy HTML with consistent indentation, including inline CSS and JavaScript.

0 / 1,000,000 characters · Updates as you type.

Settings
Runs in your browser. Nothing you type is sent anywhere.

HTML copied from a page source, an email template or a CMS export is often one enormous line, or indented so inconsistently that finding a missing closing tag takes longer than fixing it. This formatter re-indents the markup so every nested element sits one level deeper than its parent, block elements get their own lines, and inline elements such as links, bold text and spans stay inside their sentence where they belong.

Inline <style> and <script> blocks are formatted too, with the same indentation, so a minified snippet with embedded CSS and JavaScript becomes readable in one pass. You can choose two spaces, four spaces or tabs, wrap long lines at 80-120 characters, decide whether the contents of <head> and <body> are indented, and put attributes on separate lines when a tag carries many of them, which makes long class lists and data attributes easier to review in a diff.

The formatting is done by js-beautify, an established open-source (MIT) formatter, loaded only when you use this page. It changes whitespace only: it does not validate your HTML, fix unclosed tags or rewrite attributes, so the page renders exactly as before. Whitespace inside <pre> and <textarea> is left as it is, because changing it would change what is displayed. Everything runs in your browser.

How to use it

  1. Paste your HTML, from a snippet to a whole page.
  2. Pick the indentation and, if you like, a line-wrap width.
  3. The formatted HTML appears as you type; adjust the options until it reads well.
  4. Copy the result or download it as formatted.html.

Frequently asked questions

Will formatting change how my page looks?

Normally no: only whitespace between tags changes. In rare layouts that depend on whitespace between inline-block elements, a new line break can add a small gap; check the page after formatting.

Does it fix broken HTML?

No. It re-indents what is there. Unclosed or mismatched tags stay as they are, although the indentation often makes them easy to spot.

Are <script> and <style> blocks formatted?

Yes, with the JavaScript and CSS formatters from the same library, using your indentation setting.

Can it minify HTML?

No, this page only beautifies. Safe HTML minification needs knowledge of which whitespace matters, which is best left to your build tool.

Is my code uploaded?

No. The formatter is loaded into the page and runs on your device.

Related tools