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.

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.

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
What is an HTML formatter?
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.
Does the HTML formatter fix broken HTML?
No — 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.
Will formatting change how my page renders in a browser?
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.
What indent size should I use?
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.
What are inline elements and how does the formatter handle them?
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.
Does this work on full HTML documents and fragments?
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.
Is my HTML code uploaded or stored anywhere?
No. The formatting runs entirely in your browser using JavaScript — nothing is sent to a server. Your code never leaves your device, which makes this safe for internal, proprietary, or client HTML.
Can I format HTML that contains embedded CSS or JavaScript?
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/).
What is the difference between the HTML Formatter and the Code Beautifier?
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.
Can I use this for Jinja, Django, or Handlebars templates?
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.
What void elements are treated as self-closing?
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.
Does the formatter preserve HTML comments?
Yes. Comments (<!-- ... -->) are preserved verbatim and indented to match the depth at which they appear. Multi-line comments keep their internal whitespace intact.

Related Calculators

code
Code Beautifier
Beautify HTML, CSS, or JavaScript with consistent indentation and stru…
code
CSS Formatter
Beautify raw or minified CSS with proper indentation and one rule per …
code
JSON Formatter/Beautifier
Paste raw JSON and instantly beautify it with proper indentation, or m…