gizmobench

HTML Formatter

Paste messy HTML and read it back indented, or switch to Minify and read it back with the whitespace a browser never renders taken out. What is different here is what does not happen: the formatter does not hand your markup to a browser parser, so nothing is repaired behind your back. The tags that come out are the tags that went in, in the same order, with the same attributes and quoting, and pre, textarea, script, style and title come back byte for byte. Where your markup leaves the nesting to the parser, a list item with its end tag left out, an end tag that crosses another, a tag still open at the end, the page lists it under the output with a line number and changes nothing.

formatted2-space
<div> <p>Hi</p> <ul> <li>a</li> <li>b</li> </ul> </div>
Mode
Indent
Lines
7
Saved
none

7 lines out, 69 characters, nothing to report.

Every element in this markup opens and closes where it says it does, so there is nothing to report. to see what the notes look like.

  • One-line HTMLformat
    <div> <p>Hi</p> <ul> <li>a</li> <li>b</li> </ul> </div>
  • Minifyindented input
    <div><p>Hi</p><ul><li>a</li><li>b</li></ul></div>
  • <pre> contentformat
    <div> <pre> two spaces kept</pre> </div>
What moves, and what does not. Only whitespace moves, and only where a browser in normal flow does not render it: between block level tags, where a line break costs nothing, and inside a line of text, where a run of spaces already renders as one. Two inline tags written with nothing between them are never split across lines, because that would add a space the page would show. Inside pre, textarea, script, style and title nothing is touched at all. What no formatter can see is your CSS: a div set to white-space: pre is whitespace sensitive in a way the markup alone does not say.

Up to 2,000,000 characters in one pass, read here in your browser with nothing uploaded and no account. Minify takes out the whitespace and nothing else: comments, attributes and entity references all survive it. The mode, the indent and the draft are kept in this browser alone, drafts up to 200,000 characters, and the Start over button above the tool forgets them.

Accuracy. Re-indents the markup without changing the document it describes: whitespace inside pre, textarea and script is left exactly as it was, and no tag is added, closed or reordered.

Common questions

Will formatting change how my page renders?
Only whitespace moves, and only where a browser in normal flow does not render it. Between block level tags a line break and an indent cost nothing, so they are added and removed freely. Inside a line of text a run of spaces already renders as a single space, so it is printed as a single space and the run is never broken across lines. Two inline tags written with nothing between them, such as one span immediately after another, are never split onto separate lines, because the line break would render as a space that was not there. Text is never rewrapped. The one thing no formatter can see is your CSS: an ordinary div carrying white-space: pre, or a heading set to display: inline, is whitespace sensitive in a way the markup alone does not say, which is exactly why pre, textarea, script, style and title are copied out untouched instead of being reasoned about.
What happens to the content of pre, textarea and script?
Nothing at all. Those elements, along with style and title, are copied from your source to the output byte for byte, tags, indentation, tabs, blank lines and all, including any tags nested inside a pre block. The only thing that changes is where the opening tag sits: its first line is placed at the indentation of its parent, and every line inside it is left exactly as you wrote it. That is the difference between a formatter that is safe to run on a page with a template literal in a script tag and one that is not.
What are the notes listed under the output?
They are the places where your markup leaves work to the parser, reported instead of applied. HTML lets you leave out the end tag of a list item, a paragraph, a table cell and several others, so a second list item closes the first one; that is noted with both line numbers. An end tag that crosses another, an end tag with no opening tag above it, a tag still open at the end of the document, an unterminated comment or tag, and a trailing slash on an ordinary HTML element (which does not close it, whatever XML habits suggest) are all reported the same way. Nothing in the output changes because of a note: no closing tag is inserted, nothing is moved, and the indenting simply follows the nesting a browser would read.
What does Minify remove?
Whitespace, and only whitespace that is not rendered. Line breaks and indentation between block level tags go; a run of spaces inside a line of text becomes one space; a single space between two inline elements is kept, because removing it would run two words together. Comments are kept, and so are attributes, their order, their quoting and every entity reference. The content of pre, textarea, script, style and title is untouched, so a minified page still has its formatted script in it. This is a whitespace minifier, not a build step: it will not strip comments, shorten class names or rewrite your attributes.
Is my HTML uploaded anywhere?
No. The formatting happens in your own browser, which matters when the markup is a page from a client site or an email template. There is no account, no sign-up and no upload, and the tool makes no network request of its own. Your draft is remembered on this device alone so it is still there when you come back: up to 200,000 characters of it is written to local storage, a longer paste still formats in full but is not stored, and the Start over button above the tool forgets both the draft and your mode and indent settings.
How much HTML can I paste at once?
Up to 2,000,000 characters in a single pass, which is a large page several times over. Past that the tool says how large your paste is and how large it may be, and formats nothing until you cut it down. It never truncates: a formatter that silently dropped the end of your document would be worse than one that refused it.
Can I indent with tabs?
Yes. The indent control offers two spaces, four spaces and a tab, and the choice is remembered in this browser for next time. A tab is written as a real tab character, one per level, so the file indents to whatever tab width your editor is set to.
Why did some elements stay on one line?
Because breaking them would be noise. An element whose whole content is text and inline tags, such as a paragraph or a list item, is printed on one line when that line fits in 120 characters including its indentation. Past that the content moves onto its own line between the opening and closing tags, which is safe because the whitespace at a block edge is not rendered. The text inside is still never wrapped, so a long paragraph stays on one long line rather than being rewrapped into a shape you did not choose.

Re-indents the markup without changing the document it describes: whitespace inside pre, textarea and script is left exactly as it was, and no tag is added, closed or reordered.