HTML Beautifier

Beautify and format messy HTML online with proper indentation — free HTML formatter.

About

About the HTML Beautifier

Paste minified or badly indented HTML and get it back readable, with line breaks and indentation added between block-level tags — without changing what's inside <pre>, where whitespace actually matters, or reformatting the code inside <script> and <style>.

Nested tags are indented one level per depth, so a missing </div> or a tag closed in the wrong place stands out as soon as the indentation drifts. Inline elements like <a>, <span> and <strong> stay inside their line of text instead of being split onto lines of their own.

Choose what to view about this tool

Guide

Using the HTML Beautifier

  1. 1

    Step 1

    HTML is already selected below as the language.

  2. 2

    Step 2

    Paste your HTML code into the input box.

  3. 3

    Step 3

    Click Beautify to see the formatted output, entirely in your browser.

  4. 4

    Step 4

    Copy the formatted code back into your editor.

  • Indents nested HTML so each level of the tree is easy to follow
  • Keeps inline tags such as <a> and <strong> on the same line as their text
  • Leaves <pre> and <textarea> content untouched
  • Indent size from 1 to 8 spaces (2 by default)
  • Copy the formatted code in one click
  • Runs in your browser — free, no sign-up, and your code is never uploaded

Web developers

Developers clean up HTML exported from a CMS, page builder or email editor.

Email marketers

Marketers inspect the code behind a template before editing it.

SEO auditors

Auditors read a page's source to check headings, links and meta tags.

Students

Students see how nested HTML elements fit together.

Beautify another language

JavaScript Beautifier CSS Beautifier

Examples

HTML Beautifier examples

4 worked examples

01

Minified markup

Paste <div><p>Hi</p></div> and Beautify spreads it across 3 lines with the default 2-space indentation, with the <p> tag indented one level inside <div>.

02

Unindented list

Paste <ul><li>A</li><li>B</li></ul> and it comes back as 4 lines, with each <li> indented under its <ul>.

03

Preserves <pre> content

Paste <pre> keep spacing </pre> and the whitespace inside the <pre> tag is left completely untouched — only the surrounding tags get re-indented.

04

Nested markup

<div><p>Hi</p><pre> a</pre></div> is split so the <p> and <pre> each sit on their own line inside the indented <div>, with the spacing inside <pre> left exactly as it was.

Related tools

Syntax Highlighter

Turn a code snippet into highlighted HTML you can paste into a blog post or page.

Use it

Regex Cheat Sheet

A searchable quick reference for common regular expression syntax.

Use it

SQL Formatter

Break a SQL query onto multiple lines at major keywords for easier reading.

Use it

JSON to TypeScript Interface Generator

Infer a TypeScript interface from a sample JSON object.

Use it

cURL Command Builder

Build a cURL command from a method, URL, headers and body.

Use it

JWT Encoder

Build and sign a JSON Web Token from a header, payload and secret.

Use it

FAQ

Frequently asked questions

Quick answers to common questions about the HTML Beautifier.

How do I beautify HTML?

Paste your HTML code above, make sure HTML is selected, then click Beautify. The formatted output appears in the box below it — everything runs in your browser, using js-beautify.

Is this HTML beautifier free?

Yes. It's free, with no sign-up and no limit on how much code you format.

Can it un-minify HTML that's all on one line?

Yes — that's one of its most common uses. Paste minified or exported markup in and it comes back with proper nesting and indentation between block-level tags.

Will beautifying touch content inside <pre> or <script> tags?

Content inside <pre> is left exactly as it is, since whitespace there is meaningful. <script> and <style> blocks are moved onto their own indented lines, but the code inside them isn't reformatted — use the JavaScript or CSS Beautifier for that.

Is my HTML uploaded anywhere?

No. Formatting runs entirely in your browser after js-beautify loads from this site — your code never leaves your device.

Can I beautify JavaScript or CSS here too?

Yes — switch the language dropdown, or use the dedicated JavaScript beautifier or CSS beautifier page.

Can I set my own indent size?

Yes — choose anything from 1 to 8 spaces in the Indent size box before you click Beautify. Two spaces is the default.

Does it fix broken or unclosed tags?

No. It re-indents the markup as written; it doesn't add missing closing tags or correct invalid nesting. Check structure problems with your editor or an HTML validator.

Does it change attributes or text?

No — only the line breaks and indentation between tags change. Attributes, their quotes and your text are kept as they are.

Still have a question? Contact us

Report a problem

HTML Beautifier

What went wrong?
    or paste a screenshot