Skip to content

HTML Formatter and Minifier

Turn a single line of markup into an indented tree you can read, or squeeze formatted HTML back down and see exactly how many characters came out.

Runs in your browserFree, no sign-upLast reviewed

Settings

Results update automatically as you type.

Formatted HTML

<div class="card">
  <h2>
    Title
  </h2>
  <p>
    Hello
    <strong>
      world
    </strong>
  </p>
</div>

Quick answers

How do I format HTML code online?
Paste the markup into the HTML box and leave Action on Format. Each tag and each piece of text moves to its own line, indented two spaces for every level of nesting, and the result can be copied or downloaded as index.html.
What is the difference between an HTML formatter and an HTML beautifier?
Nothing in practice. Formatter, beautifier, prettifier and pretty printer are names for the same job: adding line breaks and indentation so the nesting of the markup is visible. None of them change which elements are on the page.
How much smaller does minified HTML get?
It depends on how much indentation and how many comments the source has. In the examples on this page a small indented nav block shrinks by 17% and a commented head block by 25%. Markup that is already on one line saves 0%.
Does formatting HTML change how the page looks?
It can, slightly. This tool puts inline elements such as strong, a and span on their own lines, and a line break between inline elements renders as a space. Text that had no space between two inline tags will gain one, so treat the formatted output as a reading copy.
Can this tool simplify or clean up HTML?
It normalises whitespace only: consistent indentation when formatting, no surplus whitespace when minifying, and comment removal if you choose it. It does not remove inline styles, empty tags, attributes or deprecated elements, and it does not repair broken nesting.

Why use HTML Formatter & Minifier

Paste markup and pick one of two actions. Format puts every tag and every run of text on its own line, indented two spaces per nesting level, and keeps void elements such as img, br, meta and link at the same depth instead of indenting after them. Minify collapses each run of whitespace to one space, removes the whitespace between adjacent tags, optionally strips comments, and reports the size before and after with the percentage saved. It is a structural re-indenter, not a validator or repair tool: it does not close missing tags, and it treats the contents of pre, textarea, script and style like any other text, so check those sections afterwards.

HTML formatting examples: before and after

Results are the exact output of Format mode. Line breaks in the output are shown here as slashes.

The default sample card

<div class="card"><h2>Title</h2><p>Hello <strong>world</strong></p></div>

<div class="card"> / <h2> / Title / </h2> / <p> / Hello / <strong> / world / </strong> / </p> / </div> across 11 lines, with strong nested two levels inside the div.

Text always gets its own line, one level deeper than the tag that contains it.

A document head with void elements

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Hi</title><link rel="stylesheet" href="a.css"></head><body><img src="a.png" alt=""><br><p>Text</p></body></html>

17 lines. The doctype and html sit at the left margin, head and body at 2 spaces, and meta, title, link, img, br and p all at 4 spaces.

meta, link, img and br do not push the following lines deeper, because they never have a closing tag.

Inline SVG next to a form field

<svg viewBox="0 0 10 10"><circle cx="5" cy="5" r="4"/></svg><input type="text"><p>after</p>

svg opens, the self-closed circle sits 2 spaces in, svg closes, then input and p return to the left margin.

Markup with a missing closing tag

<div><p>Unclosed<div>x</div></div>

The final closing div ends up indented 2 spaces instead of at the left margin.

A last line that does not return to column one is a quick sign that a tag was never closed.

HTML minify examples with the characters saved

An indented navigation block

A nav containing a ul with two li links, written over 6 lines with 2-space indentation (101 characters)

<nav><ul><li><a href="/">Home</a></li><li><a href="/about">About</a></li></ul></nav> Before 101 chars, After 84 chars, Saved 17%.

A head block with a comment

head with meta charset, a comment reading analytics, a title and a stylesheet link on separate lines (124 characters)

<head><meta charset="utf-8"><title>Shop</title><link rel="stylesheet" href="main.css"></head> Before 124 chars, After 93 chars, Saved 25%.

The same hero block with comments stripped and kept

A div with class hero holding the comment <!-- hero banner -->, a blank line, <h1>Autumn sale</h1> and <p>Ends Friday</p>, indented 4 spaces (99 characters)

Comments stripped: 62 chars, Saved 37%. Strip comments unticked: 82 chars, Saved 17%.

The 20-character comment accounts for the whole difference.

Two inline elements separated by a space

<span>A</span> <span>B</span>

<span>A</span><span>B</span>

The space between the tags is removed, so the page shows AB where it used to show A B. See the cautions below.

HTML void elements the formatter does not indent after

A void element has no closing tag, so the lines after it stay at the same depth. The formatter recognises these 13 by name, in upper or lower case, and treats any tag ending in /> the same way.

