Skip to content

HTML Formatter and Minifier

Turn tangled markup into neatly indented HTML, or strip comments and extra whitespace for a smaller page. Nothing is uploaded: the formatting happens in your browser.

Processed in your browser. Your code is never uploaded.

How to format or minify HTML

  1. Paste your HTML into the Your HTML box, drop an .html file on it, or press Open file. Try an example loads a small, messy page.
  2. Choose Beautify or Minify. For Beautify, pick the Indent (2 spaces, 4 spaces or tabs) and the Line width.
  3. Check the result on the right. The size change is shown below it, and in Minify mode also the number of comments removed.
  4. Copy it or press Download .html.

Features

  • Prettier-powered beautifier that also formats inline CSS and JavaScript.
  • Indent with 2 spaces, 4 spaces or tabs, and wrap at 80, 100 or 120 characters.
  • Conservative minifier written to keep your page rendering the same.
  • pre, textarea, script and style kept byte for byte when minifying.
  • Conditional comments preserved for old Internet Explorer fallbacks.
  • Error location with line and column when the markup is broken.
  • Size before and after, with the percentage saved.

Why use Fileora's HTML formatter

Markup copied from a CMS, an email builder or the browser's developer tools is often a single unreadable line. Paste it here and you get a clean, indented document in a moment, without creating an account or uploading anything. The page works on a phone too, which helps when you need to check a snippet away from your desk.

The minifier is intentionally cautious. It never removes a tag or an attribute, so it can't break a template the way aggressive minifiers sometimes do.

How the minifier decides what whitespace to remove

Browsers collapse any run of whitespace in text into a single space, so the minifier does the same. Next to block-level elements, such as a div, a paragraph, a list item or anything in the head, whitespace has no visible effect at all, so it is removed completely. Between inline elements, one space is kept because it can be visible. Content that is whitespace-sensitive, like preformatted text, text areas, scripts and styles, is skipped entirely.

One limit to know: the minifier reads only the HTML, not your CSS. If your stylesheet gives an ordinary element white-space: pre, or turns list items into inline blocks, removed whitespace might show a difference, so check such pages after minifying.

To shrink the rest of the page, use the CSS minifier and the JavaScript minifier. Writing content in Markdown? The Markdown to HTML converter turns it into markup you can format here.

Frequently asked questions

How does the HTML beautifier format my code?

It uses Prettier's HTML formatter. Every block element goes on its own line, children are indented by 2 spaces, 4 spaces or a tab, and long lines are wrapped at the line width you choose (80, 100 or 120 characters). CSS inside style elements and JavaScript inside script elements is formatted too. Void elements such as meta and br are written with a closing slash.

Will beautifying change how my page looks?

Prettier is careful with whitespace that affects layout. Between inline elements such as links, spans or strong, a space can matter, so it keeps or rearranges those spaces in a way that renders the same, which sometimes produces closing brackets on the next line. The content of pre and textarea elements is never re-indented.

What does Minify remove?

It removes HTML comments, turns every run of spaces, tabs and line breaks in text into a single space, drops whitespace next to block-level tags such as div, p, li, head and meta where browsers ignore it anyway, and tidies the spaces between attributes inside tags. Non-breaking spaces are kept.

What does Minify leave alone?

The content of pre, textarea, script and style elements is copied exactly, character for character. Attribute values are never changed. Tags, optional closing tags, quotes and letter case stay as you wrote them, and inline CSS and JavaScript are not minified. IE conditional comments and comments starting with an exclamation mark are kept.

Why is a space kept between some tags after minifying?

Between inline elements, for example two links or two buttons in a row, a space is visible on the page. Removing it would glue the words or buttons together, so the minifier keeps one space there. Whitespace is only removed completely next to block-level elements, where it never shows.

Why does the formatter report an error?

Prettier checks the structure of the document, so it stops at problems like a closing tag that doesn't match the open one, for example a closing span inside a paragraph that was never opened. The message shows the line and column, and the line itself is shown with a caret. Minify mode is more forgiving and doesn't check structure.

Is my HTML sent to a server?

No. Both modes run as JavaScript in your browser tab. The formatter is downloaded the first time you use it, and your markup, including any emails or internal links it contains, never leaves your device.

Related tools

Can't find the tool you need, or something isn't working?

Tell us which tool you'd like next or what went wrong. We read every message, and requests decide what we build next.

Request a toolReport a problem

Opens your email app. Please don't attach private files.