How to use the HTML Formatter
- Paste your HTML, open an .html file, or click Load sample to see how it works.
- Click Beautify for readable, indented code, or Minify for the smallest safe version.
- For beautifying, choose the indentation, how attributes wrap and whether long lines break; for minifying, decide whether comments and spaces around block elements go.
- Copy the result or download it as an .html file.
Features
- Beautifies HTML together with embedded CSS and JavaScript
- Indent with 2 spaces, 4 spaces or tabs, with optional line wrapping
- Attributes kept inline, one per line, or aligned
- Safe minify that never touches pre, textarea, script or style content
- Removes comments but keeps Internet Explorer conditional comments
- Shows the size before and after
Why format HTML?
HTML rarely stays tidy. Content management systems, email builders and page exporters often produce markup on a handful of enormous lines, and hand-edited templates drift into inconsistent indentation over time. Beautified HTML shows the nesting of elements at a glance, which makes it far easier to find an unclosed <div>, review a pull request or copy one section into another page. Minified HTML goes the other way, trimming bytes from pages that are served millions of times.
What beautifying changes
The beautifier puts block-level elements such as <div>, <ul> and <section> on their own lines and indents their children one level deeper. Inline elements such as <a>, <strong> and <span> stay inside the surrounding text, because breaking them onto new lines could add visible spaces to your page. CSS inside <style> and JavaScript inside <script> are formatted with the same indentation.
The options
| Option | What it does | Good for |
|---|---|---|
| 2 spaces, 4 spaces or tab | Width of each indentation level | Matching your project’s style guide |
| Attributes one per line | Puts every attribute of a long tag on its own line | Components with many props or ARIA attributes |
| Wrap long lines | Breaks text and tags that pass 80 or 120 characters | Code review in narrow editors |
| Indent head and body | Indents both sections inside <html> | Full documents rather than snippets |
How the safe minifier works
Browsers collapse any run of spaces, tabs and line breaks in normal text into a single space when they render a page. That rule is what makes minification safe: the minifier turns every run of whitespace into one space and you see exactly the same page. It also removes whitespace next to block-level and head elements, where it never renders at all, tidies extra spaces inside tags, and strips comments. Internet Explorer conditional comments are kept because they contain markup.
Some content does depend on exact whitespace. Text in <pre> and <textarea> is displayed exactly as typed, and <script> and <style> hold code rather than HTML. The minifier copies those four elements through character for character. A no-break space ( ) is content, not whitespace, so it is never removed.
Where to be careful
Whitespace between elements can matter when CSS changes how it is displayed. Elements set to display: inline-block show a small gap for the space between them, and an element styled with white-space: pre shows every space. If a minified page looks slightly different, untick Remove spaces around block elements and compare again. The minifier also leaves attribute quotes, optional closing tags and inline code alone. To shrink embedded code further, run it through the CSS Minifier or the JavaScript Minifier.
Formatting is not validation
A beautifier re-indents whatever it is given, so broken markup comes out neatly indented but still broken. When the indentation suddenly drifts to the right and never comes back, look just above that point for a tag that was opened and never closed. Turning HTML into another format? Try the HTML to Markdown converter.
Frequently asked questions
Will minifying change how my page looks?
Normally not. Browsers already collapse runs of whitespace into a single space, and the contents of pre, textarea, script and style are kept exactly. Layouts that rely on inline-block spacing or CSS white-space rules are the rare exception.
Why are some tags not put on their own lines?
Inline elements such as a, strong and span stay inside their text on purpose. Moving them to new lines would add spaces that show up on the page.
Does the formatter fix invalid HTML?
No. It re-indents what you give it, so unclosed or misnested tags stay as they are. Indentation that drifts and never returns is a good clue to where a tag is missing.
Are inline CSS and JavaScript formatted too?
Yes, when you beautify. Code inside style and script tags is indented with the same settings. The minifier leaves that code untouched so it cannot break it.
Is my HTML uploaded to a server?
No. Formatting and minifying run entirely in your browser, so private templates and unreleased pages stay on your computer.