Why format HTML?
HTML copied from a web page, exported by an editor or produced by a minifier often arrives as one endless line or with indentation that makes no sense. Finding a missing closing tag or understanding how a component is nested is painful in that state. Formatting rewrites the code with one element per line and an indentation that follows the structure of the document.
This tool uses Prettier, the most widely used code formatter, so the output looks like what you would get in a well-configured editor. You choose the indentation (2 spaces, 4 spaces or tabs) and the line width (80, 100 or 120 characters), after which long tags and attribute lists wrap onto several lines. The CSS inside <style> and the JavaScript inside <script> are formatted too.
Formatting only changes whitespace and line breaks; elements, attributes and text stay the same. Keep in mind that in HTML whitespace between inline elements can be visible, which is why Prettier is careful about where it breaks lines and sometimes keeps tags on the same line. If the HTML has a syntax error that the parser cannot handle, you get the error message with its position.
Formatting happens in your browser and the code is not uploaded. You get one free try per tool: one file or one pasted text. After that you can still re-process the same text with different options, but new input needs ToolStudio Pro, which gives unlimited use of every tool, several files at once downloaded together in a ZIP, and no ads. You can cancel anytime.
How to format HTML
- Paste your HTML or drop an .html file.
- Choose the indentation: 2 spaces, 4 spaces or tabs.
- Pick the line width: 80, 100 or 120 characters.
- Run the formatter, then copy or download the clean HTML.
When an HTML formatter helps
- Reading minified HTML from a production site.
- Cleaning up markup exported from page builders or email editors.
- Debugging nesting problems and unclosed tags.
- Normalising indentation before a code review or a commit.
- Preparing HTML examples for documentation or a tutorial.
Formatting vs minifying
They are opposite operations on the same code. Formatting adds whitespace to make HTML readable while you work on it; minifying removes it to make the file smaller for production. A common workflow is to keep the formatted version in your project and minify only what you publish.
Frequently Asked Questions
Does formatting change my HTML?
Only whitespace and line breaks. Elements, attributes and text are kept as they are.
Can it beautify minified HTML?
Yes. Paste the minified code and it comes back indented, with the embedded CSS and JavaScript formatted as well.
Tabs or spaces?
Both are supported. Choose 2 spaces, 4 spaces or tabs to match your project.
Is my code uploaded?
No. Prettier runs in your browser.
Is it free?
One file or one pasted text is free, and you can re-format it with other options. New input needs ToolStudio Pro, which gives unlimited use, several files at once in a ZIP and no ads.