Home›Formatters›Code›HTML Formatter

HTML Formatter

Code

Beautify and indent HTML markup instantly — paste your code, choose indent size, and get clean readable HTML. Runs entirely in your browser, nothing uploaded.

Reviewed by the thecalcu.com team · Last updated July 23, 2026

What is a HTML?

An HTML Formatter takes minified, collapsed, or inconsistently indented HTML markup and reformats it into a clean, human-readable structure with consistent indentation. Every opening tag increments the indent depth, every closing tag decrements it, and inline elements like <a>, <strong>, and <span> are kept on the same line as their parent text so the output does not look artificially fragmented.

Minified HTML, output by bundlers, CMSs, or templating engines, collapses all whitespace to reduce file size. While that is ideal for production delivery, it is extremely difficult to read or debug. A formatter like this one restores the visual hierarchy so you can see at a glance which elements are nested inside which, where a <div> begins and ends, and what text content each element contains.

The formatter handles complete HTML5 documents (with <!DOCTYPE html> and <html>/<head>/<body> structure), bare fragments (a single <section> block or a snippet of template code), and everything in between. HTML comments are preserved and indented to match their surrounding context. Self-closing void elements (<br>, <img>, <input>, <meta>, <link>) are placed on their own indented line.

Content inside <pre>, <script>, and <style> tags is preserved verbatim, the formatter does not attempt to reindent code or preformatted text inside those blocks, since doing so would change the rendered output. For CSS inside <style> blocks, use the CSS Formatter after extracting it.

Why Use an HTML Formatter?

Unformatted HTML makes debugging painful. When an entire page is on one line or inconsistently indented, spotting a missing closing tag, an incorrectly nested element, or an accidentally duplicated id attribute requires careful search rather than a quick visual scan.

Formatted HTML also makes code review more effective. When a colleague reviews a template change, readable indentation makes it obvious what was added, removed, or restructured, a minified diff is nearly unreadable.

Who Should Use This Formatter?

Frontend developers, reformatting server-rendered HTML for debugging, checking that template output matches the intended structure, or reviewing CMS-generated markup.

Designers working with HTML emails, email HTML tends to be heavily nested and often minified; readable indentation makes editing table layouts far easier.

Students learning HTML, seeing properly indented HTML with clear parent/child relationships makes it much easier to understand how nesting and the document tree work.

QA engineers, comparing formatted HTML snapshots when testing for regressions in server-rendered pages.

Backend developers, occasionally debugging what a templating engine (Jinja, Blade, Thymeleaf) produced without having to read a wall of minified text.

For validating that HTML is correctly structured, combine this with the URL Validator or use a dedicated HTML validation service. For formatting embedded CSS, use the CSS Formatter or the multi-language Code Beautifier.

What Does the HTML Formatter Give You?

The formatter produces a single output: your HTML reformatted with consistent indentation. The indent string used, 2 spaces, 4 spaces, or a tab character, is set by the Indent option.

The indentation depth increases by one level for each non-void opening tag and decreases for each closing tag. Inline elements (anchors, emphasis, code spans) are appended to the current line rather than breaking to a new one, which preserves the natural flow of text content. Void elements (br, img, hr, input, link, meta) are placed on their own line without affecting depth.

How to use this HTML calculator

  1. Paste your HTML into the HTML input field. You can paste a complete document or any fragment.
  2. Choose an Indent size, 2 spaces (default), 4 spaces, or tab.
  3. The formatted output appears instantly in the Formatted HTML panel below.
  4. Review the result, nested elements should appear indented one level inside their parents.
  5. Click the Copy button to copy the formatted HTML to your clipboard.
  6. Paste directly into your editor, template file, or wherever you need it.

Formula & Methodology

The formatter tokenises the input HTML using a regex that splits the string at each tag boundary, yielding a sequence of tokens: DOCTYPE declarations, comments, opening tags, closing tags, self-closing tags, and text nodes.

Indent logic:
- Opening tag (non-void, non-inline): output at current depth, then increment depth by 1.
- Closing tag (non-inline): decrement depth by 1, then output at new depth.
- Void element (br, img, input, etc.): output at current depth, depth unchanged.
- Inline element (a, span, strong, etc.): append to the previous output line rather than starting a new one.
- Text node: append to the previous output line (keeps text joined with its opening tag).
- Comment / DOCTYPE: output at current depth, depth unchanged.

Before:
html <div><h1>Hello</h1><p>This is a <strong>sample</strong> page.</p></div> 

After (2-space indent):
html <div>   <h1>Hello</h1>   <p>This is a <strong>sample</strong> page.</p> </div>

Frequently Asked Questions

An HTML formatter (also called an HTML beautifier) takes minified or inconsistently indented HTML markup and reformats it with consistent indentation, one element per line. It makes the structure of a document, nesting, parent/child relationships, and text nodes, visually obvious at a glance.
The formatter assumes the HTML you paste is structurally valid. It reformats whitespace and indentation but does not repair missing closing tags, incorrect nesting, or invalid attribute values. For validation, use the [HTML Validator](/html-validator/) separately.
No. Browsers collapse whitespace between elements anyway, so adding or removing indentation whitespace has no visible effect. The formatted output is semantically identical to the minified input.
2 spaces is the most common convention in web development and is the default here. 4 spaces is common in some style guides and is easier to read on wide monitors. Tabs are preferred in codebases that enforce tab-based indentation, they let each developer's editor display their preferred width.
Inline elements (a, span, strong, em, code, etc.) are designed to flow within a line of text. The formatter appends them to the previous line rather than breaking to a new indented line, so a sentence like <p>Click <a href='#'>here</a></p> stays on one line rather than splitting the anchor onto its own line.
Yes, you can paste a complete document starting with <!DOCTYPE html>, or just a fragment (a single <div> block or a snippet of template code). The formatter handles both without any mode switch.
Nothing is sent anywhere. The formatting runs entirely in your browser using JavaScriptt to a server. Your code never leaves your device, which makes this safe for internal, proprietary, or client HTML.
The formatter handles the outer HTML structure. Content inside <style> and <script> tags is preserved verbatim, the formatter does not beautify CSS or JS within those blocks. To format the embedded styles or scripts separately, use the [CSS Formatter](/css-formatter/) or the [Code Beautifier](/code-beautifier-formatter/).
The [Code Beautifier](/code-beautifier-formatter/) handles HTML, CSS, and JavaScript in one tool with a language selector. The HTML Formatter is dedicated to HTML only and applies more precise inline-element logic, it is the better choice when you are working exclusively with HTML markup.
The formatter treats template syntax ({{ variable }}, {% block %}) as text nodes and will not break them. However, template tags that span multiple HTML elements may confuse the tag parser. In practice, simple templates format cleanly; complex ones may need manual review after formatting.
The formatter recognises the full set of HTML5 void elements: area, base, br, col, embed, hr, img, input, link, meta, param, source, track, and wbr. These are placed on their own line without incrementing the indent depth, since they have no closing tag.
Yes. Comments (<!-- ... -->) are preserved verbatim and indented to match the depth at which they appear. Multi-line comments keep their internal whitespace intact.
Also known as
html beautifierpretty print htmlhtml indenterformat html codehtml pretty printer