HTML Formatter
Format and indent HTML code for improved readability.
What the HTML Formatter does
The HTML Formatter takes minified, cramped, or inconsistently indented HTML and rewrites it with clean, predictable indentation so the structure of the document is easy to read. It adds line breaks between adjacent tags and increases the indent level each time a block-level element opens, then decreases it when the element closes. The result is a tidy, nested layout that makes nesting depth and parent-child relationships obvious at a glance.
It is useful for developers reviewing scraped or generated markup, debugging template output, comparing two versions of a page, or simply making a pasted block of HTML legible before editing it.
How to use it
Paste your HTML into the input box and press Format. The formatted markup appears in the output box below, where you can read it, copy it to your clipboard with the Copy button, or save it as a file with the Download button, which produces a formatted.html download.
The formatter recognises void elements such as img, br, input, and meta and does not indent content under them, since they have no closing tag. It also treats common inline elements like span, a, strong, and code differently from block elements so that inline content is not pushed onto needless extra indent levels. Comments and the doctype declaration are preserved on their own lines.
Tips and notes
This tool is a pretty-printer focused on indentation, not a validator, so it will not fix broken or unbalanced tags; it simply reformats what you give it. For best results, paste reasonably well-formed markup. The default indent is two spaces per level.
Formatting happens entirely in your browser. Your HTML is never sent to a server, so you can safely format markup that contains private or internal content.