HTML Formatter and Minifier - Beautify or Shrink

2on /
/ Dev Tools / HTML Formatter

HTML formatter and minifier


            

What this tool does

Two opposite jobs on the same text. Formatting adds line breaks and indentation so a human can follow the nesting; minifying removes everything a browser does not need. Both here work on the characters you gave, not on a rebuilt document, so what comes out is still your markup.

How to use it

  1. 1 Paste the HTML - a whole page or just a fragment.
  2. 2 Pick your indent, then choose Format or Minify.
  3. 3 Copy the result, or run it through the other button to compare.

Whitespace is not always noise

Between two inline elements a single space is visible text: remove it and "one two" becomes "onetwo". Between block elements the same space means nothing. The minifier here drops indentation but keeps a separating space where one is doing real work.

Why pre and textarea are left alone

Inside these, every space and newline is content the reader will see. Re-indenting a code block would silently change what it displays, and trimming a textarea would change the value a form submits. The same goes for script and style: their contents are another language and are passed through untouched.

It formats, it does not repair

Tools built on the browser parser quietly fix broken markup: they close your tags, drop stray ones and move elements into places the spec demands. That is often not what you want when you are debugging - the bug you are chasing may be exactly the thing that got repaired. This one reformats the text and leaves the mistakes where you can see them.

Minifying HTML is the small win

Stripping whitespace from a page usually saves a few percent, and gzip on the server would have compressed most of it anyway. The real weight is in images, fonts and scripts. Minify HTML because a template generator left the output unreadable, not because you expect the page to get much faster.

HTML formatting - frequently asked questions

Formatting can, in one specific case: adding line breaks between inline elements introduces a space that was not there. If a layout depends on two spans touching, format the surrounding block but leave that line alone. Minifying is designed to avoid the reverse of the same problem.
New
Cron Parser Paste a cron line and read what it actually means, plus the next times it will fire. Handles ranges, steps, names and the day-of-month rule people get wrong.
Popular Today
Regex Tester Write a regular expression and see the matches, the capture groups and the replacement instantly. A runaway pattern is stopped instead of freezing the tab.

Related Dev Tools

MD5 Hash Generator Free MD5 hash generator: turn any text or file into an MD5 checksum in your browser - useful for integrity checks and quick fingerprinting.
Base64 Encoder & Decoder Free Base64 encoder and decoder: convert text or files to Base64 and back, entirely in your browser - nothing is uploaded to a server.
Lorem Ipsum Generator Free Lorem Ipsum generator: create placeholder text by paragraph, sentence or word count, with optional HTML tags for your design mockups.
JWT Decoder Free JWT decoder: paste a token to read its header, payload and signature in a readable form - decoding happens in your browser, nothing is sent.
URL Encoder & Decoder Free URL encoder and decoder: convert links and query parameters to percent-encoding and back, with full-URL and component modes, in your browser.

Other Tools You May Like

Word to PDF Convert Word to PDF for free: upload a DOC, DOCX, ODT or RTF file and download a properly formatted PDF in seconds - no registration or watermark.
PDF to Word Convert PDF to Word for free: upload a PDF and download an editable DOCX in seconds - no registration, no watermark and nothing to install.
Word Counter Free word counter: paste any text to count words, characters, sentences and paragraphs, and see the estimated reading time - nothing leaves your browser.
Character Counter Free character counter: count characters with and without spaces, plus words and lines, and check SEO limits for titles and meta descriptions.
Keyword Density Checker Free keyword density checker: paste text or a URL to see how often each word and phrase appears, with percentages for one, two and three-word terms.