How is pretty-print different from the HTML formatter?

Pretty-print adds syntax highlighting and lets you sort attributes alphabetically; the formatter only adjusts indentation. Use pretty-print for docs and code reviews, formatter for commits.

Can I copy the colored output?

The colors are CSS only. Copy gives you plain indented HTML that round-trips back through any parser. The color is for human readability.

Does it normalize self-closing tags?

Optional — toggle 'XHTML self-close' to force ` ` style, or leave off for HTML5 ` `. The tool defaults to matching your input.

What about doctype and comments?

Preserved. The doctype stays on its own line; comments keep their original position but are re-indented.

HTML Pretty Print | DevTools Surf

DevTools Surf

Example: HTML Pretty Print

A worked example, rendered from real sample data. Sign in to run the tool on your own input.

Input

<html><head><title>Test</title></head><body><div class="container"><h1>Hello</h1><p>World</p></div></body></html>

Output

<html>

<head>
  <title>Test</title>
</head>

<body>
  <div class="container">
    <h1>Hello</h1>
    <p>World</p>
  </div>
</body>

</html>

About HTML Pretty Print

Pretty print HTML with color-coded output. Part of the DevTools Surf developer suite. Browse more tools in the HTML collection.

Use Cases

Developers presenting HTML snippets in documentation
Code reviewers reading formatted HTML pull requests
Technical writers embedding syntax-highlighted HTML in tutorials
Frontend mentors demonstrating HTML structure to students

Tips

Use color-coded output to distinguish tags from attributes
Toggle line numbers for easier code review discussions
Compare before and after to verify no content was altered

Fun Facts

Syntax highlighting was first popularized by the text editor Lexx in 1985 at IBM, initially for PL/I code.
The HTML <blink> tag, introduced by Netscape in 1994, was never part of any W3C specification and was deprecated in 2013.
Modern browsers can parse and render a simple HTML page in under 50 milliseconds on average hardware.

FAQ

How is pretty-print different from the HTML formatter?: Pretty-print adds syntax highlighting and lets you sort attributes alphabetically; the formatter only adjusts indentation. Use pretty-print for docs and code reviews, formatter for commits.
Can I copy the colored output?: The colors are CSS only. Copy gives you plain indented HTML that round-trips back through any parser. The color is for human readability.
Does it normalize self-closing tags?: Optional — toggle 'XHTML self-close' to force `<br/>` style, or leave off for HTML5 `<br>`. The tool defaults to matching your input.
What about doctype and comments?: Preserved. The doctype stays on its own line; comments keep their original position but are re-indented.

Related HTML Tools

HTML Formatter HTML Validator HTML Viewer HTML Minify HTML Minifier HTML → Plain Text CSS Pretty Print Javascript Pretty Print