Boneyard Tools

HTML Formatter and Beautifier

Paste minified or tangled HTML and get clean, indented markup back instantly. Each element you open pushes its children one level deeper, void tags such as img and br stay flat because they have no children, and short text that is a tag's only child is kept inline with its tags. The contents of pre, script, style and textarea are copied through untouched so nothing whitespace sensitive breaks.

How to format HTML

  1. Paste your HTML into the editor, or click Load sample to try it.
  2. Open the Indent menu and pick 2 spaces, 4 spaces, or Tab.
  3. Watch the indented markup appear in the Formatted HTML box below.
  4. Click Copy to put the result on your clipboard.
  5. Click Download to save it as a formatted.html file.

Examples

Indent a nested list

<ul><li>One</li><li>Two</li></ul>
<ul>
  <li>One</li>
  <li>Two</li>
</ul>

Void image stays flat, heading stays inline

<section><h2>Title</h2><img src="x.png"></section>
<section>
  <h2>Title</h2>
  <img src="x.png">
</section>

Collapse the whitespace inside a paragraph

<p>   Hello    world   </p>
<p>Hello world</p>

Frequently asked questions

Is my HTML sent to a server?

No. Formatting runs entirely in your browser with client side code, so your markup never leaves your device and nothing is logged.

How does the indentation work?

Opening a tag increases the indent for everything nested inside it, and its closing tag drops back a level. Each level is one indent unit, so tags line up under their parent.

Why do img, br and input not get indented children?

They are void elements that cannot contain anything, so the formatter never increases the depth after them. Sibling tags that follow stay at the same level rather than drifting to the right.

Will it break my pre, script, style or textarea blocks?

No. The content of those four elements is whitespace sensitive or is not HTML, so the tool captures each block whole and emits it verbatim without reindenting a single character inside.

Why did the spaces inside my text collapse?

Runs of whitespace inside ordinary text are reduced to a single space and trimmed, which is how browsers render HTML anyway. This keeps lines tidy. Text inside pre and textarea is exempt and stays exactly as written.

Does short text stay on the same line as its tag?

Yes. When a tag holds only a single run of text, such as a list item or a heading, the text and closing tag are merged onto the opening tag's line instead of being split across three lines.

Does it minify or validate HTML?

No. It beautifies and indents for readability and does not shrink the file or check for errors. For the smallest output use a minifier, and for correctness use a validator.

Can I change the indent character?

Yes. Pick 2 spaces, 4 spaces, or a tab from the Indent menu. The API accepts any string in its indent field, so you can send four spaces, a tab, or another sequence.

What happens with an unclosed tag or comment?

The formatter is tolerant. An unterminated tag is kept as text, an open comment runs to the end of the input, and a raw block with no closing tag is preserved verbatim, so you still get output.

Learn more

Related tools