HTML Formatter and Beautifier
Paste minified or tangled HTML and get clean, indented markup back instantly. Each element you open pushes its children one level deeper, void tags such as img and br stay flat because they have no children, and short text that is a tag's only child is kept inline with its tags. The contents of pre, script, style and textarea are copied through untouched so nothing whitespace sensitive breaks.
How to format HTML
- Paste your HTML into the editor, or click Load sample to try it.
- Open the Indent menu and pick 2 spaces, 4 spaces, or Tab.
- Watch the indented markup appear in the Formatted HTML box below.
- Click Copy to put the result on your clipboard.
- Click Download to save it as a formatted.html file.
Examples
Indent a nested list
<ul><li>One</li><li>Two</li></ul>
<ul> <li>One</li> <li>Two</li> </ul>
Void image stays flat, heading stays inline
<section><h2>Title</h2><img src="x.png"></section>
<section> <h2>Title</h2> <img src="x.png"> </section>
Collapse the whitespace inside a paragraph
<p> Hello world </p>
<p>Hello world</p>
Frequently asked questions
Is my HTML sent to a server?
No. Formatting runs entirely in your browser with client side code, so your markup never leaves your device and nothing is logged.
How does the indentation work?
Opening a tag increases the indent for everything nested inside it, and its closing tag drops back a level. Each level is one indent unit, so tags line up under their parent.
Why do img, br and input not get indented children?
They are void elements that cannot contain anything, so the formatter never increases the depth after them. Sibling tags that follow stay at the same level rather than drifting to the right.
Will it break my pre, script, style or textarea blocks?
No. The content of those four elements is whitespace sensitive or is not HTML, so the tool captures each block whole and emits it verbatim without reindenting a single character inside.
Why did the spaces inside my text collapse?
Runs of whitespace inside ordinary text are reduced to a single space and trimmed, which is how browsers render HTML anyway. This keeps lines tidy. Text inside pre and textarea is exempt and stays exactly as written.
Does short text stay on the same line as its tag?
Yes. When a tag holds only a single run of text, such as a list item or a heading, the text and closing tag are merged onto the opening tag's line instead of being split across three lines.
Does it minify or validate HTML?
No. It beautifies and indents for readability and does not shrink the file or check for errors. For the smallest output use a minifier, and for correctness use a validator.
Can I change the indent character?
Yes. Pick 2 spaces, 4 spaces, or a tab from the Indent menu. The API accepts any string in its indent field, so you can send four spaces, a tab, or another sequence.
What happens with an unclosed tag or comment?
The formatter is tolerant. An unterminated tag is kept as text, an open comment runs to the end of the input, and a raw block with no closing tag is preserved verbatim, so you still get output.
Learn more
- How HTML indentation and void elements work
Why a beautifier indents by nesting depth, how void and raw elements are treated, and what whitespace collapsing does to your markup.
Related tools
Markdown to HTML
Convert Markdown to clean HTML in your browser. Headings, bold, italic, links, images, lists, blockquotes and fenced code blocks, with text safely escaped.
JSON Formatter
Format, validate and minify JSON online. Pretty-print with custom indentation, sort keys and catch syntax errors. Runs in your browser.
.env to JSON
Convert a .env file to JSON, or JSON back to .env. Parses KEY=value lines, comments, quotes and export. Runs entirely in your browser.
ASCII Table
Full ASCII table for all 128 codes with decimal, hex, octal and binary values, character names and descriptions. Search by code, hex or character.
Aspect Ratio Box Generator
Generate CSS for a responsive aspect-ratio container. Use the modern aspect-ratio property or the padding-top fallback, then copy the ready code.
Aspect Ratio Calculator
Calculate aspect ratios fast. Enter a ratio like 16:9 and one dimension to get the other, or enter width and height to simplify the ratio.