HTML Formatter & Beautifier
An HTML formatter cleans up messy, minified or badly indented markup by rewriting it with consistent indentation and one element per line, without changing how the page works. Paste your code, pick an indent size and press Format. It all runs in your browser, so your code never leaves your device.
How to format HTML
- Add your code. Paste HTML into the left panel, upload an
.htmlfile, or press Sample. - Pick your style. Choose 2 spaces, 4 spaces or tabs, and decide whether long lines should wrap.
- Format it. The right panel updates as you type. You can also press Format HTML or Ctrl + Enter.
- Use the result. Copy it, download it as a file, or open it in the full editor with live preview to keep working on it.
What the formatter changes (and what it leaves alone)
The goal is code that’s easier to read but works exactly the same. So the formatter only touches whitespace and line breaks, and it stays away from anything where whitespace matters.
| Rewritten | Kept exactly as written |
|---|---|
| Indentation, so every nested element sits one level deeper than its parent | Tag names, attribute names, values and quote marks |
Line breaks, so block elements like <div>, <p> and <li> each start on their own line | Everything inside <pre> and <textarea>, character for character |
| Runs of spaces and line breaks inside text, collapsed to a single space (browsers already show them as one) | Text-level tags like <a>, <strong> and <span>, which stay on the same line as the words around them |
CSS inside <style> tags: one rule and one declaration per line (optional) | JavaScript inside <script> tags. It’s re-indented to line up with your HTML but never rewritten |
<br/> written as <br /> | Missing end tags. If your source leaves out </li> or </p>, the output does too |
Formatting options
| Option | What it does |
|---|---|
| Indent | How far each nesting level is pushed in. Two spaces is the most common choice for HTML. Tabs let everyone on a team set their own width in their code editor. |
| Wrap lines | Off keeps each run of text on one line. At 80 or At 120 breaks long text and inline tags at word boundaries, so you don’t have to scroll sideways. |
| Indent head & body | When on, <head> and <body> are indented one level inside <html>. Turn it off for flatter output, a style many large projects prefer. |
| Format CSS | Puts each CSS rule and declaration inside <style> tags on its own line, adds a space after colons and fills in a missing final semicolon. |
| Keep blank lines | Keeps one empty line wherever your source had blank lines between blocks, so the groupings you made on purpose survive. |
Why format your HTML?
Readable markup is faster to fix. When every nested element sits one level deeper than its parent, a missing closing tag or a <div> in the wrong place stands out at a glance instead of hiding in a 400-character line.
It also keeps code reviews and version control clean. If everyone on a project formats the same way, diffs show real changes instead of whitespace noise. And when you copy code from a minified page, a CMS export or an email template, formatting it is usually the first step to figuring out what it does.
Related tools and references
Frequently asked questions
Is this HTML formatter free?
Is my code uploaded anywhere?
What's the difference between formatting, beautifying and prettifying HTML?
Can formatting break my page?
white-space: pre (other than <pre>, which is left alone) and the gaps between inline-block elements, which can shift by a few pixels when line breaks are added or removed.Does it format JavaScript too?
<script> tags so it lines up with the surrounding HTML, but it doesn't rewrite the JavaScript itself. CSS inside <style> tags gets fully formatted when the Format CSS option is on.