HTML Formatter
Beautify and indent HTML markup with proper nesting. Makes messy HTML readable in seconds.
HTML produced by content management systems, template engines, or code generators is often minified and on a single line — impossible to read, debug, or refactor. This HTML formatter adds proper indentation to show the nesting structure of your markup, making it easy to find unclosed tags, deeply nested elements, or misplaced attributes. It is an essential tool for anyone working with HTML from external sources or debugging layout issues.
📋 How to Use This Calculator
Paste your HTML into the input field — it can be a snippet or a full HTML document. Click "Format HTML" to produce indented output with 2-space indentation. Child elements are indented relative to their parent. Text content within elements is indented to the level of the element. Void elements (br, img, input, hr, meta, link) are treated correctly and do not expect closing tags. Use the Copy button to grab the formatted output. The formatted HTML is semantically identical to the input.
💡 Key Facts & Information
HTML formatting uses a token-based approach: the input is split at tag boundaries, and each token is processed in order to track the current indentation depth. Opening tags increase depth, closing tags decrease it. Void elements (area, base, br, col, embed, hr, img, input, link, meta, param, source, track, wbr) do not increase depth. Self-closing tags (ending in />) also do not increase depth. Comments are preserved as-is. This approach handles most HTML correctly but may not preserve intentional inline formatting (e.g., a <strong> tag in the middle of a sentence may be moved to its own line).