How to use the HTML formatter
- Paste HTML into the box: a whole page, a template, an email, or a snippet copied from the browser’s developer tools. It is formatted as you paste.
- Choose Format to indent it with 2 spaces, 4 spaces or a tab, or Minify to remove the whitespace browsers don’t show. Tick Indent the code inside <script> and <style> to shift those blocks to the indentation of their tag.
- Press Copy beside the result, or Download to save it as an .html file.
- Read the warnings, if any: unclosed and stray tags with their line and column.
Why formatting HTML can change a page — and how this one avoids it
Browsers lay out two kinds of boxes. Block elements — div, p, headings, lists, list items, tables and their rows and cells, section, header and the like — start on a new line, and whitespace next to them never shows. Inline content — text, a, b, em, span, img, button, input — flows like words in a sentence, and there any run of spaces, tabs and line breaks is drawn as one space. So <b>New</b><i>York</i> shows “NewYork”, and a formatter that puts the two tags on separate lines turns it into “New York”. Many beautifiers do exactly that.
This formatter follows the same rules as the browser. It adds line breaks only next to block elements. Between two inline pieces it never adds or removes whitespace; where whitespace already exists and contains a line break, it may re-indent that line. Comments and invisible elements (script, style, meta, link, template) get a line of their own unless text touches them on both sides, as in a<!-- -->b, which must stay “ab”.
| Changes | Never changes |
|---|---|
| Line breaks and indentation next to block elements | Tag names, attributes, their values, quotes and order |
| Indentation of existing line breaks inside text | The words of the text and the spaces between them |
| Minify: whitespace next to blocks removed, other runs of whitespace shortened to one space | The content of <pre>, <textarea> and <title>; <script> and <style> unless you tick the option |
| Windows line breaks (CR LF) written as LF, as browsers read them | Comments, entities such as , and end tags you left out |
HTML lets you leave out some end tags — </li>, </p>, </td>, </tr>, </option> — and the formatter knows where those elements end, exactly as a browser does, but it doesn’t add the missing tags. A non-breaking space ( or the character itself) is not whitespace to HTML, so it is never touched.
Worked example
The sample in the box is a 449-byte page on one line. Formatted with 2 spaces:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Opening hours</title>
<style>p{margin:0}</style>
</head>
<body>
<nav class="top"><a href="/">Home</a> | <a href="/menu">Menu</a></nav>
<main>
<h1>Opening <em>hours</em></h1>
<p>We open <b>every day</b> except Monday.
<ul>
<li>Tue–Fri: 9–18
<li>Sat–Sun: 10–16
</ul>
<pre> Call 555-0123
to book</pre>
<!-- map goes here -->
</main>
<script>document.title += " ✓";</script>
</body>
</html>
The navigation links stay on one line with their “ | ” separators, the paragraph keeps its bold text inline, and the list items keep their omitted </li> tags — the <ul> also ends the paragraph, as the HTML standard says. The <pre> block keeps its own spacing. Minified, the page is 449 bytes, because it was already compact.
Warnings
Browsers never refuse HTML: they repair it, and the repair is often not what you meant. The formatter lists what it had to repair:
<div class="box"> <p>Intro <div>Note</div> </p> <span>Open </div>
| Line | Column | Warning |
|---|---|---|
| 2 | 26 | Stray </p>: a block such as <div> or <ul> inside a <p> closes the paragraph, so browsers add an empty <p></p> here |
| 3 | 3 | <span> is not closed before </div> |
- Not closed: an element whose end tag is required is still open when its parent ends. Browsers close it there.
- Stray end tag: nothing with that name is open, so the tag is ignored. A
<div>or a list inside a<p>closes the paragraph, which is why the</p>above is stray. - The slash is ignored:
<div/>doesn’t close a div in HTML — only void elements such as<br>and<img>have no end tag, with or without the slash. Inside<svg>and<math>the slash does close the element. - Duplicate attribute: browsers keep the first one and ignore the second.
Limits and tips
- CSS can change the rules. The formatter assumes each element’s default display. If your stylesheet makes list items
inline-block(a common way to build menus), a line break between</li><li>adds a small gap; and an element givenwhite-space: preby CSS shows the new indentation. Keep such markup minified or check the page after formatting. - Script and style code isn’t reformatted. The option only shifts whole blocks; it doesn’t change the code. Template literals in JavaScript that span lines would gain the extra indentation, so leave the option off for those.
- Server templates (PHP, JSP, Jinja, Handlebars) and JSX are not HTML; markup mixed with them may not come out right.
- Big pages: a 1 MB page formats in about a second; long results scroll smoothly.
- For XHTML, SVG files and feeds, the XML formatter checks the stricter XML rules. To see what changed between two versions of a page, format both and compare them in the diff checker.
Your HTML stays on your device
Everything runs in your browser. Nothing you paste is uploaded or logged, and it isn’t saved either: reloading the page clears it.
Frequently asked questions
Will formatting change how my page looks?
No, with the default display of HTML elements: the formatter only adds or removes whitespace where browsers don’t draw it, and it never touches <pre>, <textarea>, scripts or styles. CSS that changes an element’s display or white-space is the exception, explained above.
Why didn’t it put every tag on its own line?
Inline tags such as <a>, <b> and <span> are part of a line of text. A line break between two of them, where there was none, adds a visible space, so they stay together unless your HTML already had whitespace there.
Does it fix broken HTML?
It reports the problems — unclosed and stray tags, duplicate attributes, a slash on a non-void element — but keeps your tags exactly as written, so nothing is added or removed behind your back. Fix the warnings in your source and format again.
Is minified HTML the same page?
Yes. Minify removes only whitespace next to block elements and shortens other runs of whitespace to one space, which browsers draw the same way. Comments and the code inside scripts and styles are kept; a server with gzip or Brotli compression saves more than minifying does.
Is my HTML uploaded?
No. The page formats it in your browser, so it works with private templates and pages behind a login, and even offline once it has loaded.
Last updated: October 16, 2026