HTML Pretty Print: Format and Indent Markup

Ever opened a web page's source and found one long line of tags with no breaks? Minified HTML saves bytes, but it is hard to read. HTML Pretty Print takes that cramped markup and adds line breaks and indentation so you can follow the structure.

This browser tool is for developers, students, and anyone editing markup by hand. You paste raw code on the left, and a clean, indented version appears on the right as you type.

Table of Contents

• What the Tool Does
• How to Use It, Step by Step
• How the Formatter Works
• Worked Example
• How to Read the Results
• What It Handles and What It Breaks
• Limitations and Assumptions
• FAQs About the HTML Pretty Print

What the Tool Does

The tool reshapes a single block of HTML. It has one input box, one output box, and three small result cards.

• Raw HTML Input: the box where you paste or type your markup. A sample snippet loads by default.
• Formatted HTML Output: a read-only box that shows the indented result.
• Live formatting: the output updates on every keystroke, with no button to press.
• Two-space indentation: each nesting level adds two spaces, a fixed style.
• Three cards: Original Length, Formatted Size, and Output Lines.
• Clear empties the input, and Copy HTML copies the formatted text.

How to Use It, Step by Step

1. Paste your markup into Raw HTML Input. The box starts with a short sample you can replace.
2. Watch Formatted HTML Output fill in as you type. No submit step is needed.
3. Check the three cards to see how the size and line count changed.
4. Press Copy HTML to send the formatted code to your clipboard.
5. Press Clear to empty the input and reset the cards to zero.

How the Formatter Works

This tool does not build a full document tree. It breaks the text between tags and tracks how deep each tag sits.

The steps run in order every time the input changes:

• It removes spaces that sit between one tag's end and the next tag's start.
• It starts a new line only between a closing bracket and the next opening bracket.
• A closing tag like </div> drops the indent by one level.
• A bare opening tag prints, then adds one level for what comes next.
• Plain text and inline tags print at the current indent level.

Void tags do not add a level. The tool knows the full HTML5 void list, such as img, br, hr, input, meta, link, source, track, and col. Self-closing tags and comments stay flat too.

Worked Example

The default sample is one line of markup. It holds a div, a heading, a paragraph, a link, and a two-item list. Here is the full default input:

<div class="container"><h1>Title</h1><p>This is a paragraph with <a href="#">link</a>.</p><ul><li>Item 1</li><li>Item 2</li></ul></div>

The tool turns that single line into eight lines. The div sits at the left edge. The h1, p, and ul lines each gain two spaces. The two list items gain four spaces, since they nest one level deeper. Inline content stays on its tag's line, so the link sits inside the paragraph. The cards report these totals:

Notice the formatted size is larger than the original. Indentation and line breaks add characters, so a prettied file is always bigger than a packed one.

How to Read the Results

Original Length is the size of what you pasted, counted in UTF-8 bytes. A plain letter is one byte, while emoji and other symbols take more.

Formatted Size is the byte size of the formatted output. The Output Lines card shows how many lines that output holds.

Formatted HTML Output holds the indented markup. It is read-only, so you copy the result rather than edit it in place.

What It Handles and What It Breaks

The formatter does well with clean, well-formed tags. Nested divs, lists, and tables indent in a clear, readable way. Inline elements like links and spans stay on the same line as their text.

It now leaves literal comparison signs alone. Text such as 5 < 10 stays on one line instead of being split. The full void-tag list also means elements like source and track no longer push later lines to the right.

The tool only reshapes spacing. To shrink a file back down, use the HTML minifier, which strips the spaces this tool adds. For a different formatting style, the HTML beautifier offers an alternative.

Other languages have matching formatters. The CSS pretty print and JavaScript pretty print tools clean up stylesheets and scripts. For data files, the XML pretty print tool uses the same idea on XML.

Limitations and Assumptions

• It is not a true DOM parser. It works on the text between tags, so deeply broken markup can still format oddly.
• Indentation is fixed at two spaces. There is no tab or width option.
• The input is paste-only. There is no file upload, so very large files depend on your browser.
• Copy uses the browser clipboard. The button shows Copied or Copy failed, so you always know the result.
• All work happens in your browser. Your markup is not uploaded, saved, or shared.

FAQs About the HTML Pretty Print

This calculator gives general estimates only and is not professional advice. Reviewed for general accuracy by Prof. Dr. Khalil Mudassar, PhD.