MSMuhammad Shahid

Free tool · runs in your browser

HTML formatter

Turn messy or minified HTML into clean, readable, consistently indented code.

Inline scripts and styles are indented too. The HTML is only formatted, never run.

Quick answer

Paste your HTML to get clean, indented code right away, including any inline CSS and JavaScript. Choose 2 spaces, 4 spaces or tabs, and an optional line width. It only changes the layout of your code. The HTML is never run and nothing is uploaded, and broken HTML is formatted as it stands rather than repaired.

How to use it

  1. Paste your HTML. A full page or a fragment, even if it is all on one line.
  2. Choose the style. Set the indent and an optional wrap width.
  3. Copy the result. It updates as you type.

Example

One line of HTML, indented with 2 spaces:

Input

<div><h1>Title</h1><ul><li>One</li><li>Two</li></ul></div>

Output

<div>
  <h1>Title</h1>
  <ul>
    <li>One</li>
    <li>Two</li>
  </ul>
</div>

Common errors and how to fix them

The indentation looks wrong
An unclosed or mismatched tag throws the structure off. Find the missing tag, or run the W3C checker.
A small gap appeared between inline elements
Whitespace between inline elements can show on the page. Use CSS flexbox or keep those elements on one line.

Frequently asked questions

What is an HTML formatter?

A tool that adds consistent line breaks and indentation so code shows its structure. Also called a beautifier, it does not change what the page does.

Can formatting change how my page looks?

Rarely, but it can: added whitespace between inline elements such as spans or links can show as a small gap. Check layouts that depend on inline elements touching.

Does it fix invalid HTML?

No. It formats what is there. Use the W3C Nu HTML Checker to find errors such as unclosed tags.

Should I use 2 or 4 spaces?

Either is fine, as long as your project is consistent. Two spaces are common in HTML because nesting runs deep.

Does it format inline CSS and JavaScript?

Yes. The content of style and script tags is indented too.

Is it safe to paste HTML with scripts?

Yes. The HTML is treated as text and is never executed or displayed as a page.

How do I un-minify HTML from a website?

Copy it from View Source and paste it here. The result is easier to read, though the original comments and names are gone.

Does it remove anything?

No. Your tags, attributes and text are kept, and only the whitespace between them changes.

How do I make HTML smaller instead of tidier?

Formatting makes it larger. For the CSS and scripts in your page, the CSS minifier and JavaScript minifier reduce size.

How do I show formatted code on a web page?

Encode it first with the HTML encoder so browsers show it as text rather than running it.

Sources

Related

More tools in this group

Guides and apps

By Muhammad Shahid. Last updated .