Buy me a coffee

HTML Formatter & Beautifier

HTML Input
1
Formatted HTML
1

Last updated:

Jsonic's HTML formatter (also called an HTML beautifier or prettifier) re-indents messy or minified HTML so the page structure is easy to read. Block elements get their own lines, inline elements stay inside their sentence, and the contents of pre, textarea, script and style are preserved. It accepts real-world HTML — unquoted attributes, unclosed list items and paragraphs — the way a browser does. Minify does the reverse. Everything runs in your browser.

Before and after

<ul class="nav"><li><a href="/">Home</a><li><a href="/docs">Docs</a></ul><p>Read the <a href="/guide">guide</a> first.
<ul class="nav">
  <li><a href="/">Home</a></li>
  <li><a href="/docs">Docs</a></li>
</ul>
<p>Read the <a href="/guide">guide</a> first.</p>

The unclosed <li> and <p> tags were closed where the browser would close them, and the link stayed inside its sentence.

What is preserved

  • Whitespace that renders — text inside <pre> and <textarea> is byte-for-byte unchanged.
  • Code — <script> and <style> bodies keep their own line breaks and relative indentation.
  • Attributes — order, quoting and values are untouched; only extra spaces between attributes are collapsed.
  • Comments and the doctype — kept when formatting, removed when minifying.

Related formatters

Formatting XML (sitemaps, RSS, SOAP)? Use the XML formatter, which also checks that the document is well-formed. For JSON, use the JSON formatter.

How to format HTML

  1. Paste your HTML into the left panel (or click Example).
  2. Choose 2 spaces, 4 spaces or Tab indentation.
  3. Click Format — or Minify to shrink it.
  4. Copy the result or click Download to save formatted.html.

FAQ

How do I format HTML online?

Paste your HTML into the input panel and click Format. Block elements such as <div>, <p>, <ul> and <section> go on their own lines and their children are indented; inline elements such as <a>, <strong> and <code> stay inside the line of text they belong to. Copy the result or download it as formatted.html.

Does the formatter change how my page looks?

No. It only changes whitespace between block-level tags, which browsers ignore. Text inside <pre> and <textarea> is kept exactly, <script> and <style> code is kept and only re-indented as a block, and inline elements are not split onto separate lines, so no visible spaces are added or removed.

Can it handle messy or invalid HTML?

Yes. Like a browser, it accepts unquoted attributes, missing optional end tags (a <li> or <p> that is never closed is closed for you), and stray closing tags (they are dropped). The output always has matching tags, which also makes the structure of broken markup easier to see.

What is the difference between an HTML formatter, beautifier and prettifier?

They are the same thing: tools that re-indent HTML to make it readable. Minifying is the opposite — removing whitespace and comments to make the file smaller.

How do I minify HTML?

Click Minify. Comments are removed, whitespace between block elements is dropped, runs of whitespace in text collapse to one space, and a single space is kept between inline elements where it is visible. <pre>, <textarea>, <script> and <style> content is not changed.

Is my HTML uploaded?

No. Parsing and formatting run in JavaScript in your browser; nothing is sent to a server.

How do I format HTML in VS Code or from the command line?

VS Code formats HTML out of the box: Shift+Alt+F on Windows or Shift+Option+F on macOS. From the command line, npx prettier --write index.html formats a file with Prettier.