HTML Pretty Print Online — Format & Indent HTML

Indent any HTML document or fragment with one tag per line. Same operation as the HTML Formatter — bookmark whichever URL you prefer.

Indent:

Input HTML

Pretty HTML

What is HTML Pretty Print?

HTML pretty print means re-indenting an HTML document so each tag sits on its own line at a depth matching its DOM nesting. The pretty-printed output preserves every tag, attribute, and text node — only whitespace between tags changes. This is the same operation other tools call "format" or "beautify"; we expose this URL because pretty print is the term many developers reach for first.

If you arrived here from a search for "pretty print HTML online", you are in the right place — but our canonical URL for the operation is the HTML Formatter. Both pages run identical code; bookmark whichever name you remember.

How to pretty print HTML — 4 steps

Paste your markup. Anything from a single <div> snippet to an entire page source.
Choose indent depth. 2 spaces (Prettier default), 4 spaces (traditional), or tab.
Click Pretty Print. Each tag is emitted on its own line at the correct depth.
Copy and use. Drop the output into your editor, PR, or documentation.

Sample input and output

Before — single line

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

After — pretty (2 sp)

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

Configurable indent

2 spaces, 4 spaces, or tabs — choose what matches your team style guide. Selection takes effect on the next click.

One tag per line

Tags placed on their own lines — the visual structure of the output mirrors the DOM tree.

Browser-side

Pretty printing runs in JavaScript on your machine. Page source, internal templates, or proprietary markup never upload.

Common use cases

check_circlePretty-printing minified HTML before debugging
check_circleIndenting CMS-generated HTML before code review
check_circleCleaning HTML copied from view-source: for analysis
check_circleFormatting HTML email templates with deeply nested tables
check_circleStandardising indent depth across team commits
check_circleProducing clean diffs in version control
check_circlePreparing HTML for documentation, blog posts, or technical articles
check_circleReformatting HTML embedded in JSON/YAML config strings after extraction

Pretty print vs. format vs. beautify

All three are the same operation. Pretty print emphasises the visual outcome ("pretty" output). Format emphasises applying a consistent style. Beautify emphasises transforming ugly minified code into something legible. The OpenFormatter HTML Formatter, HTML Pretty Print, and HTML Editor (when its Format button is pressed) call the same function. Bookmarking any of the three URLs is fine — internal links and the canonical tag point to the formatter.

Working with HTML?

Validate, view, or minify with the rest of OpenFormatter's HTML toolkit.

HTML Formatter (canonical)HTML Validator HTML Minifier

Frequently Asked Questions

Is HTML pretty print the same as HTML formatting?

Yes — they are two names for the same operation. The HTML Formatter at /html-formatter and this pretty-print page run identical algorithms. We host both URLs because both terms have search demand. Treat the formatter URL as canonical for bookmarks; treat this page as a synonym.

What indent depths can I choose?

Three options: 2 spaces (default — modern convention used by Prettier and most JS frameworks), 4 spaces (traditional, common in PHP/WordPress codebases), and tab (one indent character per level — works with editors that render tabs at any width).

Does pretty printing wrap long lines?

It places each tag on its own line — that is the wrap. It does not enforce a column-width limit on text inside elements (e.g. it will not split a long paragraph at 80 chars). For column-bound wrapping use a code formatter like Prettier with HTML support.

Will it normalize attribute quote style?

No. Single quotes, double quotes, and unquoted attribute values are all preserved exactly as written. The pretty printer does not rewrite attributes — only inter-tag whitespace is changed.

How does it handle <pre> and <textarea>?

Both elements have whitespace-significant content. The pretty printer indents the opening and closing tags but the text between them keeps its existing newlines and spaces — re-indenting them would break visible output.

Can I pretty-print an HTML fragment without a full document?

Yes. Paste any partial — a component template, an email body fragment, a portlet snippet — and it will be indented relative to its own root. No <html> or <body> wrapper is required.

Does it preserve the DOCTYPE?

Yes. <!DOCTYPE html> (and the rare legacy doctypes) are emitted on their own line at indent level 0, preceding the <html> root. The pretty printer does not invent or remove a DOCTYPE.

Does pretty-printing change file size?

Yes — output is larger than input because newlines and indent characters are added. This is fine for source files and version control. For production deployment, run the HTML Minifier on the formatted source instead of shipping the pretty version.