ElementPurposeTypical place
areaClickable region of an image mapInside map
baseBase URL for relative linkshead
brLine breakText content
colColumn propertiesInside colgroup
embedExternal content or pluginbody
hrThematic breakbody
imgImagebody
inputForm controlInside form
linkStylesheet, icon or other linked resourcehead
metaDocument metadatahead
sourceMedia or picture sourceInside picture, audio or video
trackText track for mediaInside audio or video
wbrLine break opportunityText content

Declarations and comments, which begin with <!, are also kept at the current depth.

What to check before using minified HTML

The minifier works on text patterns and applies the same three rules to the whole input, whatever element the text is inside.

  • Whitespace between two tags is deleted. Inline elements that relied on a space between them, such as two links or two spans side by side, will touch after minifying.
  • Line breaks inside pre and textarea are collapsed to single spaces, which changes what the user sees. Minify those documents with a tool that skips them, or paste those sections back in afterwards.
  • Inline script is joined onto one line. A // comment in the script then comments out everything after it, and code that relied on line breaks instead of semicolons can break. Keep scripts in external files or review them.
  • With Strip comments when minifying ticked, every comment goes, including conditional comments for Outlook and any licence notices. Untick the box to keep them.
  • Contents of style and script are not minified beyond whitespace collapsing. Use the CSS Minifier and JavaScript Minifier on this site for those.

Format mode limits: fixed indent, text on its own line, no repair

The indent is fixed at two spaces; there is no four-space or tab option, and attributes are never wrapped or sorted. Because every text run is moved to its own line, short elements such as a title or a table cell take three lines instead of one, which makes large documents long but keeps the nesting unambiguous.

The formatter splits the input on angle brackets. A greater-than sign inside an attribute value, for example title="a > b", is read as the end of the tag and the attribute is broken across lines, so write such values as &gt; first. Text inside pre, script and style is handled like any other text: its first line is indented and any further lines are left exactly as written, so nothing inside is reformatted. Inline JavaScript that contains both a less-than and a later greater-than sign, such as if (a<b && c>d), is split as though the part between them were a tag.

Nothing is validated or corrected. Unclosed and misnested tags are indented as written, which is useful for spotting them but does not fix them. Everything runs in your browser, so unpublished templates are not uploaded.

How to get your result

  1. 1

    Paste your markup into the HTML box, replacing the sample card.

  2. 2

    Set Action to Format to indent the code, or to Minify to compress it.

  3. 3

    When minifying, leave Strip comments when minifying ticked to drop comments, or untick it to keep them, for example conditional comments in an email template.

  4. 4

    Copy the Formatted HTML or Minified HTML, or download it as index.html or index.min.html.

  5. 5

    After minifying, read the Savings panel for the Before and After character counts and the percentage Saved.

Frequently asked questions

Is minifying HTML worth it if the server already uses gzip or brotli?
The gain is smaller than the raw percentage suggests, because compression is very effective on repeated whitespace. Minifying still removes comments, which compression cannot do, and helps where a hard size limit applies to the uncompressed markup, such as email templates.
Does the formatter validate my HTML?
No. It only re-indents. Unclosed tags, misnested elements and unknown attributes pass through unchanged. An output whose last line is still indented suggests a missing closing tag, but a proper check needs an HTML validator.
Can I unminify HTML with this tool?
Yes, for the structure. Paste the one-line markup and choose Format to get an indented tree. Comments removed during minification cannot be recovered, and inline CSS or JavaScript inside the page stays on one line per block.
Can I choose tabs or four spaces for the indent?
Not at present. Format mode always indents two spaces per level. If your project uses another width, run your editor's re-indent command on the output, which is quick once the line breaks are in place.
Does it format the CSS and JavaScript inside my page?
No. Content between style or script tags is treated as plain text. Format indents its first line and leaves the rest as written, and Minify only collapses its whitespace, which puts the script on one line so that a // comment swallows the code after it.
Is my HTML uploaded when I format or minify it?
No. Both actions are done by JavaScript in your browser. The markup you paste is not sent to a server, which matters for client templates and pages that have not been published yet.
Why did minifying save 0%?
The input had no removable whitespace or comments. The default sample card is already written on one line with single spaces, so Before and After are both 73 characters.

Where to go next

CSS Minifier

Shrink CSS by removing comments, whitespace and the last semicolon in each rule.

Open tool

JavaScript Minifier

Strip comments and unnecessary whitespace from JavaScript to reduce file size.

Open tool

XML Formatter

Indent and tidy XML, RSS or SVG markup so nested structures are easy to read.

Open tool

Chmod Calculator

Tick read, write and execute for owner, group and other to get the octal chmod value, the symbolic string and the command to run.

Open tool

Cron Expression Generator

Build a cron schedule from plain options and read back exactly what it means in English.

Open tool

CSV to JSON Converter

Turn CSV or TSV data into a clean JSON array, with automatic number and boolean detection.

Open tool

Looking for something else? Browse all developer tools or see every tool.